/* =========================================================
   خانه زیارت — سیستم مدیریت کمپین پیامکی
   Design System
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap');
@import url('/fonts/ravi/ravi.css');

:root {
  /* پالت سازمانی + Soft UI (الهام از ادمین مدرن) */
  --primary: #264A34;
  --primary-hover: #1E3A29;
  --primary-light: #EAF5EE;
  --primary-mid: #3D6B4F;
  --accent: #F8D038;
  --accent-soft: #FFF6CC;
  --accent-cta: #E8A317;
  --success: #2EAD72;
  --success-light: #E8F8F0;
  --warning: #D99A2B;
  --warning-light: #FFF6E5;
  --error: #D9534F;
  --error-light: #FDECEC;
  --bg: #F3F6F4;
  --card: #FFFFFF;
  --text: #1C2434;
  --text-secondary: #7A8499;
  --border: #E6EBE8;
  --border-light: #EEF2F0;
  --sidebar-w: 260px;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --shadow: 0 8px 30px rgba(28, 36, 52, 0.045);
  --shadow-sm: 0 2px 10px rgba(28, 36, 52, 0.04);
  --shadow-md: 0 14px 40px rgba(28, 36, 52, 0.08);
  --shadow-hover: 0 12px 36px rgba(38, 74, 52, 0.12);
  --ring: 0 0 0 3px rgba(38, 74, 52, 0.14);
  --content-max: 1360px;
  --font: 'Ravi', 'Vazirmatn', Tahoma, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  direction: rtl;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 0.95rem; }
img { max-width: 100%; display: block; }
img[hidden] { display: none !important; }
ul, ol { list-style: none; }

/* ---------- App Shell ---------- */
.app {
  display: flex;
  min-height: 100vh;
  background: var(--bg);
}

.sidebar {
  width: var(--sidebar-w);
  background: transparent;
  border-left: none;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  padding: 1rem 0.85rem 1rem 0.35rem;
  transition: transform 0.25s ease;
}

.sidebar-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow: hidden;
  min-height: 0;
}

.sidebar-brand {
  padding: 1.35rem 1.2rem 1.1rem;
  border-bottom: none;
}

.sidebar-brand .logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sidebar-brand .logo-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--accent), #E0A820);
  display: grid;
  place-items: center;
  color: #1C2434;
  font-weight: 800;
  font-size: 0.82rem;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(232, 163, 23, 0.28);
}

.sidebar-brand h1 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.sidebar-brand p {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

.sidebar-nav {
  flex: 1;
  padding: 0.35rem 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  overflow-y: auto;
}

.nav-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #A0AAB8;
  padding: 0.85rem 0.9rem 0.45rem;
}

.nav-group {
  display: flex;
  flex-direction: column;
}

.nav-group + .nav-group {
  margin-top: 0.15rem;
}

.nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.62rem 0.85rem;
  border-radius: 12px;
  cursor: pointer;
  text-align: right;
}

.nav-group-toggle:hover {
  color: var(--primary);
  background: rgba(38, 74, 52, 0.05);
}

.nav-group.has-active > .nav-group-toggle {
  color: var(--primary);
}

.nav-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.75;
  transition: transform 0.18s ease;
}

.nav-group.open > .nav-group-toggle .nav-chevron {
  transform: rotate(180deg);
}

.nav-group-items {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
}

.nav-group.open > .nav-group-items {
  grid-template-rows: 1fr;
}

.nav-group-body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-height: 0;
  margin-inline-start: 0.45rem;
  padding-inline-start: 0.35rem;
  border-inline-start: 2px solid var(--border-light);
}

.nav-group:not(.open) .nav-group-body {
  visibility: hidden;
}

.nav-group .nav-item {
  padding: 0.62rem 0.75rem;
  font-size: 0.88rem;
  border-radius: 12px;
}

.nav-step {
  font-size: 0.68rem;
  font-weight: 800;
  color: #8b95a3;
  padding: 0.7rem 0.75rem 0.1rem;
}

.nav-step:first-child {
  padding-top: 0.2rem;
}

@media (prefers-reduced-motion: reduce) {
  .nav-group-items,
  .nav-chevron {
    transition: none;
  }
}

.nav-item[hidden] { display: none !important; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.78rem 0.95rem;
  border-radius: 14px;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.92rem;
  transition: all 0.18s ease;
}

.nav-item:hover {
  background: rgba(38, 74, 52, 0.06);
  color: var(--primary);
}

.nav-item.active {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(38, 74, 52, 0.22);
}

.nav-item.active:hover {
  background: var(--primary-hover);
  color: #fff;
}

.nav-item.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.nav-item.is-disabled:hover {
  background: transparent;
  color: var(--text-secondary);
}

.nav-item .nav-label { flex: 1; }

.nav-item .nav-soon,
.soon-badge.nav-soon {
  background: var(--warning-light);
  color: #9a6b14;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  margin-right: auto;
}

.nav-item.active .nav-soon {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.bottom-nav .bnav.is-disabled {
  opacity: 0.45;
  pointer-events: none;
  position: relative;
}

.bottom-nav .bnav-soon {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.55rem;
  font-weight: 700;
  color: #9a6b14;
  background: var(--warning-light);
  padding: 0 0.3rem;
  border-radius: 999px;
  white-space: nowrap;
}

.nav-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.9;
}

.nav-item.active svg { opacity: 1; }

.sidebar-footer {
  padding: 1rem 1.1rem 1.2rem;
  border-top: 1px solid var(--border-light);
  margin-top: auto;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding: 0.55rem;
  border-radius: 14px;
  background: var(--bg);
}

.user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.user-info .name { font-weight: 600; font-size: 0.88rem; }
.user-info .role { font-size: 0.75rem; color: var(--text-secondary); }

.btn-logout {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: #fff;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: all 0.15s;
  cursor: pointer;
}
.btn-logout svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.btn-logout:hover { background: var(--error-light); color: var(--error); border-color: transparent; }

.mobile-header-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.btn-logout-mobile {
  display: none;
  border: 1px solid var(--border-light);
  background: #fff;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-logout-mobile:hover {
  background: var(--error-light);
  color: var(--error);
}

.main {
  flex: 1;
  margin-right: var(--sidebar-w);
  min-width: 0;
}

.page {
  display: none;
  padding: 1.85rem 2.1rem 3.25rem;
  max-width: var(--content-max);
  margin: 0 auto;
  animation: fadeIn 0.25s ease;
}

.page.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Typography ---------- */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.page-header h2 {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--primary);
}

.page-header .subtitle {
  color: var(--text-secondary);
  margin-top: 0.35rem;
  font-size: 0.95rem;
}

.section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 500;
  margin-bottom: 0.85rem;
  transition: color 0.15s;
}

.back-link:hover { color: var(--primary); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 8px 18px rgba(38, 74, 52, 0.22);
}

.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(38, 74, 52, 0.28);
}

.btn-secondary {
  background: var(--primary-light);
  color: var(--primary);
  border: none;
  box-shadow: none;
}

.btn-secondary:hover { background: #DCEFE3; }

.btn-ghost {
  color: var(--text-secondary);
  padding: 0.55rem 0.9rem;
}

.btn-ghost:hover { background: rgba(28, 36, 52, 0.05); color: var(--text); }

.btn-success { background: var(--success); color: #fff; box-shadow: 0 6px 16px rgba(46, 173, 114, 0.25); }
.btn-success:hover { background: #269963; }

.btn-danger { background: var(--error); color: #fff; }

.btn-lg { padding: 0.85rem 1.6rem; font-size: 0.98rem; }

.btn-sm { padding: 0.4rem 0.75rem; font-size: 0.82rem; }

.btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.1);
  pointer-events: auto;
}

.btn.is-disabled:hover {
  transform: none;
  box-shadow: none;
}

.btn .soon-badge.btn-soon {
  background: var(--warning-light);
  color: #9a6b14;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
}

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

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.45rem;
}

.card-flush { padding: 0; overflow: hidden; }

/* ---------- Badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}

.badge-success { background: var(--success-light); color: #1a7a4c; }
.badge-warning { background: var(--warning-light); color: #9a6b14; }
.badge-error { background: var(--error-light); color: #b33a36; }
.badge-info { background: var(--primary-light); color: var(--primary); }
.badge-neutral { background: #F0F2F5; color: var(--text-secondary); }
.badge-sending { background: var(--primary-light); color: var(--primary); }
.badge-recurring { background: var(--accent-soft); color: #9A6B14; }

.schedule-tag {
  font-size: 0.75rem;
  color: var(--primary-mid);
  font-weight: 500;
  margin-top: 0.2rem;
}

/* ---------- Schedule type cards ---------- */
.schedule-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.schedule-type-card {
  display: block;
  padding: 1rem 1.1rem;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px rgba(28, 36, 52, 0.04);
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  position: relative;
}

.schedule-type-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.schedule-type-card:hover {
  border-color: transparent;
  background: #EAF3ED;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.schedule-type-card.selected {
  border-color: transparent;
  background: var(--primary-light);
  box-shadow: 0 8px 22px rgba(38, 74, 52, 0.10), inset 0 0 0 1.5px rgba(38, 74, 52, 0.18);
}

.schedule-type-card .st-icon {
  font-size: 1.25rem;
  margin-bottom: 0.35rem;
  color: var(--primary);
  font-weight: 700;
}

.schedule-type-card .st-title { font-weight: 700; font-size: 0.95rem; }
.schedule-type-card .st-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 0.2rem;
  line-height: 1.45;
}

.schedule-type-card.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: #F3F5F8;
  border-color: var(--border);
  pointer-events: none;
}

.schedule-type-card.is-disabled:hover {
  border-color: var(--border);
  background: #F3F5F8;
  box-shadow: none;
}

.schedule-type-card .soon-badge {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  background: var(--warning-light);
  color: #9a6b14;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

.recurrence-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.recurrence-chip {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--card);
  transition: all 0.15s;
}

.recurrence-chip:hover { border-color: var(--primary); color: var(--primary); }

.recurrence-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.schedule-preview-card {
  background: var(--primary-light);
  border: 1px solid #C5DDB8;
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
}

.schedule-preview-card .sp-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
}

.schedule-preview-card .sp-text {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--primary);
}

.schedule-preview-card .sp-next {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 0.4rem;
}

.attribution-options {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.attribution-option {
  display: block;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--card);
  transition: all 0.15s;
  position: relative;
}

.attribution-option > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.attribution-option:hover {
  border-color: #B8D4F0;
  background: #FAFCFF;
}

.attribution-option.selected {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(38, 74, 52, 0.10);
}

.attribution-option .ao-title {
  font-weight: 700;
  font-size: 0.9rem;
}

.attribution-option .ao-days-input {
  display: inline-block;
  width: 3.2rem;
  margin: 0 0.25rem;
  padding: 0.15rem 0.35rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-weight: 700;
  text-align: center;
  vertical-align: baseline;
  direction: ltr;
}

.attribution-option.selected .ao-days-input {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(38, 74, 52, 0.08);
}

.attribution-option .ao-desc {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.save-segment-box {
  margin-top: 1.15rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border-light);
}

.save-segment-check {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}

.save-segment-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

/* ---------- Channels ---------- */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
}

.channel-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.95rem 1rem;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px rgba(28, 36, 52, 0.04);
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  position: relative;
}

.channel-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.channel-card:hover {
  background: #EAF3ED;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.channel-card.selected {
  border: none;
  background: var(--primary-light);
  box-shadow: 0 8px 22px rgba(38, 74, 52, 0.10), inset 0 0 0 1.5px rgba(38, 74, 52, 0.18);
}

.channel-card .ch-check {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: none;
  margin-bottom: 0.4rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1.5px rgba(28, 36, 52, 0.12);
  position: relative;
}

.channel-card.selected .ch-check {
  background: var(--primary);
  border-color: transparent;
  box-shadow: none;
}

.channel-card.selected .ch-check::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.channel-card .ch-name { font-weight: 700; font-size: 0.88rem; }
.channel-card .ch-meta { font-size: 0.72rem; color: var(--text-secondary); }

.channel-card.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.12);
  pointer-events: auto;
}

.channel-card.is-disabled:hover {
  background: var(--bg);
  box-shadow: inset 0 0 0 1px rgba(28, 36, 52, 0.04);
  transform: none;
}

.channel-card .soon-badge.ch-soon {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  background: var(--warning-light);
  color: #9a6b14;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
}

.channel-progress-list {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.channel-progress-item {
  padding: 1rem 1.1rem;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: none;
  box-shadow: none;
}

.channel-progress-item.done {
  background: var(--success-light);
  border-color: transparent;
}

.cp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.55rem;
}

.cp-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.92rem;
}

.cp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cp-pct {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.channel-progress-item.done .cp-pct { color: var(--success); }

.cp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.15rem;
  margin-top: 0.65rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.cp-stats .ok { color: #1a7a4c; }
.cp-stats .fail { color: #b33a36; }

@media (max-width: 992px) {
  .channel-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .schedule-type-grid { grid-template-columns: 1fr; }
  .channel-grid { grid-template-columns: 1fr 1fr; }
}

.badge-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Filters ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.35rem;
  align-items: center;
  padding: 0.85rem 1rem;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.search-field {
  position: relative;
  flex: 1 1 280px;
  min-width: 220px;
  max-width: 420px;
}

.search-field .search-icon {
  position: absolute;
  right: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding-right: 2.5rem !important;
  min-width: 0;
}

.search-result-meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: -0.5rem 0 1rem;
}

mark.search-hit {
  background: #FFF3C4;
  color: inherit;
  padding: 0 0.1rem;
  border-radius: 3px;
}

.filter-select, .form-input, .form-select, .form-textarea {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.95rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  min-width: 140px;
  font-family: inherit;
}

.filter-select, .form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%237A8499' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.85rem center;
  padding-left: 2.2rem;
  cursor: pointer;
}

.filter-select:focus, .form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--primary-mid);
  background: #fff;
  box-shadow: var(--ring);
}

.filter-select:hover, .form-select:hover {
  border-color: #C9D8CE;
  background: #FAFCFA;
}

/* Themed custom dropdown (campaigns filters) */
.theme-select {
  position: relative;
  min-width: 160px;
}

.theme-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.9rem;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  box-shadow: var(--shadow-sm);
}

.theme-select-trigger:hover {
  border-color: #C9D8CE;
  background: #FAFCFA;
}

.theme-select.is-open .theme-select-trigger {
  border-color: var(--primary-mid);
  box-shadow: var(--ring);
  background: #fff;
}

.theme-select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-select-caret {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.theme-select.is-open .theme-select-caret {
  transform: rotate(180deg);
  color: var(--primary);
}

.theme-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  min-width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 0.4rem;
  z-index: 40;
  max-height: 280px;
  overflow-y: auto;
}

.theme-select-option {
  width: 100%;
  text-align: right;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.theme-select-option:hover {
  background: var(--primary-light);
  color: var(--primary);
}

.theme-select-option.is-selected {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 700;
}

.theme-select-option.is-selected::after {
  content: '✓';
  float: left;
  color: var(--primary-mid);
  font-weight: 700;
}

.form-textarea { min-height: 110px; resize: vertical; width: 100%; }

.form-group { margin-bottom: 1.25rem; }

.form-label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 0.45rem;
}

.form-hint {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.35rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; }

table.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
}

table.data-table th {
  text-align: right;
  padding: 0.95rem 1.15rem;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--text-secondary);
  background: transparent;
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}

table.data-table td {
  padding: 1.05rem 1.15rem;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

table.data-table tbody tr {
  transition: background 0.15s, box-shadow 0.15s;
  cursor: pointer;
}

table.data-table tbody tr:hover {
  background: #FBFDFA;
  box-shadow: inset 0 0 0 1.5px dashed rgba(38, 74, 52, 0.28);
}

table.data-table tbody tr.is-opening {
  background: var(--primary-light);
  box-shadow: inset 0 0 0 2px var(--primary-mid);
  cursor: progress;
  pointer-events: none;
  opacity: 0.85;
}

.page.is-opening-draft {
  position: relative;
  pointer-events: none;
}
.page.is-opening-draft::after {
  content: 'در حال بارگذاری پیش‌نویس…';
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4rem;
  background: rgba(243, 246, 244, 0.72);
  color: var(--primary);
  font-weight: 600;
  font-size: 0.95rem;
  backdrop-filter: blur(1px);
}

table.data-table tbody tr:last-child td { border-bottom: none; }

table.data-table .num { font-variant-numeric: tabular-nums; font-weight: 600; }
table.data-table .campaign-name { font-weight: 600; color: var(--text); }
table.data-table .campaign-name:hover { color: var(--primary); }

.col-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  margin-inline-start: 0.3rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.55;
  cursor: help;
  vertical-align: middle;
  user-select: none;
}
.col-info:hover,
.col-info:focus,
.col-info.is-open {
  opacity: 1;
  outline: none;
  color: var(--primary);
  border-color: var(--primary);
}

.col-info-bubble {
  position: fixed;
  z-index: 10050;
  max-width: min(18rem, calc(100vw - 1.5rem));
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: #1C2434;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.55;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  direction: rtl;
  text-align: right;
}
.col-info-bubble[hidden] {
  display: none !important;
}

/* ---------- KPI Cards ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.kpi-card {
  background: var(--card);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.2rem 1.25rem;
  transition: box-shadow 0.18s, transform 0.18s;
}

.kpi-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.kpi-card .kpi-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 0.45rem;
}

.kpi-card .kpi-value {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.kpi-card .kpi-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.4rem;
}

.kpi-card .kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 0.4rem;
}

.kpi-delta.up { color: var(--success); }
.kpi-delta.down { color: var(--error); }

.kpi-card.is-end-warn {
  background: #fff8e6;
  box-shadow: inset 0 0 0 1px rgba(138, 90, 16, 0.22);
}
.kpi-card.is-end-warn .kpi-value {
  color: #8a5a10;
}
.kpi-card.is-end-danger {
  background: #fdecea;
  box-shadow: inset 0 0 0 1px rgba(198, 40, 40, 0.22);
}
.kpi-card.is-end-danger .kpi-value {
  color: #c62828;
}
.end-state-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  background: #f3f4f6;
  color: var(--text-secondary);
}
.end-state-badge.is-warn {
  background: #fff6e8;
  color: #8a5a10;
}
.end-state-badge.is-danger {
  background: #fdecea;
  color: #c62828;
}

.dossier-profile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.dossier-profile-item {
  background: var(--bg);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
}

.dossier-profile-item .dpi-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.dossier-profile-item .dpi-value {
  font-weight: 700;
  font-size: 0.95rem;
  word-break: break-word;
}

.dossier-description {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.dossier-description .dpi-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 0.45rem;
}
.dossier-description-body {
  white-space: pre-wrap;
  line-height: 1.85;
  font-size: 0.92rem;
  color: var(--text);
  word-break: break-word;
}

@media (max-width: 900px) {
  .dossier-profile-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.kpi-grid-5 { grid-template-columns: repeat(5, 1fr); }
.kpi-grid-4 { grid-template-columns: repeat(4, 1fr); }
.kpi-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  gap: 0.35rem;
  border-bottom: none;
  margin-bottom: 1.35rem;
  overflow-x: auto;
  background: var(--card);
  padding: 0.4rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.tab {
  padding: 0.65rem 1.1rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--text-secondary);
  border-bottom: none;
  margin-bottom: 0;
  white-space: nowrap;
  transition: all 0.15s;
  border-radius: 10px;
}

.tab:hover { color: var(--text); background: var(--bg); }
.tab.active {
  color: #fff;
  background: var(--primary);
  border-bottom-color: transparent;
  font-weight: 600;
  box-shadow: 0 6px 14px rgba(38, 74, 52, 0.18);
}

.tab.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.1);
}

.detail-ab-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.detail-ab-summary-chip {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  min-width: 5.5rem;
  text-align: center;
}

.detail-ab-summary-chip strong {
  display: block;
  font-size: 1.05rem;
  margin-top: 0.15rem;
}

.detail-ab-summary-chip span {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.tab.is-disabled:hover {
  color: var(--text-secondary);
  background: transparent;
}

.tab .soon-badge.tab-soon {
  background: var(--warning-light);
  color: #9a6b14;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  margin-right: 0.35rem;
  vertical-align: middle;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.2s ease; }

/* ---------- Stepper ---------- */
.stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  padding: 1.25rem;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow);
  flex-wrap: wrap;
}

.step {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 500;
}

.step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #EEF0F4;
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.step.active { color: var(--primary); font-weight: 600; }
.step.active .step-num { background: var(--primary); color: #fff; }
.step.done { color: var(--success); }
.step.done .step-num { background: var(--success); color: #fff; }

.step-arrow {
  color: var(--border);
  margin: 0 0.35rem;
  font-size: 1.1rem;
}

.wizard-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-light);
}

.wizard-body { max-width: 820px; margin: 0 auto; }
.wizard-body.wide { max-width: 1100px; }

/* ---------- Segment Cards ---------- */
.segment-list { display: flex; flex-direction: column; gap: 0.65rem; }

.segment-list-heading {
  margin: 0.35rem 0 0.15rem;
  padding: 0.15rem 0.1rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.segment-list-heading:first-child {
  margin-top: 0;
}

.box-segment-search-wrap {
  margin-bottom: 0.55rem;
}

.box-segment-search-wrap .search-input {
  width: 100%;
}

.campaign-box .segment-list {
  max-height: 200px;
  overflow-y: auto;
  gap: 0.35rem;
  padding-inline-end: 0.15rem;
}

.campaign-box .segment-list-heading {
  margin: 0 0 0.2rem;
  font-size: 0.74rem;
}

.campaign-box .segment-row {
  padding: 0.42rem 0.65rem;
  border-radius: var(--radius-sm);
  gap: 0.4rem;
}

.campaign-box .segment-row-main {
  gap: 0.65rem;
  flex: 1 1 auto;
}

.campaign-box .segment-row .seg-name {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.campaign-box .segment-row .seg-desc {
  display: none;
}

.campaign-box .segment-row .seg-count {
  font-size: 0.84rem;
  font-weight: 700;
}

.campaign-box .segment-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.segment-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.15s;
  flex-wrap: wrap;
}

.segment-row-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1 1 14rem;
  min-width: 0;
  cursor: pointer;
}

.segment-row:hover { border-color: #B8D4F0; background: #FAFCFF; }

.segment-row.selected {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(38, 74, 52, 0.12);
}

.segment-row.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.segment-row.is-disabled .segment-row-main {
  cursor: not-allowed;
}

.segment-row.is-disabled:hover {
  border-color: var(--border);
  background: var(--card);
}

.segment-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.segment-row .seg-info { flex: 1; min-width: 0; }
.segment-row .seg-name { font-weight: 700; font-size: 0.98rem; }
.segment-row .seg-desc { font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.15rem; }
.segment-row .seg-count {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.seg-ai-prompt-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  margin-inline-start: auto;
}

.seg-ai-prompt-body {
  min-height: 0;
}

.seg-ai-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1.25rem 1rem;
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.seg-ai-loading[hidden] {
  display: none !important;
}

.seg-ai-prior {
  margin-bottom: 0.75rem;
  padding: 0.65rem 0.8rem;
  background: var(--bg-soft, #f6f7f5);
  border: 1px solid var(--border, #e4e6e2);
  border-radius: var(--radius);
  flex: 0 0 auto;
}
.seg-ai-prior[hidden] {
  display: none !important;
}
.seg-ai-prior-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.45rem;
}
.seg-ai-prior-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 5.5rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.seg-ai-prior-list li {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-secondary);
  padding: 0.35rem 0.5rem;
  background: #fff;
  border-radius: calc(var(--radius) - 2px);
}
.seg-ai-prior-list li strong {
  color: var(--text);
  font-weight: 650;
}
.seg-ai-prior-count {
  float: left;
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--primary);
  margin-inline-end: 0.35rem;
}

.seg-ai-prompt-text {
  width: 100%;
  min-height: 7rem;
  max-height: none;
  font-size: 0.9rem;
  line-height: 1.7;
  direction: rtl;
  box-sizing: border-box;
  resize: vertical;
}

.seg-ai-prompt-text[hidden] {
  display: none !important;
}

#segAiPromptResult[hidden] {
  display: none !important;
}

.seg-ai-feedbacks {
  margin-top: 0.75rem;
  padding: 0.65rem 0.8rem;
  background: var(--bg-soft, #f6f7f5);
  border: 1px solid var(--border, #e4e6e2);
  border-radius: var(--radius);
}
.seg-ai-feedbacks[hidden] {
  display: none !important;
}
.seg-ai-feedback-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 4.5rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.seg-ai-feedback-list li {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-secondary);
  padding: 0.4rem 0.55rem;
  background: #fff;
  border-radius: calc(var(--radius) - 2px);
}
.seg-ai-feedback-list li strong {
  color: var(--text);
  font-weight: 650;
}

.modal.modal-ai {
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 720px);
  max-width: min(640px, 100%);
  padding: 1.15rem 1.25rem 1rem;
  overflow: hidden;
}

.modal.modal-ai .modal-header-row {
  flex: 0 0 auto;
  margin-bottom: 0.35rem;
}

.modal.modal-ai .modal-ai-meta,
.modal.modal-ai .form-hint.modal-ai-meta {
  flex: 0 0 auto;
  margin: 0 0 0.65rem;
  line-height: 1.45;
}

.modal.modal-ai .modal-ai-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-inline-end: 0.15rem;
}

.modal.modal-ai .modal-ai-actions {
  flex: 0 0 auto;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border, #e4e6e2);
  flex-wrap: wrap;
}

.form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
}
.form-label-row .form-label {
  margin-bottom: 0;
}

.ctx-ai-q {
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.75rem;
  background: var(--bg-soft, #f6f7f5);
  border: 1px solid var(--border, #e4e6e2);
  border-radius: var(--radius);
}
.ctx-ai-q-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.55rem;
  line-height: 1.55;
}
.ctx-ai-q-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ctx-ai-option {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  background: #fff;
  border: 1px solid var(--border, #e4e6e2);
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
}
.ctx-ai-option:has(input:checked) {
  border-color: var(--primary, #264A34);
  background: var(--primary-light, #eef5ea);
}
.ctx-ai-option input {
  margin-top: 0.15rem;
  flex: 0 0 auto;
}
.ctx-ai-option span {
  flex: 1 1 auto;
}
.ctx-ai-other-input {
  margin-top: 0.45rem;
  width: 100%;
  box-sizing: border-box;
  min-height: 3.2rem;
  resize: vertical;
}
.ctx-ai-other-input[hidden] {
  display: none !important;
}
.ctx-ai-other-input:disabled {
  opacity: 0.55;
}

.segment-summary {
  margin-top: 1.5rem;
  padding: 1.25rem 1.4rem;
  background: var(--primary-light);
  border: 1px solid #C5DDB8;
  border-radius: var(--radius);
}

.segment-summary h4 {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.segment-summary .total {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary);
}

.summary-breakdown {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.summary-breakdown .row {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
}

.summary-breakdown .divider {
  border-top: 1px dashed #B8D4F0;
  margin: 0.5rem 0;
}

/* ---------- Segment Builder ---------- */
.builder-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 1.25rem;
}

.condition-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.condition-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

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

.logic-toggle {
  display: inline-flex;
  background: var(--bg);
  border-radius: 8px;
  padding: 3px;
  margin: 0.5rem 0;
}

.logic-toggle button {
  padding: 0.35rem 0.85rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.logic-toggle button.active {
  background: var(--card);
  color: var(--primary);
  box-shadow: var(--shadow);
}

.preview-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
  position: sticky;
  top: 1.5rem;
}

.preview-box .label { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.preview-box .count { font-size: 2rem; font-weight: 700; color: var(--primary); }

.preview-box .snapshot-badge {
  display: inline-flex;
  align-items: center;
  margin: 0.35rem auto 0.5rem;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
}

.preview-box.is-frozen {
  border-color: #C5DDB8;
  box-shadow: 0 0 0 1px rgba(38, 74, 52, 0.08);
}

.preview-box .snapshot-badge[hidden] {
  display: none;
}

/* ---------- Excel audience upload ---------- */
.excel-notice {
  background: var(--primary-light);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  margin-bottom: 1.15rem;
}

.excel-notice strong {
  display: block;
  color: var(--primary);
  margin-bottom: 0.35rem;
  font-size: 0.92rem;
}

.excel-notice p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.excel-upload {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 1.15rem;
  background: var(--bg);
}

.excel-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
}

.excel-file-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.excel-file-info {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.excel-file-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #E8F5E9;
  color: var(--primary);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.72rem;
  flex-shrink: 0;
}

.excel-file-name {
  font-weight: 700;
  font-size: 0.92rem;
  word-break: break-all;
}

.excel-file-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

.excel-file-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.excel-no-segment {
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--warning-light);
  color: #9a6b14;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.6;
}

.excel-builder .preview-box.is-loading .count {
  opacity: 0.4;
}

.excel-builder .preview-box.is-loading::after {
  content: 'در حال خواندن فایل…';
  display: block;
  margin-top: 0.85rem;
  font-size: 0.8rem;
  color: var(--primary);
  font-weight: 600;
}

.excel-builder .preview-box.is-frozen {
  border-color: #C5DDB8;
}

.insight-file-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1rem;
}

.insight-file-row {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.insight-file-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
  width: 100%;
}

.insight-file-row.is-running {
  border-color: #C5DDB8;
  background: var(--primary-light);
}

.insight-file-row.is-done {
  border-color: #C5DDB8;
}

.insight-file-row.is-error {
  border-color: #F0C4C2;
  background: var(--error-light);
}

.insight-file-status {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.insight-file-row.is-running .insight-file-status { color: var(--primary); }
.insight-file-row.is-done .insight-file-status { color: var(--success); }
.insight-file-row.is-error .insight-file-status { color: var(--error); }

.insight-file-progress {
  width: 100%;
}

.insight-file-progress .progress-bar {
  height: 8px;
  background: rgba(38, 74, 52, 0.12);
}

.insight-file-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.insight-analyze-progress {
  margin-top: 1rem;
  padding: 0.95rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.insight-analyze-progress .progress-bar {
  height: 10px;
  background: var(--bg);
}

.insight-query-dates {
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--primary-light);
  border: 1px solid #C5DDB8;
  border-radius: var(--radius-sm);
  direction: ltr;
  text-align: left;
}

.insight-query-dates-label {
  font-family: var(--font);
  direction: rtl;
  text-align: right;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.55rem;
}

.insight-query-dates-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88rem;
}

.insight-query-dates-k {
  color: var(--text-secondary);
  min-width: 9.5rem;
}

.insight-query-dates code {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.2rem 0.55rem;
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.insight-query-dates.is-invalid code {
  color: var(--error);
  border-color: #F0C4C2;
}

/* ---------- SQL Segment Builder ---------- */
.builder-mode-switch {
  display: inline-flex;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 1.15rem;
  gap: 2px;
}

.mode-btn {
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.15s;
}

.mode-btn:hover { color: var(--text); }

.mode-btn.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(38, 74, 52, 0.22);
}

.sql-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.sql-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.sql-editor-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #0F172A;
  overflow: hidden;
  margin-bottom: 0.85rem;
}

.sql-editor {
  width: 100%;
  min-height: 220px;
  padding: 1rem 1.1rem;
  background: transparent;
  border: none;
  outline: none;
  resize: vertical;
  color: #E2E8F0;
  font-family: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', Consolas, monospace;
  font-size: 0.88rem;
  line-height: 1.7;
  direction: ltr;
  text-align: left;
  tab-size: 2;
}

.sql-editor::placeholder { color: #64748B; }

.sql-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.sql-hint-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.sql-chip {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.72rem;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  direction: ltr;
}

.sql-result {
  margin-top: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}

.sql-result-ok {
  background: var(--success-light);
  border: 1px solid #A8E0C4;
  color: #1a7a4c;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.sql-result-err {
  background: var(--error-light);
  border: 1px solid #f5c6c4;
  color: #b33a36;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
}

.sql-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem 1.1rem;
  border-top: 1px solid var(--border);
}

.sql-pager-info {
  font-size: 0.88rem;
  color: var(--text-secondary);
  min-width: 8rem;
  text-align: center;
}

.sql-pager .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sql-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(38, 74, 52, 0.22);
  border-top-color: var(--primary);
  border-radius: 50%;
  display: inline-block;
  animation: sqlSpin 0.7s linear infinite;
  flex-shrink: 0;
}

.sql-result-ok .sql-spinner {
  border-color: rgba(46, 173, 114, 0.25);
  border-top-color: var(--success);
}

@keyframes sqlSpin {
  to { transform: rotate(360deg); }
}

.js-run-sql:disabled {
  opacity: 0.85;
  cursor: wait;
}

.sql-builder.is-loading .sql-editor-wrap {
  opacity: 0.7;
  pointer-events: none;
}

.preview-box.is-loading .count {
  opacity: 0.45;
}

.preview-box.is-loading::after {
  content: 'در حال محاسبه مخاطبان…';
  display: block;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

#builderSql code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.85em;
  background: var(--bg);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  direction: ltr;
  display: inline-block;
}

/* ---------- Message Composer ---------- */
.composer-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.5rem;
  align-items: start;
}

.templates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.template-chip {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--card);
  transition: all 0.15s;
}

.template-chip:hover:not(:disabled), .template-chip.active {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.template-chip:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.composer-assist {
  margin-bottom: 1.15rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.composer-assist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.composer-assist .soon-badge {
  background: var(--warning-light);
  color: #9a6b14;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.composer-assist.is-disabled {
  opacity: 0.72;
  pointer-events: none;
}

.composer-assist.is-disabled .templates {
  margin-bottom: 0;
}

.ai-assist-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

.ai-assist-row .btn:disabled,
.ai-assist-row .form-input:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.sms-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
}

.sms-meta-item {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  text-align: center;
}

.sms-meta-item .label { font-size: 0.72rem; color: var(--text-secondary); }
.sms-meta-item .value { font-weight: 700; font-size: 1.05rem; margin-top: 0.2rem; font-variant-numeric: tabular-nums; }

.sms-warning {
  margin-top: 0.85rem;
  padding: 0.75rem 1rem;
  background: var(--warning-light);
  border: 1px solid #F0D9A0;
  border-radius: var(--radius-sm);
  color: #8a6410;
  font-size: 0.85rem;
  font-weight: 500;
  display: none;
}

.sms-warning.show { display: flex; align-items: center; gap: 0.5rem; }

/* Phone Mockup */
.phone-mockup {
  width: 260px;
  margin: 0 auto;
  background: #1a1a1a;
  border-radius: 36px;
  padding: 12px;
  box-shadow: var(--shadow-md), inset 0 0 0 2px #333;
}

.phone-screen {
  background: #F2F2F7;
  border-radius: 26px;
  overflow: hidden;
  min-height: 420px;
}

.phone-status {
  background: #fff;
  padding: 0.5rem 1rem 0.35rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 600;
}

.phone-header {
  background: #fff;
  padding: 0.75rem 1rem 1rem;
  border-bottom: 1px solid #E5E5EA;
  text-align: center;
}

.phone-header .sender {
  font-weight: 700;
  font-size: 0.9rem;
}

.phone-header .sub { font-size: 0.7rem; color: #8E8E93; }

.phone-body { padding: 1rem 0.85rem; }

.sms-bubble {
  background: #fff;
  border-radius: 18px 18px 4px 18px;
  padding: 0.85rem 1rem;
  font-size: 0.82rem;
  line-height: 1.7;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 80px;
}

.sms-bubble #smsPreview {
  white-space: pre-wrap;
  word-break: break-word;
}

.sms-preview-img {
  display: block;
  width: 100%;
  border-radius: 12px;
  margin-bottom: 0.65rem;
  max-height: 140px;
  object-fit: cover;
}

.preview-channel-tabs {
  display: flex;
  gap: 0.35rem;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.pctab {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--card);
}

.pctab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.preview-img-note {
  font-size: 0.72rem;
  color: #8a6410;
  background: var(--warning-light);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  margin-top: 0.65rem;
  line-height: 1.5;
}

.media-notice {
  background: var(--warning-light);
  border: 1px solid #F0D9A0;
  color: #8a6410;
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.95rem;
  font-size: 0.85rem;
  line-height: 1.65;
  margin-bottom: 0.85rem;
}

.media-upload {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
  background: var(--bg);
  margin-bottom: 0.75rem;
}

.media-empty {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.media-preview img {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.media-preview-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.media-channels {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--success);
}

.channel-media-matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
}

.cmm-item {
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 0.5rem 0.55rem;
  text-align: center;
}

.cmm-item span {
  display: block;
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-bottom: 0.15rem;
}

.cmm-item strong { font-size: 0.78rem; }

.cmm-item.yes {
  background: var(--success-light);
  border-color: #A8E0C4;
}

.cmm-item.yes strong { color: #1a7a4c; }

.cmm-item.no strong { color: var(--text-secondary); font-weight: 500; }

.review-image-box img {
  width: 100%;
  max-width: 280px;
  border-radius: 10px;
  display: block;
  margin-bottom: 0.5rem;
  max-height: 160px;
  object-fit: cover;
}

@media (max-width: 600px) {
  .channel-media-matrix { grid-template-columns: repeat(2, 1fr); }
}

.sms-time {
  text-align: left;
  font-size: 0.68rem;
  color: #8E8E93;
  margin-top: 0.4rem;
  padding-left: 0.25rem;
}

.phone-label {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  font-weight: 500;
}

/* ---------- Campaign image / media ---------- */
.media-notice {
  background: var(--warning-light);
  border: 1px solid #F0D9A0;
  color: #8a6410;
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  line-height: 1.7;
  margin-bottom: 0.85rem;
}

.media-upload {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
  background: var(--bg);
}

.media-empty {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.media-preview img {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.media-preview-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.media-channels {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--success);
}

.channel-media-matrix {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.45rem;
  margin-top: 0.85rem;
}

.cmm-item {
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 0.5rem 0.45rem;
  text-align: center;
}

.cmm-item span {
  display: block;
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-bottom: 0.15rem;
}

.cmm-item strong { font-size: 0.78rem; }

.cmm-item.yes {
  background: var(--success-light);
  border-color: #A8E0C4;
}

.cmm-item.yes strong { color: #1a7a4c; }

.cmm-item.no strong { color: var(--text-secondary); font-weight: 500; }

.preview-channel-tabs {
  display: flex;
  gap: 0.35rem;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.pctab {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--card);
}

.pctab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.sms-preview-img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 0.65rem;
  display: block;
  max-height: 140px;
  object-fit: cover;
}

.preview-img-note {
  font-size: 0.72rem;
  color: #8a6410;
  background: var(--warning-light);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  margin-top: 0.65rem;
  line-height: 1.5;
}

.review-image-wrap {
  margin-top: 0.5rem;
}

.review-image-wrap img {
  max-width: 220px;
  max-height: 140px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--border);
}

@media (max-width: 600px) {
  .channel-media-matrix { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Review Summary ---------- */
.review-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.25rem;
}

.review-item {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border-light);
}

.review-item:last-child { border-bottom: none; }

.review-item .label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.review-item .value { font-weight: 600; font-size: 1rem; }

.cost-box {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
}

.cost-box .calc-line {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
  font-size: 0.95rem;
}

.cost-box .divider {
  border-top: 1px solid var(--border);
  margin: 0.75rem 0;
}

.cost-box .total-cost {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

.message-preview-box {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  font-size: 0.9rem;
  line-height: 1.75;
  white-space: pre-wrap;
}

/* ---------- Campaign boxes (segment + channels + messages) ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.priority-note {
  background: #F1F6FB;
  border: 1px solid #D5E3F0;
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.1rem;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 1.1rem;
}

.campaign-box-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.campaign-box-list.is-reordering .campaign-box:not(.is-dragging) {
  transition: transform 0.15s ease;
}

.box-list-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.campaign-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.campaign-box.is-collapsed {
  cursor: pointer;
}

.campaign-box.is-collapsed:hover {
  border-color: rgba(38, 74, 52, 0.35);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.campaign-box.is-empty-audience {
  border-color: #F0DCB4;
  background: var(--warning-light);
}

.campaign-box.is-empty-audience.is-collapsed .box-head {
  background:
    linear-gradient(160deg, #FFF6E5 0%, #FFFBF3 48%, #fff 100%);
}

.campaign-box.is-empty-audience:not(.is-collapsed) .box-head {
  background: #FFF8EC;
  border-bottom-color: #F0DCB4;
}

.campaign-box.is-empty-audience.is-collapsed:hover {
  border-color: #D99A2B;
}

.campaign-box.is-empty-audience .box-count {
  color: #8A5A10;
}

.campaign-box.is-empty-audience .box-title,
.campaign-box.is-empty-audience .box-sub {
  color: #8A5A10;
}

.box-empty-badge {
  font-size: 0.7rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: #FDECEC;
  color: #b33a36;
  border: 1px solid #F3C4C2;
  white-space: nowrap;
}

.campaign-box:not(.is-collapsed) {
  grid-column: 1 / -1;
  box-shadow: var(--shadow-md);
  border-color: rgba(38, 74, 52, 0.28);
}

.campaign-box.is-collapsed .box-head {
  border-bottom: none;
  flex: 1;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.05rem 1.1rem;
  background:
    linear-gradient(160deg, rgba(234, 245, 238, 0.85) 0%, rgba(255, 255, 255, 0.96) 48%, #fff 100%);
}

.campaign-box:not(.is-collapsed) .box-head {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.campaign-box.is-dragging {
  box-shadow: 0 18px 38px rgba(16, 32, 24, 0.22);
  border-color: var(--primary);
  opacity: 0.97;
  cursor: grabbing;
  grid-column: auto;
  min-height: 0;
  overflow: hidden;
}

body.is-box-dragging .campaign-box.is-collapsed:hover {
  transform: none;
}

.campaign-box.is-drop-target {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(38, 74, 52, 0.35);
}

.campaign-box.is-dragging .box-body {
  display: none !important;
}

.box-drop-placeholder {
  border: 2px dashed var(--primary);
  border-radius: var(--radius);
  background: rgba(38, 74, 52, 0.05);
  min-height: 168px;
  height: 168px;
  grid-column: auto;
  box-sizing: border-box;
}

.box-head-top,
.box-head-foot {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
}

.box-head-top { justify-content: flex-start; }
.box-head-foot { justify-content: space-between; margin-top: auto; }

.campaign-box:not(.is-collapsed) .box-head-top {
  width: auto;
  flex: none;
}

.campaign-box:not(.is-collapsed) .box-head-main {
  flex: 1;
  min-width: 10rem;
}

.campaign-box:not(.is-collapsed) .box-head-foot {
  width: auto;
  flex: none;
  margin-top: 0;
  gap: 0.65rem;
}

.box-head-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.box-head-text { min-width: 0; flex: 1; }

.box-drag-handle {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text-secondary);
  font-size: 1.05rem;
  cursor: grab;
  touch-action: none;
}

.box-drag-handle:hover:not(:disabled) { color: var(--primary); border-color: var(--primary); }
.box-drag-handle:active:not(:disabled) { cursor: grabbing; }
.box-drag-handle:disabled { opacity: 0.4; cursor: default; }
.box-drag-handle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

body.is-box-dragging { user-select: none; }

.box-priority {
  flex: none;
  min-width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

.box-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.campaign-box:not(.is-collapsed) .box-title {
  white-space: nowrap;
  display: block;
  -webkit-line-clamp: unset;
  text-overflow: ellipsis;
}

.box-title.is-empty {
  font-weight: 500;
  color: var(--text-secondary);
  font-style: italic;
}

.box-sub {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.3rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.campaign-box:not(.is-collapsed) .box-sub {
  white-space: nowrap;
  display: block;
  -webkit-line-clamp: unset;
  text-overflow: ellipsis;
}

.box-badges {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  flex-wrap: wrap;
  min-width: 0;
}

.box-count-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  min-width: 0;
}

.box-count {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

.box-count-unique {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.35;
}

.box-force-badge {
  font-size: 0.7rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: #FDF1DC;
  color: #8A5A10;
  border: 1px solid #F0DCB4;
  white-space: nowrap;
}

.box-ab-badge {
  background: var(--primary-light);
  color: var(--primary);
  border-color: rgba(38, 74, 52, 0.18);
}

.box-icon-btn {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.box-icon-btn:hover:not(:disabled) { background: var(--card); border-color: var(--border); color: var(--text); }
.box-icon-btn:disabled { opacity: 0.35; cursor: default; }
.box-remove:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }

.box-edit-btn {
  flex: none;
  min-width: 4.5rem;
}

.box-body {
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background:
    linear-gradient(180deg, #DDE5E1 0%, #E8EEEA 40%, #EEF2F0 100%);
  border-top: 1px solid rgba(38, 74, 52, 0.08);
}

.box-body[hidden],
.campaign-box.is-collapsed .box-body {
  display: none !important;
}

.box-section {
  background: var(--card);
  border: 1px solid rgba(38, 74, 52, 0.12);
  border-radius: 14px;
  padding: 0;
  box-shadow:
    0 1px 2px rgba(28, 36, 52, 0.04),
    0 8px 22px rgba(28, 36, 52, 0.05);
  overflow: hidden;
  position: relative;
}

.box-section::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--primary);
  opacity: 0.85;
}

.box-section-title-block::before {
  background: var(--primary-mid);
  opacity: 0.55;
}

.box-section-options::before {
  background: var(--accent-cta);
  opacity: 0.9;
}

.box-section-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0;
  padding: 0.85rem 1.1rem;
  background: linear-gradient(180deg, #F7FAF8 0%, #F1F6F3 100%);
  border-bottom: 1px solid rgba(38, 74, 52, 0.1);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.box-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  flex: none;
  box-shadow: 0 1px 0 rgba(28, 36, 52, 0.12);
}

.box-section > .form-group,
.box-section > .box-tabs,
.box-section > .box-section-hint,
.box-section > .box-section-panel {
  margin-inline: 1.1rem;
}

.box-section > .form-group,
.box-section > .box-tabs {
  margin-top: 0.95rem;
}

.box-section > .box-section-hint {
  margin-top: 0.65rem;
  margin-bottom: 0;
}

.box-section > .box-section-panel {
  margin-top: 0.85rem;
  margin-bottom: 1.05rem;
}

.box-section > .form-group:last-child,
.box-section > .box-section-panel:last-child {
  margin-bottom: 1.05rem;
}

.box-section-hint {
  margin: 0;
}

.box-section-panel {
  background: #F5F8F6;
  border: 1px solid rgba(38, 74, 52, 0.08);
  border-radius: 12px;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.box-subsection {
  background: var(--card);
  border: 1px solid rgba(38, 74, 52, 0.1);
  border-radius: 10px;
  padding: 0.85rem 0.9rem;
  box-shadow: 0 1px 0 rgba(28, 36, 52, 0.03);
}

.box-subsection + .box-subsection {
  margin-top: 0;
}

.box-subsection-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 0.7rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed rgba(38, 74, 52, 0.18);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.box-subsection-title::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-mid);
  flex: none;
}

.box-tabs {
  margin-bottom: 0.75rem;
}

.box-options-panel {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.box-messages {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0;
}

.box-ab-msg-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;
}

.box-ab-variant-count {
  margin-top: 0.65rem;
  padding-inline-start: 1.85rem;
  max-width: min(100%, 560px);
}

.box-ab-variant-count .form-label {
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
}

.box-ab-variant-count select.form-input {
  max-width: 280px;
}

.box-ab-angle-row {
  margin-bottom: 0.55rem;
}

.box-ab-angle-row .form-label {
  margin-bottom: 0.3rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.box-message {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.9rem;
  background: var(--card);
}

.box-message.is-variant-a {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

.box-message.is-variant-b {
  border-color: color-mix(in srgb, var(--success, #1a7f4b) 35%, var(--border));
}

.ab-box-detail + .ab-box-detail {
  margin-top: 1rem;
}

.ab-box-detail-head {
  font-weight: 600;
  margin-bottom: 0.55rem;
}

@media (max-width: 760px) {
  .box-ab-msg-pair {
    grid-template-columns: 1fr;
  }
}

.box-message .form-textarea { width: 100%; }

.box-msg-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
  flex-wrap: wrap;
}

.box-msg-label-row .form-label {
  margin-bottom: 0;
}

.box-msg-label-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-inline-start: auto;
}

.box-msg-label-row .seg-ai-prompt-btn {
  margin-inline-start: 0;
}

.box-msg-meta {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-top: 0.55rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.box-msg-warn { color: #8A5A10; }

.box-msg-test {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.box-msg-test .form-input {
  flex: 1 1 9rem;
  min-width: 9rem;
  max-width: 14rem;
  direction: ltr;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.box-msg-test .btn {
  white-space: nowrap;
}

.box-force {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0;
  padding: 0.85rem 1rem;
  border: 1px solid #F0DCB4;
  border-radius: var(--radius-sm);
  background: #FFFBF2;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1.6;
}

.box-force input { margin-top: 0.2rem; flex: none; }
.box-force em { display: block; font-style: normal; font-size: 0.78rem; color: var(--text-secondary); }

.campaign-box .segment-summary {
  margin-top: 0.75rem;
  border-top: 1px dashed rgba(122, 132, 153, 0.3);
  padding-top: 0.75rem;
}

/* ---------- Review: per-box cards ---------- */
.review-box-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.6rem;
}

.review-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  background: var(--bg);
}

.review-box-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.5rem;
}

.review-box-num {
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  flex: none;
}

.review-box-title {
  font-weight: 600;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-box-meta {
  display: flex;
  gap: 0.95rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 0.65rem;
}

.review-box-skip { color: #8A5A10; }

.review-box-msg + .review-box-msg { margin-top: 0.6rem; }

.review-box-msg-head {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
}

.review-box-msg .message-preview-box {
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 0.84rem;
  padding: 0.7rem 0.85rem;
}

.review-box-image {
  margin-top: 0.7rem;
}

.review-box-image img {
  width: 100%;
  max-width: 220px;
  max-height: 140px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: block;
}

/* ---------- Sending: per-box progress ---------- */
.box-progress-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.box-progress-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font-size: 0.82rem;
}

.box-progress-item .bp-title { font-weight: 600; flex: 1; min-width: 8rem; }
.box-progress-item .bp-stat { color: var(--text-secondary); white-space: nowrap; }
.box-progress-item .bp-stat.ok { color: var(--primary); }
.box-progress-item .bp-stat.fail { color: var(--danger); }

.box-progress-item .bp-status {
  font-size: 0.72rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.box-progress-item.is-done .bp-status { background: #EAF5EE; border-color: #C9E4D4; color: #1F5133; }
.box-progress-item.is-sending .bp-status { background: #FDF1DC; border-color: #F0DCB4; color: #8A5A10; }

.detail-seg-summary {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.detail-seg-chip {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  text-align: right;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.detail-seg-chip:hover {
  border-color: #b7c9bc;
  background: #f7fbf8;
}
.detail-seg-chip-num {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eaf5ee;
  color: #1f5133;
  font-weight: 700;
  font-size: 0.85rem;
}
.detail-seg-chip-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.detail-seg-chip-title {
  font-weight: 700;
  color: var(--text);
  line-height: 1.45;
}
.detail-seg-chip-meta {
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.5;
}

.detail-seg-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.detail-seg-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  text-align: right;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.detail-seg-item:hover {
  border-color: #b7c9bc;
  background: #f8fbf9;
}
.detail-seg-item.is-active {
  border-color: #7fb892;
  background: #f1f8f3;
  box-shadow: 0 0 0 1px rgba(47, 122, 74, 0.12);
}
.detail-seg-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.detail-seg-item-title {
  font-weight: 700;
  line-height: 1.45;
}
.detail-seg-item-meta {
  color: var(--text-secondary);
  font-size: 0.82rem;
}
.detail-seg-item-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  color: var(--text-secondary);
  font-size: 0.8rem;
  justify-content: flex-end;
  max-width: 18rem;
}
.detail-seg-item-stats .ok { color: var(--primary); }
.detail-seg-item-stats .fail { color: var(--danger); }
.detail-seg-channels {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
}
.detail-seg-message {
  margin: 0 1.15rem 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: #f7f9fc;
  border: 1px solid var(--border);
  white-space: pre-wrap;
  line-height: 1.7;
  font-size: 0.92rem;
  color: var(--text);
}

.payments-share-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 7rem;
}
.payments-share-track {
  flex: 1;
  height: 0.45rem;
  border-radius: 999px;
  background: #e8eef3;
  overflow: hidden;
}
.payments-share-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f7a4a, #5aa872);
}

@media (max-width: 720px) {
  .detail-seg-item {
    flex-wrap: wrap;
  }
  .detail-seg-item-stats {
    max-width: none;
    width: 100%;
    justify-content: flex-start;
    padding-right: 2.5rem;
  }
}

@media (max-width: 560px) {
  .box-head { flex-wrap: wrap; }
  .box-head-main { order: 3; flex-basis: 100%; }
  .box-badges { margin-inline-start: auto; }
}

/* ---------- Progress ---------- */
.progress-wrap { margin: 1.5rem 0; }

.progress-bar {
  height: 10px;
  background: #E8ECF2;
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-mid));
  border-radius: 999px;
  transition: width 0.4s ease;
}

.progress-fill.is-indeterminate {
  width: 40% !important;
  transition: none;
  animation: progress-indeterminate 1.1s ease-in-out infinite;
}

@keyframes progress-indeterminate {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(280%); }
}

.progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.send-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.send-stat {
  text-align: center;
  padding: 1.15rem;
  background: var(--bg);
  border-radius: var(--radius-sm);
}

.send-stat .n { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.send-stat .l { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.25rem; }

.complete-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--success-light);
  border: 1px solid #A8E0C4;
  border-radius: var(--radius);
  color: #1a7a4c;
  font-weight: 600;
  margin-top: 1.5rem;
}

/* ---------- Timeline ---------- */
.timeline { padding: 0.5rem 0; }

.timeline-item {
  display: flex;
  gap: 1rem;
  position: relative;
  padding-bottom: 1.5rem;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
  content: '';
  position: absolute;
  right: 7px;
  top: 18px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.timeline-item:last-child::before { display: none; }

.timeline-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--primary-light);
  flex-shrink: 0;
  margin-top: 3px;
  z-index: 1;
}

.timeline-content .t-title { font-weight: 600; font-size: 0.92rem; }
.timeline-content .t-time { font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.15rem; }

.dossier-tl-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.dossier-tl-filters .btn.is-active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.dossier-timeline {
  padding: 0.25rem 0 0.5rem;
  max-height: 32rem;
  overflow: auto;
}
.dossier-tl-item {
  display: flex;
  gap: 0.85rem;
  position: relative;
  padding-bottom: 1.15rem;
}
.dossier-tl-item:last-child { padding-bottom: 0; }
.dossier-tl-item::before {
  content: '';
  position: absolute;
  right: 11px;
  top: 22px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.dossier-tl-item:last-child::before { display: none; }
.dossier-tl-dot {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
  z-index: 1;
  margin-top: 0.1rem;
}
.dossier-tl-item.is-payment .dossier-tl-dot {
  background: #eaf5ee;
  color: #1f5133;
  border: 1px solid #c9e4d4;
}
.dossier-tl-item.is-call .dossier-tl-dot {
  background: #eef3ff;
  color: #2b4a9b;
  border: 1px solid #c9d4f5;
}
.dossier-tl-item.is-campaign .dossier-tl-dot {
  background: #fff6e8;
  color: #8a5a10;
  border: 1px solid #f0dcb4;
}
.dossier-tl-body { flex: 1; min-width: 0; }
.dossier-tl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
}
.dossier-tl-type {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #f1f4f8;
  color: var(--text-secondary);
}
.dossier-tl-item.is-payment .dossier-tl-type { background: #eaf5ee; color: #1f5133; }
.dossier-tl-item.is-call .dossier-tl-type { background: #eef3ff; color: #2b4a9b; }
.dossier-tl-item.is-campaign .dossier-tl-type { background: #fff6e8; color: #8a5a10; }
.dossier-tl-title {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.45;
}
.dossier-tl-time {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-inline-start: auto;
}
.dossier-tl-meta {
  margin-top: 0.25rem;
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.ab-test-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  margin: 0;
  padding: 0.15rem 0;
}
.ab-test-toggle input {
  margin-top: 0.35rem;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}
.ab-test-toggle-body {
  flex: 1;
  min-width: 0;
}
.ab-test-estimate.is-alarm {
  color: var(--danger, #c62828);
  font-weight: 600;
}
.box-ab-badge {
  background: #eef3ff;
  color: #2b4a9b;
}
.box-ab-test .ab-test-estimate {
  display: block;
  margin-top: 0.35rem;
  font-style: normal;
}
.box-ab-test .ab-test-estimate.is-alarm {
  color: var(--danger, #c62828);
  font-weight: 600;
}

.review-box-ab.is-alarm {
  color: var(--danger, #c62828);
  font-weight: 600;
}

.dossier-tl-item.is-clickable {
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.15s ease;
}
.dossier-tl-item.is-clickable:hover {
  background: #fff8ef;
}
.dossier-tl-camp-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  font-weight: 700;
  text-align: right;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  color: #8a5a10;
}
.dossier-camp-msg-block {
  border: 1px solid var(--border, #e6e2d8);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
  background: #fafaf7;
}
.dossier-camp-msg-block.is-strategy {
  background: #f3f6ff;
  border-color: #d5def5;
}
.dossier-camp-msg-block.is-strategy .dossier-camp-msg-channel {
  color: #1f5133;
}
.dossier-camp-msg-block:last-child { margin-bottom: 0; }
.dossier-camp-msg-channel {
  font-size: 0.82rem;
  font-weight: 700;
  color: #2b4a9b;
  margin-bottom: 0.45rem;
}
.dossier-camp-msg-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.7;
  font-size: 0.95rem;
  color: var(--text, #222);
}

.dossier-call-advice-headline {
  margin: 0 0 0.75rem;
  padding: 0;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.65;
  color: var(--text, #1a1f16);
  letter-spacing: -0.01em;
}

.dossier-call-advice-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.85;
  font-size: 0.95rem;
  color: var(--text, #222);
  background: #f7f8f4;
  border: 1px solid var(--border, #e6e2d8);
  border-radius: 10px;
  padding: 0.95rem 1.1rem;
  max-height: min(60vh, 520px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.modal.modal-dossier-camp {
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 720px);
  max-width: min(560px, 100%);
  overflow: hidden;
  padding: 1.25rem 1.35rem 1rem;
}

.modal.modal-dossier-camp .modal-header-row {
  flex: 0 0 auto;
  margin-bottom: 0.35rem;
}

.modal.modal-dossier-camp .modal-dossier-camp-meta,
.modal.modal-dossier-camp .form-hint.modal-dossier-camp-meta {
  flex: 0 0 auto;
  margin: 0 0 0.65rem;
  line-height: 1.45;
}

.modal.modal-dossier-camp .modal-dossier-camp-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-inline-end: 0.15rem;
}

.modal.modal-dossier-camp .modal-dossier-camp-actions {
  flex: 0 0 auto;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border, #e4e6e2);
  flex-wrap: wrap;
}

.dossier-tl-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 1.25rem 0.5rem;
}

.pay-est-layout {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 900px) {
  .pay-est-layout {
    grid-template-columns: 1fr;
  }
}

.pay-est-list-card {
  max-height: min(70vh, 720px);
  overflow: auto;
}

.pay-est-list {
  display: flex;
  flex-direction: column;
}

.pay-est-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  text-align: right;
  padding: 0.85rem 1rem;
  border: none;
  border-bottom: 1px solid var(--border-light);
  background: transparent;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background 0.12s ease;
}

.pay-est-item:hover {
  background: var(--primary-light);
}

.pay-est-item.is-active {
  background: var(--primary-light);
  box-shadow: inset 3px 0 0 var(--primary);
}

.pay-est-item-name {
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.45;
}

.pay-est-item-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.pay-est-result-card {
  min-height: 280px;
}

.pay-est-empty {
  display: grid;
  place-items: center;
  min-height: 240px;
  color: var(--text-secondary);
  text-align: center;
  padding: 1.5rem;
}

.pay-est-empty[hidden],
#payEstResultBody[hidden],
#payEstResultLoading[hidden] {
  display: none !important;
}

.pay-est-result-head {
  margin-bottom: 1rem;
}

.pay-est-result-head h3 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--primary);
}

.pay-est-basis-list {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.pay-est-basis-list li {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text);
  padding: 0.45rem 0.7rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(38, 74, 52, 0.08);
  border-radius: 8px;
}

.pay-est-basis-list li strong {
  color: var(--primary);
}

.dossier-similar-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.65rem 0.85rem;
  background: var(--bg-soft, #f6f7f5);
  border-radius: var(--radius);
  margin-top: 0.35rem;
}
.dossier-similar-score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}
.dossier-similar-score.is-exact {
  color: #1f5133;
}

.tl-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  /* صفحه RTL است: قدیمی‌تر سمت راست، جدیدتر سمت چپ */
  direction: rtl;
  unicode-bidi: isolate;
  justify-content: flex-start;
}
.tl-chain-chip {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  background: #f0f0f0;
  color: #444;
  white-space: nowrap;
}
.tl-chain-chip.is-payment { background: #eaf5ee; color: #1f5133; }
.tl-chain-chip.is-call { background: #eef3ff; color: #2b4a9b; }
.tl-chain-chip.is-campaign { background: #fff6e8; color: #8a5a10; }
.tl-chain-arrow {
  color: var(--text-secondary);
  font-size: 0.85rem;
  padding: 0 0.1rem;
}

.chain-builder {
  align-items: start;
}
.chain-builder-add {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.chain-builder-add .chain-add-token.is-campaign {
  border-color: #e8c48a;
  color: #8a5a10;
}
.chain-builder-add .chain-add-token.is-call {
  border-color: #b7c8f0;
  color: #2b4a9b;
}
.chain-builder-add .chain-add-token.is-payment {
  border-color: #a9d4b5;
  color: #1f5133;
}
.chain-builder-add .chain-add-token.is-any-star,
.chain-builder-add .chain-add-token.is-any-n,
.chain-builder-add .chain-add-token.is-set-star {
  border-color: #c9b8e0;
  color: #5a3d8a;
}
.chain-builder-canvas {
  min-height: 3.25rem;
  padding: 0.85rem 1rem;
  border: 1px dashed var(--border, #d8d8d8);
  border-radius: var(--radius);
  background: var(--bg-soft, #fafafa);
}
.chain-builder-chip {
  cursor: pointer;
  border: 0;
  font: inherit;
}
.chain-builder-chip:hover {
  filter: brightness(0.96);
}
.chain-builder-chip.is-any-star,
.chain-builder-chip.is-any-n,
.chain-builder-chip.is-set-star,
.chain-builder-chip-wrap.is-any-n .tl-chain-chip {
  background: #f3edfa;
  color: #5a3d8a;
  border: 1px solid #d5c4ea;
}
.chain-builder-chip-wrap {
  display: inline-flex;
  align-items: stretch;
  border-radius: 999px;
  overflow: hidden;
}
.chain-builder-chip-wrap .tl-chain-chip {
  border-radius: 0;
  margin: 0;
}
.chain-builder-chip-x {
  border: 0;
  background: rgba(90, 61, 138, 0.12);
  color: #5a3d8a;
  padding: 0 0.45rem;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}
.chain-builder-chip-x:hover {
  background: rgba(90, 61, 138, 0.2);
}
.chain-set-picker {
  margin-top: 0.65rem;
  padding: 0.65rem 0.75rem;
  border: 1px dashed #d5c4ea;
  border-radius: var(--radius);
  background: #faf7fd;
}
.chain-set-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  margin-bottom: 0.5rem;
}
.chain-set-option {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.chain-set-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.chain-match-options {
  display: grid;
  gap: 0.65rem;
}
.chain-match-option {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border, #e2e2e2);
  border-radius: var(--radius);
  cursor: pointer;
  background: #fff;
}
.chain-match-option:has(input:checked) {
  border-color: var(--primary, #5a8f45);
  background: var(--primary-light, #f3f8ef);
}
.chain-match-option input {
  margin-top: 0.2rem;
}
.chain-match-option span {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.chain-match-option strong {
  font-size: 0.95rem;
}
.chain-match-option em {
  font-style: normal;
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.5;
}
.chain-clauses {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.chain-clause-card {
  border: 1px solid var(--border, #e2e2e2);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  background: #fff;
}
.chain-clause-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.chain-clause-joiner {
  align-self: center;
  margin: 0.35rem 0;
}

.chain-pattern-visual {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.chain-pattern-clause {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border, #e2e2e2);
  border-radius: var(--radius);
  background: #fff;
}
.chain-pattern-clause.is-compact {
  padding: 0.45rem 0.6rem;
}
.chain-match-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--primary-light, #eaf5ee);
  color: var(--primary, #264a34);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.chain-match-pill.is-ends {
  background: #fff6e5;
  color: #8a5a10;
}
.chain-match-pill.is-exact {
  background: #e8eef8;
  color: #1f3a6e;
}
.chain-join-readonly {
  align-self: center;
  margin: 0.1rem 0;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  background: #f1f1f1;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 700;
}
.chain-kind-visual {
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border, #e2e2e2);
  border-radius: var(--radius);
  background: #fff;
}
.chain-kind-badge {
  display: inline-flex;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: #eef3ff;
  color: #2b4a9b;
  font-size: 0.85rem;
  font-weight: 700;
}
.seg-chain-preview {
  margin: 0.35rem 0 0.55rem;
}
.seg-chain-preview .chain-pattern-clause {
  background: var(--bg-soft, #fafafa);
}
.seg-dict-card.is-chain .seg-chain-preview .tl-chain-chip {
  font-size: 0.78rem;
}
.chain-pattern-atoms .tl-chain-chip.is-any-star,
.chain-pattern-atoms .tl-chain-chip.is-any-n,
.chain-pattern-atoms .tl-chain-chip.is-set-star {
  background: #f3edfa;
  color: #5a3d8a;
  border: 1px solid #d5c4ea;
}
.chain-join-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: #f1f1f1;
  border: 1px solid var(--border, #e2e2e2);
}
.chain-join-picker label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.chain-join-picker label:has(input:checked) {
  background: #fff;
  color: var(--text-primary, #222);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.chain-join-picker input {
  margin: 0;
}

.tl-rule-formula {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  text-align: left;
}

/* ---------- Insight Card ---------- */
.insight-card {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--accent-soft) 100%);
  border: 1px solid #C5DDB8;
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem;
  margin: 1.25rem 0;
}

.insight-card .insight-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.65rem;
  color: var(--primary);
}

.insight-card .soon-badge {
  background: var(--warning-light);
  color: #9a6b14;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.insight-card.is-disabled {
  opacity: 0.55;
  pointer-events: none;
  filter: grayscale(0.15);
}

.learning-chain-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.learning-chain .soon-badge {
  background: var(--warning-light);
  color: #9a6b14;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.learning-chain.is-disabled {
  opacity: 0.55;
  pointer-events: none;
  filter: grayscale(0.15);
}

.ab-setup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ab-setup-card .soon-badge {
  background: var(--warning-light);
  color: #9a6b14;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.ab-setup-card.is-disabled {
  opacity: 0.55;
  pointer-events: none;
  filter: grayscale(0.15);
}

.insight-card p {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--text);
}

/* ---------- Charts (CSS bars) ---------- */
.chart-card { padding: 1.35rem; }

.bar-chart { display: flex; flex-direction: column; gap: 0.85rem; }

.bar-row {
  display: grid;
  grid-template-columns: 120px 1fr 50px;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
}

.bar-row .bar-track {
  height: 10px;
  background: #E8ECF2;
  border-radius: 999px;
  overflow: hidden;
}

.bar-row .bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
}

.bar-row .bar-val { font-weight: 700; font-variant-numeric: tabular-nums; text-align: left; }

.line-chart {
  height: 200px;
  display: flex;
  align-items: flex-end;
  gap: 0.65rem;
  padding-top: 1rem;
  border-bottom: 1px solid var(--border);
}

.line-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--primary-mid), var(--primary));
  border-radius: 6px 6px 0 0;
  min-height: 8px;
  position: relative;
  opacity: 0.85;
  transition: opacity 0.15s;
}

.line-bar:hover { opacity: 1; }

.line-bar .tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: #fff;
  font-size: 0.68rem;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.line-bar:hover .tip { opacity: 1; }

.chart-labels {
  display: flex;
  gap: 0.65rem;
  margin-top: 0.5rem;
}

.chart-labels span {
  flex: 1;
  text-align: center;
  font-size: 0.68rem;
  line-height: 1.3;
  color: var(--text-secondary);
  word-break: break-word;
}

.reports-coverage-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
  border: 1px solid #F0D9A8;
  background: #FFF8EB;
  border-radius: 12px;
}

.reports-coverage-text {
  flex: 1;
  min-width: min(100%, 220px);
}

.reports-coverage-banner strong {
  font-size: 0.95rem;
}

.reports-coverage-progress {
  margin: 0.65rem 0 0;
}

.reports-coverage-progress .progress-label {
  font-size: 0.82rem;
  font-weight: 600;
}

.reports-coverage-progress .progress-bar {
  height: 8px;
}

.reports-week-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.reports-week-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 9rem) 1fr minmax(6.5rem, auto);
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
}

.reports-week-date {
  color: var(--text);
  font-weight: 600;
  line-height: 1.35;
}

.reports-week-meta {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.reports-week-track {
  height: 10px;
  background: #E8ECF2;
  border-radius: 999px;
  overflow: hidden;
}

.reports-week-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-mid), var(--primary));
  border-radius: 999px;
  min-width: 4px;
}

.reports-week-fill-success {
  background: linear-gradient(90deg, #66BB6A, var(--success));
}

.reports-week-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: left;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .reports-week-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date val"
      "bar bar";
    gap: 0.35rem 0.75rem;
  }
  .reports-week-date { grid-area: date; }
  .reports-week-val { grid-area: val; }
  .reports-week-track { grid-area: bar; }
}

/* ---------- Grid helpers ---------- */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
}

.stack { display: flex; flex-direction: column; gap: 1.25rem; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

/* ---------- Segment Dictionary Cards ---------- */
.seg-dict-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
}

.seg-dict-card {
  background: var(--card);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.35rem;
  transition: box-shadow 0.18s, transform 0.18s;
  cursor: pointer;
  position: relative;
}

.seg-dict-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.seg-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.seg-dict-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1.35;
}

.seg-card-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.seg-lookup-btn {
  white-space: nowrap;
}

.seg-source-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.seg-source-filter {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.seg-source-filter:hover {
  border-color: #C5DDB8;
  color: var(--primary);
}

.seg-source-filter.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.seg-type-badge {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.55rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
}

.seg-type-badge.is-sql {
  background: #E8F5E1;
  color: #2F6B1F;
}

.seg-type-badge.is-chain {
  background: #fff6e8;
  color: #8a5a10;
}

.seg-type-badge.is-excel {
  background: #F3F4F6;
  color: #6B7280;
}

.seg-dict-card.is-sql {
  box-shadow: var(--shadow), inset 0 0 0 1px #C5DDB8;
}

.seg-dict-card.is-chain {
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(138, 90, 16, 0.28);
}

.seg-refresh-btn.btn,
.seg-refresh-btn.btn-sm {
  width: auto;
  min-width: 3.2rem;
  height: auto;
  min-height: 34px;
  padding: 0.35rem 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  place-items: unset;
  font-size: 0.8rem;
  font-weight: 700;
}

.seg-refresh-btn,
.seg-delete-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.seg-refresh-btn svg,
.seg-delete-btn svg {
  width: 16px;
  height: 16px;
}

.seg-refresh-btn:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: #C5DDB8;
}

.seg-refresh-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.seg-refresh-btn.is-disabled,
.seg-refresh-btn.is-disabled:hover {
  opacity: 0.35;
  cursor: not-allowed;
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border);
}

.seg-delete-btn:hover {
  background: #fdebec;
  color: var(--error, #c0392b);
  border-color: #f0c2c6;
}

.seg-dict-card.is-refreshing .seg-refresh-btn svg {
  animation: sqlSpin 0.8s linear infinite;
}

.seg-dict-card.is-refreshing .seg-stats {
  opacity: 0.45;
  pointer-events: none;
}

.seg-dict-card.is-refreshing::after {
  content: 'در حال تکرار سگمنت (اجرای کوئری و فریز جدید)…';
  display: block;
  margin-top: 0.85rem;
  font-size: 0.8rem;
  color: var(--primary);
  font-weight: 600;
}

.seg-dict-card.is-exporting {
  border-color: #C5DDB8;
  box-shadow: 0 0 0 1px rgba(38, 74, 52, 0.08);
}

.seg-dict-card.is-exporting .seg-export-btn,
#btnSegmentDetailExport[aria-busy='true'] {
  opacity: 0.9;
  cursor: wait;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.seg-dict-card.is-exporting::after {
  content: 'در حال ساخت خروجی اکسل…';
  display: block;
  margin-top: 0.85rem;
  font-size: 0.8rem;
  color: var(--primary);
  font-weight: 600;
}

/* ---------- Segment Excel export progress ---------- */
.export-progress {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 4100;
  width: min(360px, calc(100vw - 2rem));
  padding: 1rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  animation: slideUp 0.25s ease;
}

.export-progress[hidden] {
  display: none !important;
}

.export-progress-head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.7rem;
}

.export-progress-head-text {
  flex: 1;
  min-width: 0;
}

.export-progress-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.4;
}

.export-progress-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.export-progress-meta #exportProgressEta {
  color: var(--text-secondary);
  font-weight: 600;
}

.export-progress-detail {
  margin: 0.55rem 0 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.export-progress .progress-bar {
  height: 8px;
  background: rgba(38, 74, 52, 0.1);
}

.export-progress.is-done .export-progress-title {
  color: var(--success);
}

.export-progress.is-error .export-progress-title {
  color: var(--error, #c0392b);
}

@media (max-width: 560px) {
  .export-progress {
    right: 1rem;
    left: 1rem;
    bottom: 1rem;
    width: auto;
  }
}

.seg-stats-compact {
  grid-template-columns: 1fr 1fr;
}

.seg-stats-compact .sv {
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.seg-empty-state {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.seg-empty-state p {
  margin: 0;
  font-size: 0.95rem;
}

.seg-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.seg-stat {
  background: var(--bg);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
}

.seg-stat .sl { font-size: 0.7rem; color: var(--text-secondary); }
.seg-stat .sv { font-weight: 700; font-size: 0.95rem; margin-top: 0.15rem; font-variant-numeric: tabular-nums; }

.seg-refresh-meta {
  margin-top: 0.85rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* ---------- A/B Test ---------- */
.ab-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

.ab-group {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 1.15rem;
  text-align: center;
}

.ab-group .ab-label { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.35rem; }
.ab-group .ab-val { font-size: 1.6rem; font-weight: 700; }
.ab-group.lift { background: var(--success-light); }
.ab-group.lift .ab-val { color: var(--success); }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 32, 51, 0.45);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  backdrop-filter: blur(2px);
  overflow: auto;
  overscroll-behavior: contain;
}

.modal-overlay.open { display: flex; }

.modal {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(23, 32, 51, 0.2);
  max-width: 440px;
  width: 100%;
  padding: 1.75rem;
  animation: fadeIn 0.2s ease;
}

.modal.modal-wide {
  max-width: 560px;
}

.modal-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.modal-header-row h3 {
  margin-bottom: 0;
}

.tl-phones-list {
  max-height: min(50vh, 360px);
  overflow: auto;
  border: 1px solid var(--border, #e5e8ef);
  border-radius: 10px;
  background: var(--bg, #f7f8fb);
  padding: 0.5rem 0.75rem;
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

.tl-phones-list .tl-phone-item {
  padding: 0.35rem 0.15rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 0.92rem;
  color: var(--text);
}

.tl-phones-list .tl-phone-item:last-child {
  border-bottom: none;
}

tr.tl-rule-row {
  cursor: pointer;
}

tr.tl-rule-row:hover {
  background: rgba(38, 74, 52, 0.06);
}

.modal h3 { font-size: 1.15rem; margin-bottom: 0.75rem; }
.modal p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.65; margin-bottom: 1.5rem; }

.modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

/* ---------- Login ---------- */
body.is-locked {
  overflow: hidden;
}

body.is-locked .app,
body.is-locked .bottom-nav {
  filter: blur(2px);
  pointer-events: none;
  user-select: none;
}

.login-overlay {
  z-index: 3000;
  align-items: safe center;
  background: rgba(28, 36, 52, 0.55);
  backdrop-filter: blur(6px);
}

.login-modal {
  max-width: 420px;
  padding: 1.75rem 1.6rem 1.6rem;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.35rem;
}

.login-brand .logo-mark {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--accent), var(--accent-cta));
  color: #1C2434;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.login-brand h3 {
  margin-bottom: 0.15rem;
  font-size: 1.2rem;
}

.login-sub {
  margin: 0 !important;
  font-size: 0.82rem !important;
  color: var(--text-secondary);
  line-height: 1.5;
}

.login-error {
  margin: 0 0 0.9rem;
  color: var(--danger, #9b2c2c);
  font-size: 0.86rem;
  line-height: 1.55;
}

/* ---------- Toast ---------- */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 4000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toast {
  background: var(--text);
  color: #fff;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  animation: slideUp 0.25s ease;
  max-width: 360px;
}

.toast.success { background: var(--success); }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Empty / Skeleton ---------- */
.empty-state {
  text-align: center;
  padding: 3.5rem 2rem;
}

.empty-state .empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.25rem;
  background: var(--primary-light);
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--primary);
}

.empty-state h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.empty-state p { color: var(--text-secondary); margin-bottom: 1.5rem; max-width: 360px; margin-inline: auto; }

.skeleton {
  background: linear-gradient(90deg, #EEF0F4 25%, #F7F8FA 50%, #EEF0F4 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Mobile nav toggle ---------- */
.mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.15rem;
  background: transparent;
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 90;
}

.mobile-header > div:first-child {
  background: var(--card);
  box-shadow: var(--shadow-sm);
  border-radius: 14px;
  padding: 0.45rem 0.75rem;
}

.menu-btn {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: none;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  color: var(--primary);
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(28, 36, 52, 0.35);
  backdrop-filter: blur(2px);
  z-index: 99;
}

.sidebar-backdrop.open { display: block; }

.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card);
  border-top: none;
  box-shadow: 0 -8px 30px rgba(28, 36, 52, 0.06);
  z-index: 90;
  padding: 0.45rem 0.5rem calc(0.45rem + env(safe-area-inset-bottom));
  justify-content: space-around;
  border-radius: 18px 18px 0 0;
}

.bottom-nav .bnav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.45rem 0.55rem;
  font-size: 0.68rem;
  color: var(--text-secondary);
  font-weight: 500;
  border-radius: 12px;
  min-width: 56px;
}

.bottom-nav .bnav.active {
  color: #fff;
  background: var(--primary);
  box-shadow: 0 6px 14px rgba(38, 74, 52, 0.2);
}
.bottom-nav .bnav svg { width: 22px; height: 22px; }

/* ---------- Detail header ---------- */
.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.detail-header h2 { font-size: 1.45rem; font-weight: 700; }
.detail-title-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.detail-title-row h2 { margin: 0; }
.detail-rename-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
}
.phone-lookup-camp-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}
.phone-lookup-camp-link:hover {
  text-decoration: underline;
}
.phone-lookup-segment {
  color: var(--text-secondary);
  font-weight: 500;
}
.phone-lookup-segment-line {
  color: var(--text-secondary);
  font-size: 0.85em;
  font-weight: 500;
  margin-top: 0.15rem;
}
.dossier-phone-link {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}
.dossier-phone-link:hover {
  text-decoration: underline;
}
.phone-lookup-excel-camp {
  color: var(--success, #0f7b4c);
  font-weight: 700;
}
.phone-lookup-excel-row td:first-child {
  font-weight: 600;
}

.table-filter-row th {
  background: #f7f9fc;
  padding: 0.4rem 0.55rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}
.table-filter-row .table-col-filter {
  width: 100%;
  min-width: 4.5rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 400;
}
.table-filter-row select.table-col-filter {
  cursor: pointer;
}

.ms-filter-search-wrap {
  margin-bottom: 0.35rem;
  position: sticky;
  top: 1.85rem;
  background: var(--card, #fff);
  z-index: 1;
  padding-bottom: 0.2rem;
}
.ms-filter-search {
  width: 100%;
  font-size: 0.82rem;
  padding: 0.4rem 0.55rem;
}
.phone-lookup-scope {
  min-width: min(100%, 28rem);
  max-width: 36rem;
}
.phone-lookup-scope .ms-filter-btn {
  font-size: 0.9rem;
  padding: 0.65rem 0.9rem;
  font-weight: 500;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  min-height: 2.6rem;
  line-height: 1.4;
}
.phone-lookup-scope .ms-filter-panel {
  min-width: min(100%, 28rem);
  max-width: min(36rem, 92vw);
  max-height: 20rem;
}
.ms-filter {
  position: relative;
  min-width: 9rem;
}
.ms-filter-btn {
  width: 100%;
  text-align: right;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8rem;
  font-weight: 400;
  padding: 0.35rem 0.5rem;
}
.ms-filter-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 40;
  min-width: 16rem;
  max-width: min(22rem, 80vw);
  max-height: 16rem;
  overflow: auto;
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  padding: 0.4rem;
}
.ms-filter-actions {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
  position: sticky;
  top: 0;
  background: var(--card, #fff);
  z-index: 1;
  padding-bottom: 0.25rem;
}
.ms-filter-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.ms-filter-option {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.35rem 0.4rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.45;
}
.ms-filter-option:hover {
  background: #f3f6fb;
}
.ms-filter-option input {
  margin-top: 0.15rem;
  flex-shrink: 0;
}
.ms-filter-option span {
  word-break: break-word;
}
.phone-lookup-pay-pending {
  color: var(--text-secondary);
  opacity: 0.75;
}
.phone-lookup-rowno {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 3rem;
}

.th-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: inherit;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.th-sort-btn:hover {
  color: var(--primary);
}
.th-sort-btn.is-active {
  color: var(--primary);
}
.th-sort-icon::before {
  content: '↕';
  opacity: 0.35;
  font-size: 0.85em;
}
.th-sort-btn.is-asc .th-sort-icon::before {
  content: '↑';
  opacity: 1;
}
.th-sort-btn.is-desc .th-sort-icon::before {
  content: '↓';
  opacity: 1;
}

.detail-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

/* ---------- Comparison highlight ---------- */
.row-highlight td { background: var(--primary-light) !important; font-weight: 600; }

.context-note {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .seg-dict-grid { grid-template-columns: repeat(2, 1fr); }
  .composer-layout { grid-template-columns: 1fr 260px; }
}

@media (max-width: 992px) {
  .sidebar {
    transform: translateX(100%);
    padding: 0.75rem;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-inner { border-radius: 18px; }
  .main { margin-right: 0; padding-bottom: 78px; }
  .mobile-header { display: flex; }
  .btn-logout-mobile { display: inline-flex; align-items: center; }
  .bottom-nav { display: flex; }
  .kpi-grid, .kpi-grid-4, .kpi-grid-5, .kpi-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .review-grid, .builder-layout, .composer-layout { grid-template-columns: 1fr; }
  .send-stats { grid-template-columns: repeat(2, 1fr); }
  .ab-box { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .sms-meta { grid-template-columns: repeat(2, 1fr); }
  .phone-mockup { margin-top: 1rem; }
  .page { padding: 1.25rem 1rem 2.5rem; }

  /* Mobile table → cards */
  .table-mobile-cards thead { display: none; }
  .table-mobile-cards tbody tr {
    display: block;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
  }
  .table-mobile-cards tbody td {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
    border: none;
  }
  .table-mobile-cards tbody td::before {
    content: attr(data-label);
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.8rem;
  }
}

/* ---------- Jalali datepicker (insight) — هم‌رنگ تم سایت ---------- */
jdp-container {
  --jdp-day-size: 40px;
  --jdp-color-0: var(--card);
  --jdp-color-1: var(--bg);
  --jdp-color-2: var(--border-light);
  --jdp-color-3: var(--border);
  --jdp-color-4: var(--text-secondary);
  --jdp-color-5: var(--text);
  --jdp-primary: var(--primary);
  --jdp-red: var(--error);
  font-family: var(--font) !important;
  direction: rtl;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--border);
  padding: 0.65rem 0 !important;
  overflow: hidden;
}

jdp-container,
jdp-container *,
jdp-container input,
jdp-container select,
jdp-container button {
  font-family: var(--font) !important;
}

jdp-container .jdp-years,
jdp-container .jdp-months {
  color: var(--text);
  fill: var(--primary);
  font-weight: 600;
  font-size: 1rem;
}

jdp-container .jdp-year,
jdp-container .jdp-month,
jdp-container .jdp-time,
jdp-container .jdp-year input,
jdp-container .jdp-month input,
jdp-container .jdp-time input,
jdp-container .jdp-year select,
jdp-container .jdp-month select,
jdp-container .jdp-time select {
  font-weight: 600 !important;
  color: var(--text) !important;
  background: transparent !important;
}

jdp-container .jdp-icon-plus,
jdp-container .jdp-icon-minus {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--bg);
  transition: background 0.15s ease, border-color 0.15s ease;
}

jdp-container .jdp-icon-plus:hover,
jdp-container .jdp-icon-minus:hover {
  background: var(--primary-light);
  border-color: var(--primary-mid) !important;
}

jdp-container .jdp-icon-plus svg,
jdp-container .jdp-icon-minus svg {
  fill: var(--primary);
}

jdp-container .jdp-days-header {
  background-color: var(--primary-light) !important;
  border-radius: 8px;
  margin: 0.35rem 0.35rem 0 !important;
  width: calc(100% - 0.7rem) !important;
}

jdp-container .jdp-day-name {
  color: var(--primary) !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
}

jdp-container .jdp-day {
  font-weight: 500 !important;
  border-radius: 10px !important;
}

jdp-container .jdp-day.today {
  border-color: var(--primary-mid) !important;
  background: var(--primary-light);
  color: var(--primary) !important;
}

jdp-container .jdp-day.selected {
  background-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(38, 74, 52, 0.28);
}

jdp-container .jdp-day:not(.disabled-day):hover {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  transform: scale(1.08);
}

jdp-container .jdp-day.last-week,
jdp-container .jdp-day.holiday-day,
jdp-container .jdp-day.holly-day,
jdp-container .jdp-day-name.last-week {
  color: var(--error) !important;
}

jdp-container .jdp-day.selected.last-week,
jdp-container .jdp-day.selected.holiday-day,
jdp-container .jdp-day.selected.holly-day {
  color: #fff !important;
}

jdp-container .jdp-footer {
  padding: 0.55rem 0.65rem 0.15rem !important;
  gap: 0.4rem;
}

jdp-container .jdp-btn-today,
jdp-container .jdp-btn-empty,
jdp-container .jdp-btn-close {
  background: var(--primary) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  padding: 0.4em 0.75em !important;
  transition: background 0.15s ease;
}

jdp-container .jdp-btn-today:hover,
jdp-container .jdp-btn-empty:hover,
jdp-container .jdp-btn-close:hover {
  background: var(--primary-hover) !important;
}

jdp-container .jdp-btn-empty {
  background: var(--bg) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border);
}

jdp-container .jdp-btn-empty:hover {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  border-color: transparent;
}

jdp-container .jdp-btn-close {
  background: var(--accent-cta) !important;
  color: #1C2434 !important;
}

jdp-container .jdp-btn-close:hover {
  background: var(--accent) !important;
}

jdp-container .jdp-time-container {
  padding: 0.35rem 0.5rem 0.15rem !important;
  gap: 0.25rem;
}

jdp-container .jdp-time-container .jdp-time select {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  padding: 0.45rem 0.65rem !important;
}

jdp-container .jdp-time-container .jdp-time:after {
  color: var(--text-secondary);
  font-weight: 700;
}

#insightDateFrom,
#insightDateTo {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23264A34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.85rem center;
  background-size: 1.05rem;
  padding-left: 2.4rem;
}

.users-table tbody tr { cursor: default; }
.users-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.user-form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
}

@media (max-width: 600px) {
  .kpi-grid, .kpi-grid-4, .kpi-grid-5, .kpi-grid-3 { grid-template-columns: 1fr; }
  .seg-dict-grid { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 90px 1fr 42px; }
  .stepper { justify-content: flex-start; }
  .step .step-label { display: none; }
  .step.active .step-label { display: inline; }
}

/* ---------- Cron visual picker (scheduled messages) ---------- */
.cron-kind-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.cron-kind-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.9rem 0.85rem 0.85rem;
  border-radius: 16px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px rgba(28, 36, 52, 0.05);
  text-align: right;
  color: var(--text);
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  min-height: 132px;
}

.cron-kind-card:hover {
  background: #EAF3ED;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.cron-kind-card.is-selected {
  background: var(--primary-light);
  box-shadow: 0 8px 22px rgba(38, 74, 52, 0.10), inset 0 0 0 1.5px rgba(38, 74, 52, 0.2);
}

.cron-kind-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.85);
  color: var(--primary-mid);
  margin-bottom: 0.35rem;
}

.cron-kind-card.is-selected .cron-kind-icon {
  background: var(--primary);
  color: #fff;
}

.cron-kind-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.cron-kind-title {
  font-weight: 700;
  font-size: 0.92rem;
}

.cron-kind-desc {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.cron-kind-expr {
  margin-top: auto;
  padding-top: 0.45rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  color: var(--primary-mid);
  direction: ltr;
  opacity: 0.85;
}

.cron-live-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
  border-radius: 14px;
  background: linear-gradient(120deg, #EAF5EE 0%, #FFF8DC 100%);
  box-shadow: inset 0 0 0 1px rgba(38, 74, 52, 0.08);
}

.cron-live-label {
  display: inline-block;
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-left: 0.45rem;
}

.cron-live-main strong {
  font-size: 0.98rem;
}

.cron-live-expr {
  direction: ltr;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px rgba(38, 74, 52, 0.12);
}

.cron-detail-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.cron-interval-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.cron-chip {
  min-width: 2.4rem;
  height: 2rem;
  padding: 0 0.65rem;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
  font-size: 0.85rem;
  box-shadow: inset 0 0 0 1px rgba(28, 36, 52, 0.08);
}

.cron-chip:hover {
  background: #EAF3ED;
}

.cron-chip.is-selected {
  background: var(--primary);
  color: #fff;
  box-shadow: none;
}

.cron-weekdays {
  margin-bottom: 0.85rem;
}

.cron-weekday-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.cron-day-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  width: 3.15rem;
  min-height: 3.35rem;
  padding: 0.35rem 0.2rem;
  border-radius: 14px;
  background: var(--bg);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(28, 36, 52, 0.06);
  transition: background 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}

.cron-day-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cron-day-chip span {
  font-weight: 700;
  font-size: 0.95rem;
}

.cron-day-chip small {
  font-size: 0.62rem;
  color: var(--text-secondary);
}

.cron-day-chip:has(input:checked),
.cron-day-chip.is-selected {
  background: var(--primary-light);
  box-shadow: inset 0 0 0 1.5px rgba(38, 74, 52, 0.22);
  color: var(--primary);
}

.cron-day-chip:has(input:checked) small,
.cron-day-chip.is-selected small {
  color: var(--primary-mid);
}

.cron-enabled-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.92rem;
}

@media (max-width: 1100px) {
  .cron-kind-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .cron-kind-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cron-kind-card {
    min-height: 118px;
  }
}