/* Admin Dashboard — /admin/ (CR-10a) */

.admin-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - 64px);
  background-color: #0f0f0f;
}

.admin-sidebar {
  background-color: #161616;
  border-right: 1px solid #262626;
  padding: 1.2rem 0;
}
.admin-sidebar h2 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
  margin: 0 0 0.5rem 1.2rem;
}
.admin-sidebar a {
  display: block;
  padding: 0.6rem 1.2rem;
  color: #ccc;
  text-decoration: none;
  font-size: 0.92rem;
  border-left: 3px solid transparent;
}
.admin-sidebar a:hover { background: #1f1f1f; color: #fff; }
.admin-sidebar a.active {
  color: #fff;
  border-left-color: #00b4ec;
  background: #1a1a1a;
}
.admin-sidebar a.stub { color: #666; }
.admin-sidebar a.stub:hover { color: #888; }
.admin-sidebar a.stub::after {
  content: 'soon';
  float: right;
  font-size: 0.65rem;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border: 1px solid #333;
  border-radius: 3px;
}

.admin-content {
  padding: 1.6rem 2rem 4rem;
  max-width: 1400px;
}

.admin-page-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 1.4rem;
}

/* KPI tiles */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.9rem;
  margin-bottom: 2rem;
}
.kpi-tile {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 0.9rem 1rem;
}
.kpi-tile .kpi-label {
  font-size: 0.72rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
}
.kpi-tile .kpi-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}

/* Charts */
.chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 2rem;
}
.chart-card {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 1rem 1.2rem;
}
.chart-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ccc;
  margin: 0 0 0.7rem;
}
.chart-svg { display: block; width: 100%; height: 180px; }
.chart-svg .axis { stroke: #2c2c2c; stroke-width: 1; }
.chart-svg .line { fill: none; stroke: #00b4ec; stroke-width: 2; }
.chart-svg .area { fill: rgba(0, 180, 236, 0.15); }
.chart-svg .label { fill: #777; font-size: 10px; }
.chart-empty { color: #666; font-size: 0.85rem; padding: 2rem 0; text-align: center; }

/* Top tables */
.top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 2rem;
}
.top-card {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 1rem 1.2rem;
}
.top-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ccc;
  margin: 0 0 0.7rem;
}
.top-table { width: 100%; border-collapse: collapse; }
.top-table th, .top-table td {
  text-align: left;
  padding: 0.45rem 0.5rem;
  font-size: 0.86rem;
  color: #ddd;
  border-bottom: 1px solid #232323;
}
.top-table th { color: #888; font-weight: 600; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; }
.top-table td a { color: #00b4ec; text-decoration: none; }
.top-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Activity feed */
.activity-card {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 1rem 1.2rem;
}
.activity-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ccc;
  margin: 0 0 0.7rem;
}
.activity-list { list-style: none; padding: 0; margin: 0; }
.activity-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #232323;
  font-size: 0.88rem;
  color: #ddd;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.activity-list li:last-child { border-bottom: 0; }
.activity-list .when { color: #777; font-size: 0.78rem; white-space: nowrap; }
.activity-list .kind {
  display: inline-block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 0.5rem;
}
.activity-list .kind.signup  { background: #1f3a4a; color: #7fcfff; }
.activity-list .kind.channel { background: #2c1f4a; color: #b89dff; }
.activity-list .kind.video   { background: #1f4a2c; color: #8de5a7; }

/* Audit log */
.audit-table { width: 100%; border-collapse: collapse; background: #1a1a1a; border: 1px solid #262626; border-radius: 8px; overflow: hidden; }
.audit-table th, .audit-table td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  font-size: 0.84rem;
  color: #ddd;
  border-bottom: 1px solid #232323;
  vertical-align: top;
}
.audit-table th { color: #888; font-weight: 600; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; background: #161616; }
.audit-table tr:last-child td { border-bottom: 0; }
.audit-table .meta-cell { font-family: ui-monospace, Menlo, monospace; font-size: 0.74rem; color: #aaa; max-width: 480px; word-break: break-word; }
.audit-pager { margin-top: 1rem; display: flex; gap: 0.6rem; align-items: center; color: #aaa; font-size: 0.85rem; }
.audit-pager button {
  background: #1a1a1a; color: #ddd; border: 1px solid #333;
  padding: 0.35rem 0.7rem; border-radius: 5px; cursor: pointer;
}
.audit-pager button:disabled { color: #555; cursor: not-allowed; }

.admin-loading, .admin-error, .admin-empty {
  padding: 3rem 1rem; text-align: center; color: #888;
}
.admin-error { color: #f66; }

@media (max-width: 1100px) {
  .admin-shell { grid-template-columns: 200px 1fr; }
  .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chart-row, .top-row { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { display: flex; flex-wrap: wrap; padding: 0.5rem; }
  .admin-sidebar h2 { display: none; }
  .admin-sidebar a { border-left: none; border-bottom: 3px solid transparent; padding: 0.5rem 0.8rem; }
  .admin-sidebar a.active { border-left: none; border-bottom-color: #00b4ec; }
  .admin-sidebar a.stub::after { display: none; }
  .admin-content { padding: 1rem; }
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- CR-10b1: Users section --- */

/* Filter row above the users table */
.users-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
  align-items: center;
}
.users-filter .search-input {
  flex: 1 1 240px;
  padding: 0.55rem 0.8rem;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  color: #eee;
  font-size: 0.9rem;
}
.users-filter .search-input:focus { border-color: #00b4ec; outline: none; }
.users-filter select {
  padding: 0.55rem 0.7rem;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  color: #eee;
  font-size: 0.9rem;
}
.users-filter label.toggle {
  color: #aaa;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  user-select: none;
}

/* Users list table */
.users-table {
  width: 100%;
  border-collapse: collapse;
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 8px;
  overflow: hidden;
}
.users-table th, .users-table td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  font-size: 0.85rem;
  color: #ddd;
  border-bottom: 1px solid #232323;
  vertical-align: middle;
}
.users-table th {
  color: #888;
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #161616;
  white-space: nowrap;
}
.users-table tr:last-child td { border-bottom: 0; }
.users-table tr.row-clickable { cursor: pointer; }
.users-table tr.row-clickable:hover { background: #1f1f1f; }
.users-table td.email a { color: #00b4ec; text-decoration: none; font-weight: 600; }
.users-table td.email a:hover { text-decoration: underline; }
.users-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.users-table td.muted { color: #888; }

/* Status / subscription badges */
.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
.badge.status-verified   { background: #143a23; color: #7fe5a3; }
.badge.status-unverified { background: #3a3414; color: #ffd87f; }
.badge.status-suspended  { background: #3a1414; color: #ff7f7f; }
.badge.status-deleted    { background: #2a2a2a; color: #999; }
.badge.sub-active        { background: #143a23; color: #7fe5a3; }
.badge.sub-trialing      { background: #14283a; color: #7fc8ff; }
.badge.sub-past_due      { background: #3a2814; color: #ffb87f; }
.badge.sub-canceled      { background: #2a2a2a; color: #aaa; }
.badge.sub-none          { background: #1f1f1f; color: #888; border: 1px dashed #333; }
.badge.role-admin        { background: #2c1f4a; color: #b89dff; }
.badge.role-creator      { background: #1f4a2c; color: #8de5a7; }
.badge.role-subscriber   { background: #1f3a4a; color: #7fcfff; }

.pager {
  margin-top: 1rem;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  color: #aaa;
  font-size: 0.85rem;
  flex-wrap: wrap;
}
.pager button {
  background: #1a1a1a;
  color: #ddd;
  border: 1px solid #333;
  padding: 0.35rem 0.7rem;
  border-radius: 5px;
  cursor: pointer;
}
.pager button:disabled { color: #555; cursor: not-allowed; }

/* User detail page */
.user-detail-header {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.4rem;
}
.user-detail-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #2c1f4a;
  color: #fff;
  font-weight: 800;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.user-detail-name {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.2rem;
}
.user-detail-email {
  color: #aaa;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}
.user-detail-badges {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.user-back-link {
  display: inline-block;
  color: #aaa;
  text-decoration: none;
  font-size: 0.88rem;
  margin-bottom: 0.8rem;
}
.user-back-link:hover { color: #fff; }

.user-section {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
}
.user-section h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ccc;
  margin: 0 0 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user-section h3 .meta-link {
  font-size: 0.78rem;
  font-weight: 500;
  color: #00b4ec;
  text-decoration: none;
}
.user-section h3 .meta-link:hover { text-decoration: underline; }

.user-section .info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1.4rem;
  font-size: 0.88rem;
}
.user-section .info-grid .k { color: #888; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.06em; }
.user-section .info-grid .v { color: #ddd; word-break: break-word; }

.simple-table { width: 100%; border-collapse: collapse; }
.simple-table th, .simple-table td {
  text-align: left;
  padding: 0.4rem 0.5rem;
  font-size: 0.85rem;
  color: #ddd;
  border-bottom: 1px solid #232323;
}
.simple-table th { color: #888; font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }
.simple-table tr:last-child td { border-bottom: 0; }
.simple-table a { color: #00b4ec; text-decoration: none; }
.simple-table a:hover { text-decoration: underline; }

.empty-line { color: #777; font-size: 0.85rem; padding: 0.5rem 0; font-style: italic; }

/* Friendly action label + monospace code subtext in audit log */
.audit-action-label { display: block; color: #ddd; }
.audit-action-code  { display: block; color: #777; font-family: ui-monospace, Menlo, monospace; font-size: 0.7rem; margin-top: 1px; }
.audit-target-link  { color: #00b4ec; text-decoration: none; }
.audit-target-link:hover { text-decoration: underline; }

/* ── CR-10b2: Toast notifications ───────────────────────────────────── */
#toastHost {
  position: fixed; bottom: 1.25rem; right: 1.25rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  z-index: 9999; pointer-events: none;
}
.toast {
  padding: 0.6rem 1rem; border-radius: 6px; font-size: 0.85rem;
  color: #fff; background: #333; box-shadow: 0 2px 10px rgba(0,0,0,.4);
  animation: toastIn 0.2s ease; pointer-events: auto;
}
.toast.success { background: #1a7f3c; }
.toast.error   { background: #b91c1c; }
.toast.info    { background: #1d4ed8; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── CR-10b2: Modal ──────────────────────────────────────────────────── */
#modalHost {
  position: fixed; inset: 0; align-items: center;
  justify-content: center; background: rgba(0,0,0,.6); z-index: 9998;
  display: none;
}
#modalHost.open {
  display: flex;
}
.modal-card {
  background: #1e2028; border: 1px solid #333; border-radius: 8px;
  padding: 1.5rem; min-width: 340px; max-width: 520px; width: 90%;
  color: #ddd;
}
.modal-card h3 { margin: 0 0 1rem; font-size: 1rem; color: #eee; }
.modal-body    { margin-bottom: 1.2rem; font-size: 0.9rem; line-height: 1.5; }
.form-row      { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.75rem; }
.form-row label { font-size: 0.8rem; color: #aaa; }
.form-row input, .form-row select, .form-row textarea {
  background: #13151a; border: 1px solid #444; border-radius: 4px;
  color: #eee; padding: 0.4rem 0.6rem; font-size: 0.85rem;
}
.form-row textarea { resize: vertical; min-height: 80px; }
.checkbox-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.85rem; }
.roles-row    { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.75rem; }
.roles-row label { font-size: 0.8rem; color: #aaa; }
.roles-checkboxes { display: flex; gap: 1rem; flex-wrap: wrap; }
.roles-checkboxes label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; }
.modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; }

/* ── CR-10b2: Button variants ────────────────────────────────────────── */
.btn {
  padding: 0.4rem 0.85rem; border-radius: 5px; border: 1px solid #555;
  background: #2a2d36; color: #ccc; font-size: 0.82rem;
  cursor: pointer; white-space: nowrap;
}
.btn:hover          { background: #33363f; }
.btn-primary        { background: #00b4ec; border-color: #00b4ec; color: #000; }
.btn-primary:hover  { background: #00ceff; border-color: #00ceff; }
.btn-danger         { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn-danger:hover   { background: #dc2626; border-color: #dc2626; }
.btn-ghost          { background: transparent; border-color: #444; color: #aaa; }
.btn-ghost:hover    { background: #2a2d36; color: #ddd; }

/* ── CR-10b2: User detail action bar ─────────────────────────────────── */
.user-actions  { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.users-toolbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.row-action    { font-size: 0.75rem; padding: 0.2rem 0.55rem; }

/* --- CR-10c1: Channels admin --- */

/* Reuse users-table layout for the channels list */
.channels-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.channels-table th, .channels-table td { padding: 0.5rem 0.65rem; border-bottom: 1px solid #222; text-align: left; }
.channels-table th { color: #888; font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.channels-table tbody tr.row-clickable { cursor: pointer; }
.channels-table tbody tr.row-clickable:hover { background: #1a1a1a; }
.channels-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.channels-table .ch-thumb {
  display: inline-block; vertical-align: middle;
  width: 36px; height: 24px; border-radius: 3px;
  background-size: cover; background-position: center; background-color: #222;
  margin-right: 0.5rem;
}
.channels-table .ch-name-cell { display: flex; align-items: center; gap: 0.5rem; }
.channels-table .ch-name-cell a { color: #eee; text-decoration: none; }
.channels-table .ch-name-cell a:hover { color: #00b4ec; }

/* Status / featured badges (extends existing .badge convention) */
.badge.status-published   { background: #14532d; color: #d3fadd; }
.badge.status-unpublished { background: #2a2a2a; color: #aaa; }
.badge.status-taken_down  { background: #5b1d1d; color: #ffd5d5; }
.badge.status-deleted     { background: #333; color: #888; }
.badge.featured-yes       { background: #4c3a00; color: #ffe89a; }
.badge.featured-yes::before { content: "★ "; }

/* Channel detail header */
.channel-detail-header {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.2rem;
}
.channel-detail-thumb {
  width: 80px; height: 56px; border-radius: 6px;
  background-size: cover; background-position: center; background-color: #222;
  border: 1px solid #2a2a2a; flex-shrink: 0;
}
.channel-detail-name { font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0 0 0.15rem; }
.channel-detail-slug { color: #888; font-size: 0.85rem; margin: 0 0 0.4rem; }
.channel-detail-slug code { background: #111; padding: 0.05rem 0.35rem; border-radius: 3px; }
.channel-detail-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.3rem; }
.channel-detail-badges .meta-link {
  color: #00b4ec; font-size: 0.85rem; margin-left: 0.6rem; text-decoration: none;
}
.channel-detail-badges .meta-link:hover { text-decoration: underline; }
.brand-swatch {
  display: inline-block; width: 14px; height: 14px; border-radius: 3px;
  border: 1px solid #333; vertical-align: middle; margin-right: 0.3rem;
}

/* Members table */
.members-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.members-table th, .members-table td { padding: 0.45rem 0.55rem; border-bottom: 1px solid #222; text-align: left; }
.members-table th { color: #888; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.role-pill {
  display: inline-block; padding: 0.05rem 0.4rem; border-radius: 3px;
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.role-pill.owner   { background: #1d3a5e; color: #b9d8fa; }
.role-pill.manager { background: #2a2a2a; color: #aaa; }

/* Mini KPI tiles for channel detail */
.mini-kpi-row { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 0.2rem 0 0.6rem; }
.mini-kpi {
  background: #161616; border: 1px solid #222; border-radius: 6px;
  padding: 0.55rem 0.85rem; min-width: 110px;
}
.mini-kpi .label { color: #888; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
.mini-kpi .value { color: #eee; font-size: 1.15rem; font-weight: 700; }

/* Back link, info-grid, simple-table reuse styles already present in CR-10b1 */

/* --- CR-10c1-fix: readable default link color across the admin --- */

/* Browser default <a> color is unreadable navy on dark backgrounds.
   Apply the same readable cyan we use on .user-back-link, .meta-link,
   and channel-name hover. Specificity is low enough that any explicit
   color rule (badges, role pills, sidebar active, stub links, etc.)
   continues to win. */
.admin-shell a {
  color: #00b4ec;
  text-decoration: none;
}
.admin-shell a:hover {
  color: #4fd1ff;
  text-decoration: underline;
}

/* Sidebar links keep their existing styling (no underline on hover,
   no cyan; they use white/grey via .admin-sidebar a rules). Make sure
   we don't override those. */
.admin-sidebar a {
  color: #ccc;
}
.admin-sidebar a:hover {
  text-decoration: none;
}

/* Restore the channel-name cell link color (white-ish, cyan on hover)
   since it deliberately does NOT use the global cyan. */
.channels-table .ch-name-cell a {
  color: #eee;
}
.channels-table .ch-name-cell a:hover {
  color: #00b4ec;
}

/* Same for users-table name cells if it follows the same convention.
   (No-op if the class doesn't exist; harmless either way.) */
.users-table .u-name-cell a {
  color: #eee;
}
.users-table .u-name-cell a:hover {
  color: #00b4ec;
}

/* --- CR-10c2: Channels admin actions --- */

.channel-banner {
  padding: 0.7rem 1rem; border-radius: 6px; margin-bottom: 1rem;
  font-size: 0.92rem; line-height: 1.4;
}
.channel-banner.banner-taken_down { background: #5b3a1d; color: #ffe2c2; border: 1px solid #8a5a2c; }
.channel-banner.banner-deleted    { background: #2a2a2a; color: #aaa;    border: 1px solid #3a3a3a; }

.channel-actions {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  margin: 0.2rem 0 1rem;
}

.admin-action-btn {
  background: #2a2a2a; color: #eee; border: 1px solid #3a3a3a;
  padding: 0.45rem 0.8rem; border-radius: 4px;
  font-size: 0.85rem; cursor: pointer;
}
.admin-action-btn:hover { background: #333; }
.admin-action-btn.btn-primary { background: #00617c; border-color: #007ba0; color: #fff; }
.admin-action-btn.btn-primary:hover { background: #007ba0; }
.admin-action-btn.btn-warning { background: #5b3a1d; border-color: #8a5a2c; color: #ffe2c2; }
.admin-action-btn.btn-warning:hover { background: #6b4a2d; }
.admin-action-btn.btn-danger  { background: #5b1d1d; border-color: #8a2c2c; color: #ffd5d5; }
.admin-action-btn.btn-danger:hover  { background: #6b2d2d; }
.admin-action-btn.btn-small   { padding: 0.25rem 0.55rem; font-size: 0.78rem; }
.admin-action-btn:disabled    { opacity: 0.5; cursor: not-allowed; }

.add-manager-form { margin-top: 1rem; }
.add-manager-form label { display: block; color: #aaa; font-size: 0.82rem; margin-bottom: 0.3rem; }
.add-manager-row { display: flex; gap: 0.4rem; align-items: center; }
.add-manager-row input {
  flex: 1; background: #0f0f0f; border: 1px solid #333; border-radius: 4px;
  color: #eee; padding: 0.45rem 0.6rem; font-size: 0.9rem;
}
.add-manager-row input:focus { border-color: #00b4ec; outline: none; }

.form-warning {
  color: #ffb85a; font-size: 0.78rem; margin-top: 0.2rem;
}

/* --- CR-10d1: Videos admin --- */

.videos-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.videos-table th, .videos-table td { padding: 0.5rem 0.65rem; border-bottom: 1px solid #222; text-align: left; }
.videos-table th { color: #888; font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.videos-table tbody tr.row-clickable { cursor: pointer; }
.videos-table tbody tr.row-clickable:hover { background: #1a1a1a; }
.videos-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.videos-table .v-thumb {
  display: inline-block; vertical-align: middle;
  width: 64px; height: 36px; border-radius: 3px;
  background-size: cover; background-position: center; background-color: #222;
  margin-right: 0.5rem;
}
.videos-table .v-title-cell { display: flex; align-items: center; gap: 0.5rem; }
.videos-table .v-title-cell a { color: #eee; text-decoration: none; }
.videos-table .v-title-cell a:hover { color: #00b4ec; }
.videos-table .channel-state-badge {
  font-size: 0.7rem; padding: 0.05rem 0.35rem; border-radius: 3px;
  margin-left: 0.3rem; vertical-align: middle;
}
.videos-table .channel-state-badge.taken_down { background: #5b1d1d; color: #ffd5d5; }
.videos-table .channel-state-badge.deleted    { background: #333;    color: #888;    }

/* Video status badges (extends existing .badge convention; reuses channel
   status-* colors for taken_down / deleted parity) */
.badge.status-draft     { background: #2a2a2a; color: #aaa; }
.badge.status-scheduled { background: #2c3e6b; color: #cfe1ff; }
.badge.status-archived  { background: #3a2a3a; color: #d8b8d8; }
/* status-published, status-taken_down, status-deleted already defined in CR-10c1 */

/* Genres pill list */
.genre-pill {
  display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px;
  background: #2a2a2a; color: #ccc; font-size: 0.75rem;
  margin: 0 0.3rem 0.3rem 0;
}

/* Active filter chip (e.g. "Channel: The Morning Show ×") */
.filter-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: #1d3a5e; color: #b9d8fa;
  padding: 0.25rem 0.55rem; border-radius: 999px;
  font-size: 0.78rem; margin: 0.2rem 0.4rem 0.2rem 0;
}
.filter-chip .chip-x {
  cursor: pointer; color: #b9d8fa; font-weight: 700;
  margin-left: 0.2rem; padding: 0 0.15rem;
}
.filter-chip .chip-x:hover { color: #fff; }

/* Video detail header */
.video-detail-header {
  display: flex; align-items: flex-start; gap: 1rem;
  margin-bottom: 1rem;
}
.video-detail-name { font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0 0 0.3rem; }
.video-detail-meta { color: #aaa; font-size: 0.85rem; margin: 0 0 0.4rem; }
.video-detail-meta a { color: #00b4ec; text-decoration: none; }
.video-detail-meta a:hover { text-decoration: underline; }

/* Player + thumbnail side-by-side; wraps on narrow */
.video-player-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.video-player {
  flex: 0 1 480px; max-width: 480px;
  background: #000; border-radius: 6px; overflow: hidden;
  aspect-ratio: 16 / 9;
}
.video-player iframe, .video-player video {
  width: 100%; height: 100%; border: 0; display: block; background: #000;
}
.video-thumb-preview {
  flex: 0 1 240px; max-width: 240px;
  background: #111; border: 1px solid #2a2a2a; border-radius: 6px;
  padding: 0.5rem;
}
.video-thumb-preview img {
  width: 100%; display: block; border-radius: 3px; background: #000;
}
.video-thumb-preview .label {
  color: #888; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 0.4rem;
}

/* Video banners (same colors as channel banners) */
.video-banner {
  padding: 0.7rem 1rem; border-radius: 6px; margin-bottom: 1rem;
  font-size: 0.92rem; line-height: 1.4;
}
.video-banner.banner-taken_down { background: #5b3a1d; color: #ffe2c2; border: 1px solid #8a5a2c; }
.video-banner.banner-deleted    { background: #2a2a2a; color: #aaa;    border: 1px solid #3a3a3a; }
.video-banner.banner-channel    { background: #3a2a1d; color: #fdd9b5; border: 1px solid #6a4a2c; }

/* --- CR-10d2: Videos admin actions --- */

/* Bulk action bar above the table */
.videos-bulk-bar {
  display: flex; align-items: center; gap: 0.6rem;
  background: #181818; border: 1px solid #2a2a2a; border-radius: 6px;
  padding: 0.5rem 0.7rem; margin-bottom: 0.5rem;
  font-size: 0.85rem;
}
.videos-bulk-bar .bulk-count { color: #b9d8fa; font-weight: 600; }
.videos-bulk-bar .bulk-warning { color: #ffb85a; font-size: 0.8rem; }
.videos-bulk-bar select, .videos-bulk-bar button { font-size: 0.85rem; }

/* Checkbox column */
.videos-table th.cb-col, .videos-table td.cb-col { width: 28px; padding-right: 0.2rem; }

/* Genre triple-dropdown row */
.genre-dropdowns { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.genre-dropdowns select { flex: 1; min-width: 180px; }

/* Move-channel warning text */
.move-warning {
  background: #5b3a1d; color: #ffe2c2; border: 1px solid #8a5a2c;
  padding: 0.5rem 0.7rem; border-radius: 4px;
  margin: 0.5rem 0; font-size: 0.85rem;
}

/* --- CR-10e: Admin Genres --- */
.genres-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.genres-table th, .genres-table td { padding: 0.55rem 0.7rem; border-bottom: 1px solid #222; text-align: left; vertical-align: middle; }
.genres-table th { color: #888; font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.genres-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.genres-table tbody tr:hover { background: #1a1a1a; }
.genres-table .name-cell {
  display: flex; align-items: center; gap: 0.4rem;
  color: #eee; font-weight: 500;
}
.genres-table .name-cell .edit-pencil {
  opacity: 0.4; cursor: pointer; font-size: 0.85rem;
  background: none; border: 0; color: #aaa; padding: 0 0.2rem;
}
.genres-table tr:hover .edit-pencil { opacity: 1; }
.genres-table .edit-pencil:hover { color: #00b4ec; }
.genres-table .featured-toggle {
  cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.genres-table .featured-toggle input { cursor: pointer; }
.genres-table .video-count-link { color: #00b4ec; text-decoration: none; }
.genres-table .video-count-link:hover { text-decoration: underline; }
.genres-table .delete-btn {
  background: none; border: 0; color: #d66; cursor: pointer;
  padding: 0.2rem 0.4rem; font-size: 1rem;
}
.genres-table .delete-btn:hover { color: #f88; }

.genres-toolbar {
  display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap;
  margin-bottom: 0.8rem;
}
.genres-toolbar .spacer { flex: 1; }

/* --------------------------------------------------------------
   CR-10f: Site Analytics
   -------------------------------------------------------------- */

.analytics-toolbar {
  display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.analytics-toolbar label { color: #aaa; }
.analytics-toolbar select,
.analytics-toolbar input[type="date"] {
  background: #1c1c20; color: #eee;
  border: 1px solid #333; border-radius: 4px;
  padding: 0.35rem 0.6rem;
}
.analytics-toolbar-custom { display: inline-flex; align-items: center; gap: 0.4rem; color: #aaa; }

.analytics-kpi-section { margin: 1.4rem 0; }
.analytics-kpi-heading {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: #888; margin: 0 0 0.5rem 0; font-weight: 600;
}
.analytics-kpi-grid {
  display: grid; gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.analytics-kpi-tile {
  background: #18181c; border: 1px solid #2a2a30; border-radius: 6px;
  padding: 0.8rem 1rem;
}
.analytics-kpi-tile .kpi-label { color: #aaa; font-size: 0.78rem; margin-bottom: 0.25rem; }
.analytics-kpi-tile .kpi-value { color: #eee; font-size: 1.4rem; font-weight: 600; }

.analytics-charts {
  display: grid; gap: 1rem; margin: 1.4rem 0;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.analytics-chart-card {
  background: #18181c; border: 1px solid #2a2a30; border-radius: 6px;
  padding: 0.8rem 1rem; min-height: 240px;
}
.analytics-chart-card h3 { margin: 0 0 0.5rem 0; font-size: 0.95rem; color: #ddd; }
.analytics-chart-card .chart-svg { width: 100%; height: 200px; display: block; }

.analytics-leaderboard {
  background: #18181c; border: 1px solid #2a2a30; border-radius: 6px;
  padding: 0.9rem 1rem; margin: 1rem 0;
}
.analytics-leaderboard h3 { margin: 0 0 0.6rem 0; font-size: 1rem; color: #ddd; }
.analytics-leaderboard .top-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.analytics-leaderboard .top-table th,
.analytics-leaderboard .top-table td {
  padding: 0.45rem 0.6rem; border-bottom: 1px solid #26262c;
  text-align: left;
}
.analytics-leaderboard .top-table th.num,
.analytics-leaderboard .top-table td.num { text-align: right; }
.analytics-leaderboard .top-table a { color: #f0a500; text-decoration: none; }
.analytics-leaderboard .top-table a:hover { text-decoration: underline; }

.analytics-empty {
  color: #888; font-style: italic; padding: 0.8rem 0;
}

/* --- CR-10g1.1: Communications detail views ----------------------------- *
 * Replaces the original CR-10g1 styles. The earlier rules dumped form fields
 * at the bottom of the page on a white background; the new styles drive a
 * full-page detail view with a sticky action bar, side-by-side EasyMDE editor,
 * and a block-style audience criteria builder. All colors reuse the admin
 * tokens (#0f0f0f bg, #1a1a1a surface, #262626 border, #00b4ec accent, #888
 * muted, #eee/#ccc/#ddd text) — no new palette introduced.
 */

/* Templates/Audiences sub-navigation (kept from CR-10g1, restyled) */
.comms-subnav {
  display: flex; gap: 4px;
  border-bottom: 1px solid #262626;
  margin: 0 0 1.2rem;
}
.comms-tab {
  padding: 0.55rem 1rem;
  text-decoration: none;
  color: #aaa;
  border-bottom: 2px solid transparent;
  font-size: 0.9rem;
}
.comms-tab:hover { color: #eee; }
.comms-tab.is-active {
  color: #fff;
  border-bottom-color: #00b4ec;
  font-weight: 600;
}

.comms-host { display: block; }

.comms-list-intro {
  color: #aaa; font-size: 0.88rem; line-height: 1.5;
  margin: 0 0 0.9rem;
}

.comms-list-toolbar {
  display: flex; gap: 0.5rem; align-items: center;
  margin: 0 0 0.8rem;
}

.comms-list-card {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 8px;
  overflow: hidden;
}

.comms-filter-chips {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin: 0 0 0.9rem;
}
.comms-filter-chip {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  color: #bbb;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  cursor: pointer;
}
.comms-filter-chip:hover { color: #fff; border-color: #3a3a3a; }
.comms-filter-chip.is-active {
  background: #1d3a5e; color: #d3ecff;
  border-color: #2a5a8a;
}

/* Category & marketing badges (extends .badge convention) */
.badge.cat-account_security { background: #1f3a4a; color: #7fcfff; }
.badge.cat-billing          { background: #3a2814; color: #ffb87f; }
.badge.cat-newsletter       { background: #1f4a2c; color: #8de5a7; }
.badge.cat-announcements    { background: #2c1f4a; color: #b89dff; }
.badge.cat-new_content      { background: #4c3a00; color: #ffe89a; }
.badge.cat-other            { background: #2a2a2a; color: #aaa; }

/* ===== Detail-view layout ===== */
.comms-detail-page {
  max-width: 1200px;
}

/* Detail-view breadcrumbs (introduced CR-10g1.1) */
.comms-breadcrumb {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
}
.comms-breadcrumb a {
  color: #aaa;
  text-decoration: none;
}
.comms-breadcrumb a:hover { color: #fff; }

.comms-detail-header {
  margin: 0 0 1rem;
}
.comms-detail-header h1 {
  margin: 0 0 0.3rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
}
.comms-detail-description {
  color: #aaa;
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 0.5rem;
  max-width: 720px;
}
.comms-detail-meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-top: 0.4rem;
}

/* Sticky action bar at the TOP of the form area */
.comms-action-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  background: #161616;
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  margin: 0 0 1.2rem;
  box-shadow: 0 4px 8px -4px rgba(0,0,0,0.5);
}

/* Form sections inside the detail view */
.comms-form-section {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin: 0 0 0.9rem;
}
.comms-form-section > label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  font-weight: 600;
  margin: 0 0 0.45rem;
}
.comms-form-section input[type="text"],
.comms-form-section input[type="number"],
.comms-form-section textarea,
.comms-form-section select {
  width: 100%;
  background: #0f0f0f;
  color: #eee;
  border: 1px solid #333;
  border-radius: 5px;
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: 0.92rem;
  box-sizing: border-box;
}
.comms-form-section input:focus,
.comms-form-section textarea:focus,
.comms-form-section select:focus {
  outline: none;
  border-color: #00b4ec;
}

/* Variable chips (clickable, insert into EasyMDE) */
.comms-var-chips {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.comms-var-chip {
  background: #14283a;
  color: #7fcfff;
  border: 1px solid #1d3a5e;
  border-radius: 4px;
  padding: 0.25rem 0.55rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.78rem;
  cursor: pointer;
}
.comms-var-chip:hover {
  background: #1d3a5e; color: #d3ecff;
}

.comms-editor-grid > textarea { min-height: 380px; }

/* Version history (collapsible) */
.comms-version-history {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 0.7rem 1rem;
  margin: 1rem 0 0;
  color: #ddd;
}
.comms-version-history summary {
  cursor: pointer; color: #ccc;
  font-size: 0.9rem;
  font-weight: 600;
}
.comms-version-list { margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.3rem; }
.comms-version-row {
  display: grid;
  grid-template-columns: 60px 160px 1fr auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid #232323;
  font-size: 0.84rem;
}
.comms-version-row:last-child { border-bottom: 0; }
.comms-version-row .v-num   { color: #00b4ec; font-weight: 700; }
.comms-version-row .v-when  { color: #aaa; font-size: 0.8rem; }
.comms-version-row .v-note  { color: #ddd; }
.comms-version-row .v-note.muted { color: #777; font-style: italic; }

/* ===== Audience criteria builder ===== */
.comms-criteria-builder {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
@media (max-width: 900px) {
  .comms-criteria-builder { grid-template-columns: 1fr; }
}

.comms-criteria-list {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 0.85rem 1rem;
}
.comms-criteria-list h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
  margin: 0 0 0.7rem;
  font-weight: 600;
}

.comms-criteria-cards {
  display: flex; flex-direction: column; gap: 0.55rem;
}
.comms-criteria-card {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  align-items: center;
  background: #161616;
  border: 1px solid #262626;
  border-radius: 6px;
  padding: 0.55rem 0.65rem;
}
.comms-criteria-card select,
.comms-criteria-card input[type="number"] {
  background: #0f0f0f;
  color: #eee;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 0.35rem 0.55rem;
  font-size: 0.85rem;
  flex: 0 1 auto;
}
.comms-criteria-card select { min-width: 150px; }
.comms-criteria-card input[type="number"] { width: 90px; }
.comms-criteria-card .comms-criteria-op-fixed {
  color: #888; font-size: 0.85rem;
  padding: 0 0.3rem;
}
.comms-criteria-card .comms-criteria-multi {
  display: inline-flex; gap: 0.35rem; flex-wrap: wrap;
}
.comms-criteria-card .remove-btn {
  margin-left: auto;
  background: transparent;
  color: #888;
  border: 1px solid #333;
  border-radius: 4px;
  cursor: pointer;
  width: 26px; height: 26px;
  font-size: 1.1rem; line-height: 1;
  padding: 0;
}
.comms-criteria-card .remove-btn:hover {
  color: #ff7f7f; border-color: #5b1d1d;
}

.comms-add-condition-btn {
  margin-top: 0.7rem;
  background: transparent;
  color: #00b4ec;
  border: 1px dashed #2a5a8a;
  padding: 0.45rem 0.8rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.85rem;
}
.comms-add-condition-btn:hover {
  background: rgba(0,180,236,0.05);
  color: #4fd1ff;
}
.comms-add-condition-btn:disabled {
  color: #555; border-color: #2a2a2a; cursor: not-allowed;
  background: transparent;
}

/* Audience preview pane */
.comms-audience-preview {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  position: sticky;
  top: 4rem;
}
.comms-audience-preview h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
  margin: 0 0 0.4rem;
  font-weight: 600;
}
.comms-audience-preview-count {
  color: #fff; font-size: 1.4rem; font-weight: 700;
  margin-bottom: 0.6rem;
}
.comms-audience-preview-loading {
  color: #888; font-size: 0.85rem; padding: 0.6rem 0; font-style: italic;
}
.comms-audience-preview-list {
  display: flex; flex-direction: column; gap: 0.35rem;
  max-height: 420px; overflow-y: auto;
  padding-right: 0.3rem;
}
.comms-audience-preview-row {
  font-size: 0.84rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid #232323;
}
.comms-audience-preview-row .m-name  { color: #ddd; }
.comms-audience-preview-row .m-email { color: #888; font-size: 0.78rem; }

/* Empty state + loading */
.comms-empty-state {
  color: #888;
  font-size: 0.88rem;
  font-style: italic;
  padding: 0.8rem 0;
  text-align: center;
}
.comms-loading {
  color: #888;
  padding: 2rem 0;
  text-align: center;
  font-size: 0.9rem;
}

/* ===== EasyMDE theme overrides ===== *
 * EasyMDE injects light-themed CSS by default. Recolor for the dark admin
 * theme so the editor and preview pane are readable.
 */
.comms-editor-grid .EasyMDEContainer {
  margin-top: 0.2rem;
}
.comms-editor-grid .editor-toolbar {
  background: #161616;
  border: 1px solid #2a2a2a;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  opacity: 1;
}
.comms-editor-grid .editor-toolbar button {
  color: #ccc !important;
  border: 1px solid transparent;
}
.comms-editor-grid .editor-toolbar button:hover,
.comms-editor-grid .editor-toolbar button.active {
  background: #1f1f1f !important;
  border-color: #2a2a2a !important;
  color: #fff !important;
}
.comms-editor-grid .editor-toolbar i.separator {
  border-left: 1px solid #2a2a2a;
  border-right: 1px solid #2a2a2a;
}
.comms-editor-grid .CodeMirror,
.comms-editor-grid .editor-preview-side {
  background: #0f0f0f;
  color: #eee;
  border: 1px solid #2a2a2a;
  border-top: 0;
  border-radius: 0 0 5px 5px;
}
.comms-editor-grid .editor-preview-side {
  border-left: 1px solid #2a2a2a;
  border-radius: 0 0 5px 0;
  padding: 0.7rem 0.9rem;
}
.comms-editor-grid .editor-preview-side h1,
.comms-editor-grid .editor-preview-side h2,
.comms-editor-grid .editor-preview-side h3,
.comms-editor-grid .editor-preview-side p,
.comms-editor-grid .editor-preview-side li {
  color: #eee;
}
.comms-editor-grid .editor-preview-side a { color: #00b4ec; }
.comms-editor-grid .editor-preview-side code,
.comms-editor-grid .editor-preview-side pre {
  background: #161616;
  color: #d3ecff;
  border: 1px solid #2a2a2a;
}
.comms-editor-grid .CodeMirror-cursor { border-left-color: #00b4ec; }
.comms-editor-grid .CodeMirror-selected { background: #1d3a5e !important; }
.comms-editor-grid .editor-statusbar { display: none; }
.comms-editor-grid .editor-toolbar.fullscreen,
.comms-editor-grid .CodeMirror-fullscreen,
.comms-editor-grid .editor-preview-side.editor-preview-active-side {
  background: #0f0f0f;
  z-index: 1000;
}

/* ============== Campaigns wizard (CR-10g2.1) ============== */

.comms-wizard-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.5rem;
  padding: 0.75rem;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
}
.comms-wizard-step {
  flex: 1 1 0;
  text-align: center;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.78rem;
  color: #777;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  cursor: default;
  user-select: none;
  white-space: nowrap;
}
.comms-wizard-step.is-completed {
  color: #cfe9d4;
  background: #16261a;
  border-color: #2c5236;
  cursor: pointer;
}
.comms-wizard-step.is-current {
  color: #fff;
  background: #00b4ec;
  border-color: #00b4ec;
  font-weight: 600;
}

.comms-wizard-body {
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 1.25rem;
}

.comms-radio {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  column-gap: 0.65rem;
  align-items: start;
  padding: 0.5rem 0;
  cursor: pointer;
}
.comms-radio input[type="radio"] { margin-top: 4px; }
.comms-radio-label {
  grid-column: 2;
  display: block;
  font-weight: 600;
  color: #eee;
}
.comms-radio-help {
  grid-column: 2;
  display: block;
  font-size: 0.82rem;
  color: #999;
  margin-top: 0.15rem;
}

.comms-audience-info {
  margin-top: 0.75rem;
  padding: 0.75rem 0;
}
.comms-audience-stat {
  font-weight: 600;
  margin: 0 0 0.25rem 0;
}
.comms-warning-banner {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: #2b1f0c;
  color: #ffd388;
  border: 1px solid #5a4117;
  border-radius: 6px;
  font-size: 0.88rem;
}

.comms-source-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.comms-source-tab {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  color: #ccc;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
}
.comms-source-tab.is-active {
  background: #00b4ec;
  color: #fff;
  border-color: #00b4ec;
}

.comms-source-pane {
  display: grid;
  gap: 0.5rem;
}
.comms-template-card {
  padding: 0.75rem 1rem;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  cursor: pointer;
}
.comms-template-card:hover { border-color: #00b4ec; }
.comms-template-card.is-selected {
  background: #0f2a3a;
  border-color: #00b4ec;
}

.comms-preview-box {
  background: #fff;
  color: #111;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 1rem;
  min-height: 6rem;
}
.comms-preview-box .muted { color: #777; }
.comms-preview-subject { color: #111; padding-bottom: 0.5rem; }
.comms-preview-html { line-height: 1.5; }

.comms-review-summary {
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}
.comms-review-summary dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1rem;
  margin: 0;
}
.comms-review-summary dt { color: #999; font-weight: 600; }
.comms-review-summary dd { color: #eee; margin: 0; }

/* Status badges for campaigns */
.badge-status-draft     { background: #2a2a2a; color: #ccc; }
.badge-status-scheduled { background: #1d3a5e; color: #aad8ff; }
.badge-status-sending   { background: #5e4a1d; color: #ffd388; }
.badge-status-sent      { background: #16261a; color: #aaf0bd; }
.badge-status-failed    { background: #3a1d1d; color: #ffaaaa; }
.badge-status-canceled  { background: #2a2a2a; color: #888; }

/* CR-10g2.1 addendum: empty-state + delete affordances */
.comms-empty-state {
  text-align: center;
  padding: 2rem 1rem;
  background: #1a1a1a;
  border: 1px dashed #333;
  border-radius: 8px;
  color: #ccc;
}
.comms-empty-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #eee;
  margin: 0 0 0.5rem 0;
}
.comms-empty-help {
  font-size: 0.9rem;
  color: #999;
  max-width: 480px;
  margin: 0.4rem auto;
  line-height: 1.5;
}
.comms-empty-actions {
  margin-top: 1.25rem;
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.btn-link {
  background: transparent;
  color: #00b4ec;
  border: none;
  padding: 0.5rem 1rem;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}
.btn-link:hover { text-decoration: underline; }
.btn-link-danger { color: #ff6b6b; }
.btn-link-danger:hover { color: #ff8a8a; text-decoration: underline; }
td.row-actions { text-align: right; white-space: nowrap; }

/* CR-10g2.1 patch v2: EasyMDE fullscreen overlay + paragraph spacing */

/* Hide admin chrome whenever EasyMDE OR CodeMirror enters any
   fullscreen-style mode (side-by-side activates only CodeMirror's
   class, single-fullscreen activates both). :has() supported in
   all evergreen browsers (Safari 15.4+, Chrome 105+, Firefox 121+). */
body:has(.EasyMDEContainer.fullscreen),
body:has(.CodeMirror-fullscreen) {
  overflow: hidden;
}
body:has(.EasyMDEContainer.fullscreen) .comms-action-bar,
body:has(.EasyMDEContainer.fullscreen) .comms-wizard-progress,
body:has(.EasyMDEContainer.fullscreen) .admin-topbar,
body:has(.EasyMDEContainer.fullscreen) .admin-sidebar,
body:has(.EasyMDEContainer.fullscreen) .comms-detail-header,
body:has(.EasyMDEContainer.fullscreen) .comms-breadcrumb,
body:has(.CodeMirror-fullscreen) .comms-action-bar,
body:has(.CodeMirror-fullscreen) .comms-wizard-progress,
body:has(.CodeMirror-fullscreen) .admin-topbar,
body:has(.CodeMirror-fullscreen) .admin-sidebar,
body:has(.CodeMirror-fullscreen) .comms-detail-header,
body:has(.CodeMirror-fullscreen) .comms-breadcrumb {
  display: none !important;
}

/* Force EasyMDE fullscreen above any remaining sticky/fixed content. */
.EasyMDEContainer.fullscreen,
.CodeMirror-fullscreen {
  z-index: 9999 !important;
  background: #1e1e1e !important;
}

/* Fix the greyed-out / overlay appearance of editor text in
   fullscreen — CodeMirror defaults don't inherit our admin theme. */
.CodeMirror-fullscreen,
.CodeMirror-fullscreen .CodeMirror-scroll,
.EasyMDEContainer.fullscreen .CodeMirror,
.EasyMDEContainer.fullscreen .CodeMirror-scroll {
  background: #1e1e1e !important;
  color: #f0f0f0 !important;
}
.CodeMirror-fullscreen .CodeMirror-line,
.EasyMDEContainer.fullscreen .CodeMirror-line {
  color: #f0f0f0 !important;
}
.CodeMirror-fullscreen .CodeMirror-cursor,
.EasyMDEContainer.fullscreen .CodeMirror-cursor {
  border-left-color: #f0f0f0 !important;
}

/* Side-by-side fullscreen preview pane: solid white, dark text. */
.EasyMDEContainer .editor-preview,
.EasyMDEContainer .editor-preview-side,
.EasyMDEContainer .editor-preview-active,
.EasyMDEContainer .editor-preview-active-side {
  background: #fff !important;
  color: #111 !important;
  opacity: 1 !important;
}
.EasyMDEContainer .editor-preview p,
.EasyMDEContainer .editor-preview-side p,
.EasyMDEContainer .editor-preview li,
.EasyMDEContainer .editor-preview-side li {
  color: #111;
}
.EasyMDEContainer .editor-preview a,
.EasyMDEContainer .editor-preview-side a {
  color: #006fb0;
}

/* Paragraph spacing inside preview surfaces (admin shell strips
   default <p> margins, so restore them for rendered email content). */
.comms-preview-box p,
.comms-preview-html p,
.EasyMDEContainer .editor-preview p,
.EasyMDEContainer .editor-preview-side p {
  margin: 0 0 1em 0;
  line-height: 1.5;
}
.comms-preview-box p:last-child,
.comms-preview-html p:last-child,
.EasyMDEContainer .editor-preview p:last-child,
.EasyMDEContainer .editor-preview-side p:last-child {
  margin-bottom: 0;
}
.comms-preview-box ul,
.comms-preview-box ol,
.comms-preview-html ul,
.comms-preview-html ol {
  margin: 0 0 1em 1.25em;
  padding-left: 1em;
}
.comms-preview-box li,
.comms-preview-html li {
  margin-bottom: 0.25em;
}
.comms-preview-box h1,
.comms-preview-box h2,
.comms-preview-box h3,
.comms-preview-html h1,
.comms-preview-html h2,
.comms-preview-html h3 {
  margin: 1em 0 0.5em 0;
  line-height: 1.3;
}
.comms-preview-box h1:first-child,
.comms-preview-box h2:first-child,
.comms-preview-box h3:first-child,
.comms-preview-html h1:first-child,
.comms-preview-html h2:first-child,
.comms-preview-html h3:first-child {
  margin-top: 0;
}
.comms-preview-box blockquote,
.comms-preview-html blockquote {
  border-left: 3px solid #ccc;
  margin: 0 0 1em 0;
  padding: 0.25em 0 0.25em 1em;
  color: #555;
}
.comms-preview-box hr,
.comms-preview-html hr {
  border: none;
  border-top: 1px solid #ccc;
  margin: 1.5em 0;
}