/* Раздел «Рассылки»: перенос блоков <style> из mailings.php и
   created-mailing.php. Имена классов оставлены как в оригинале, но всё
   заведено под .mailings-scope — в старой панели селекторы thead/th/td,
   .row и .box были глобальными и здесь передрались бы с общими стилями.

   Раскладку страниц задаёт общий слой (ui.css): шапка .page-head,
   сетка .detail-grid с прилипающей колонкой, .stats-grid, пустые
   состояния. Здесь остаётся только то, чего в общем слое нет. */

/* ===== кнопки и счётчик в шапке страницы ===== */

/* .btn-top-right из admin.css рассчитан на строку крошек: он несёт нижний
   отступ и остаётся строчным, потому что в оригинале лежал в <div>. В ряду
   действий шапки и в пустом состоянии это перекашивает строку. */
.mailings-scope .page-head__actions .btn-top-right,
.mailings-scope .empty__action .btn-top-right{
  display:inline-flex; align-items:center; margin-bottom:0;
}

/* Счётчик найденного рядом с действиями: в разделе нет фильтров, поэтому
   и панели инструментов, куда его обычно кладут, тоже нет. */
.mailings-scope .head-meta{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:var(--surface-3); border:1px solid var(--border);
  color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums;
}
.mailings-scope .head-meta i{ font-size:12px; opacity:.8 }

/* Главное действие раздела — общая .btn-primary из admin.css: она уже
   компактная, с волной от клика и состоянием disabled. Своей кнопки
   раздел не заводит. */

.mailings-scope .ml-stats{ margin-bottom:14px }

/* ===== список рассылок (mailings.php) ===== */
.mailings-scope .tbl-wrap{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.mailings-scope .tbl-scroll{
  overflow-x:auto; border-radius:inherit; -webkit-overflow-scrolling:touch;
}
.mailings-scope table.tbl{
  width:100%; min-width:1000px; border-collapse:collapse; color:var(--text); font-size:14px;
  /* ID и счётчики прогресса — числа: без табличных цифр колонки прыгают. */
  font-variant-numeric:tabular-nums;
}
.mailings-scope table.tbl thead{ background:rgba(255,255,255,.025); }
.mailings-scope table.tbl th{
  font-family:Roboto-Medium; font-size:12.5px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--border);
}
.mailings-scope table.tbl th,
.mailings-scope table.tbl td{ padding:12px 14px; text-align:center; white-space:nowrap; }
.mailings-scope table.tbl tbody tr{
  background:transparent; transition:background var(--fast);
}
.mailings-scope table.tbl tbody tr:hover{ background:rgba(255,255,255,.03); }
.mailings-scope table.tbl tbody tr:not(:last-child){ border-bottom:1px solid var(--border); }
/* Строка с пустым состоянием — не данные: подсветка и внутренние отступы
   ячейки ей не нужны, их несёт сам блок .empty. */
.mailings-scope table.tbl tbody tr.row-empty:hover{ background:transparent; }
.mailings-scope table.tbl tbody tr.row-empty td{ padding:0; white-space:normal; }

/* Кнопки строки. Подъёма при наведении нет: он был у каждой строки таблицы
   разом и вся колонка «Действия» дрожала под курсором. */
.mailings-scope .btn-blue,
.mailings-scope .btn-red{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:var(--radius-xs);
  border:1px solid transparent; cursor:pointer;
  font-size:13px;
  transition:filter var(--fast), background var(--fast), border-color var(--fast), color var(--fast), transform var(--fast);
}
.mailings-scope .btn-blue{ background:var(--accent); color:#fff; }
.mailings-scope .btn-red{ background:var(--bad-soft); color:var(--bad); }
.mailings-scope .btn-blue:hover{ filter:brightness(1.08); }
.mailings-scope .btn-red:hover{ background:var(--bad); color:#fff; }
.mailings-scope .btn-blue:active,
.mailings-scope .btn-red:active{ transform:scale(.985); }

/* Запуск рассылки пока некому выполнять — кнопка неактивна. Пунктир и
   курсор «нельзя» отличают её от просто приглушённой кнопки, а причина
   написана рядом в .why-off. */
.mailings-scope .btn-blue.is-off,
.mailings-scope .btn-blue.is-off:hover{
  background:transparent; color:var(--muted);
  border:1px dashed var(--border-strong);
  box-shadow:none; cursor:not-allowed; filter:none; transform:none;
}
.mailings-scope .why-off{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; color:var(--muted);
}
.mailings-scope .why-off i{ color:var(--warn); opacity:.8; }

/* Бейджи и счётчики без рамок: цветная рамка вокруг цветной подложки
   того же тона читалась как вторая, лишняя граница. Цвет несёт заливка. */
.mailings-scope .badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:104px; height:26px; padding:0 12px;
  border-radius:999px; font-size:12.5px; border:0;
}
.mailings-scope .b-sch{  background:var(--accent-soft); color:var(--accent); }
.mailings-scope .b-proc{ background:var(--warn-soft); color:var(--warn); }
.mailings-scope .b-done{ background:var(--good-soft); color:var(--good); }
.mailings-scope .b-canc{ background:var(--bad-soft); color:var(--bad); }
/* Статусов preparing_seed и seed_failed в маппинге старой панели не было —
   они выводились сырой латиницей в бесцветном бейдже. */
.mailings-scope .b-prep{ background:var(--surface-3); color:var(--muted); }
.mailings-scope .b-fail{ background:var(--bad-soft); color:var(--bad); }

.mailings-scope .pill{
  display:inline-flex; justify-content:center; align-items:center;
  min-width:42px; height:24px; padding:0 10px; border-radius:999px; font-size:12.5px;
  border:0; font-variant-numeric:tabular-nums;
}
.mailings-scope .pill-green{ color:var(--good); background:var(--good-soft); }
.mailings-scope .pill-red{   color:var(--bad); background:var(--bad-soft); }
.mailings-scope .pill-blue{  color:var(--accent); background:var(--accent-soft); }

.mailings-scope .cell-text{
  text-align:left; max-width:520px; overflow:hidden; text-overflow:ellipsis;
  color:var(--text-dim);
}
.mailings-scope .cell-progress{
  display:flex; justify-content:center; align-items:center; gap:6px;
  color:var(--muted);
}
.mailings-scope .cell-actions{
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.mailings-scope .cell-actions-row{ display:flex; gap:8px; justify-content:center; }

/* Честная подпись о том, чего панель пока не умеет. Заметной левой полосы
   в 3px больше нет: границы в разделе волосяные, а «обратите внимание»
   держит одна жёлтая иконка. */
.mailings-scope .ml-note{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:14px; padding:13px 15px; border-radius:var(--radius-sm);
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text-dim); font-size:13px; line-height:1.55;
}
.mailings-scope .ml-note b{ color:var(--text); }
.mailings-scope .ml-note > i{ color:var(--warn); font-size:14px; margin-top:2px; flex:none; }

/* ===== диалог подтверждения (замена SweetAlert2) ===== */
.mailings-scope .swal2-container{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
/* display:block задан явно. Общий /css/confirm-dialog.css остаётся в <head>
   после перехода с биллинга и раскладывает .swal2-popup колонкой флекса —
   тогда окно рассылок выглядело иначе, чем при прямом заходе. */
.mailings-scope .swal2-popup{
  display:block;
  background:var(--surface);
  color:var(--text);
  border-radius:var(--radius); border:1px solid var(--border);
  box-shadow:var(--shadow);
  padding:20px; width:min(420px,100%); text-align:center;
}
.mailings-scope .swal2-title{ font-family:Roboto-Medium; font-size:18px; color:var(--text); }
.mailings-scope .swal2-html-container{ font-size:14px; color:var(--text-dim); margin-top:8px; line-height:1.5; }
.mailings-scope .swal2-actions{ display:flex; gap:10px; justify-content:center; margin-top:18px; }
.mailings-scope .swal-btn-primary,
.mailings-scope .swal-btn-cancel{
  padding:10px 16px; border-radius:12px; border:1px solid transparent;
  font-family:Roboto-Medium; cursor:pointer; font-size:14px;
  transition:background var(--fast), border-color var(--fast), filter var(--fast), transform var(--fast);
}
.mailings-scope .swal-btn-primary{ background:var(--accent); color:#fff; }
.mailings-scope .swal-btn-primary:hover{ filter:brightness(1.08); }
.mailings-scope .swal-btn-primary:active{ transform:scale(.985); }
.mailings-scope .swal-btn-cancel{ background:var(--surface-3); color:var(--text); border-color:var(--border); }
.mailings-scope .swal-btn-cancel:hover{ background:var(--surface-hover); border-color:var(--border-strong); }
.mailings-scope .swal-btn-cancel:active{ transform:scale(.985); }
.mailings-scope .swal2-icon{
  width:48px; height:48px; margin:0 auto 12px;
  display:grid; place-items:center; border-radius:50%;
  font-size:20px; border:0;
}
.mailings-scope .swal2-icon-question{ color:var(--accent); background:var(--accent-soft); }
.mailings-scope .swal2-icon-warning{ color:var(--warn); background:var(--warn-soft); }
.mailings-scope .swal2-loader{
  width:36px; height:36px; margin:6px auto 0; border-radius:50%;
  border:4px solid; border-color:var(--accent) transparent var(--accent) transparent;
  animation:ml-spin 1s linear infinite;
}
@keyframes ml-spin{ to{ transform:rotate(360deg); } }

/* ===== создание рассылки (created-mailing.php) ===== */

/* Левая колонка — две карточки подряд: «Сообщение» и «Кнопка».
   align-content:start не даёт карточкам растянуться по высоте предпросмотра
   в соседней колонке. */
.mailings-scope .ml-form-col{ display:grid; gap:14px; align-content:start; min-width:0 }

.mailings-scope .box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
/* Заголовок карточки — просто строка 15px Roboto-Medium. Иконка в синем
   квадрате стояла на каждой карточке раздела, и от акцента рябило. */
.mailings-scope .box-header{
  display:flex; align-items:center; gap:9px;
  padding:13px 15px; border-bottom:1px solid var(--border);
  font-family:Roboto-Medium; font-size:15px; color:var(--text);
}
.mailings-scope .box-header i{ color:var(--muted); font-size:14px; flex:none; }
.mailings-scope .box-body{ padding:15px; }

/* Поля идут в колонку, подпись сверху — так форма читается сверху вниз
   без прыжков глазами по парам. */
.mailings-scope .row{
  display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:12px;
}
.mailings-scope .row:last-child{ margin-bottom:0; }
.mailings-scope .row .col{ min-width:0; }
.mailings-scope .row .col-full{ min-width:0; }

.mailings-scope label.lbl{
  display:block; font-size:12.5px; letter-spacing:.02em;
  color:var(--muted); margin-bottom:6px;
}
.mailings-scope .inp-adm-style{
  width:100%; min-height:42px;
  border:1px solid var(--border); background:var(--surface-3);
  padding:11px 13px; border-radius:12px; color:var(--text); font-size:15px;
  font-family:inherit; outline:none;
  transition:border-color var(--fast), background var(--fast), box-shadow var(--fast);
}
.mailings-scope .inp-adm-style:hover{ border-color:var(--border-strong); }
.mailings-scope .inp-adm-style:focus{
  border-color:var(--border-accent); background:var(--surface-hover);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.mailings-scope .inp-adm-style::placeholder{ color:var(--muted); }
.mailings-scope select.inp-adm-style{ cursor:pointer; color:var(--text-dim); }
.mailings-scope select.inp-adm-style option{ background:var(--surface); color:var(--text); }

.mailings-scope input[type="file"].inp-adm-style{
  display:flex; align-items:center; padding:7px 12px;
  background:var(--surface-2); color:var(--text-dim); font-size:13.5px;
  cursor:pointer;
}
/* В оригинале псевдоэлемент был написан как ::-file-selector-button —
   такого не существует, поэтому кнопка выбора файла оставалась системной
   белой. Правильные имена: стандартное и вебкитовское. */
.mailings-scope input[type="file"].inp-adm-style::file-selector-button{
  background:var(--surface-3); border:1px solid var(--border); color:var(--text);
  padding:8px 13px; border-radius:var(--radius-xs);
  margin-right:12px; cursor:pointer; font-family:inherit; font-size:13px;
  transition:background var(--fast), border-color var(--fast);
}
.mailings-scope input[type="file"].inp-adm-style::-webkit-file-upload-button{
  background:var(--surface-3); border:1px solid var(--border); color:var(--text);
  padding:8px 13px; border-radius:var(--radius-xs);
  margin-right:12px; cursor:pointer; font-family:inherit; font-size:13px;
  transition:background var(--fast), border-color var(--fast);
}
.mailings-scope input[type="file"].inp-adm-style:hover::file-selector-button{
  background:var(--surface-hover); border-color:var(--border-strong);
}
.mailings-scope input[type="file"].inp-adm-style:hover::-webkit-file-upload-button{
  background:var(--surface-hover); border-color:var(--border-strong);
}

/* Оговорка про неработающую отправку стоит под предпросмотром — там же,
   где виден результат, который никуда не уйдёт. */
.mailings-scope .submit-reason{
  display:flex; align-items:flex-start; gap:8px; margin-top:12px;
  font-size:12.5px; color:var(--muted); line-height:1.5;
}
.mailings-scope .submit-reason i{ color:var(--warn); margin-top:2px; flex:none; }

/* Панель форматирования редактора. Имя отличается от общего .toolbar
   из ui.css намеренно: это ряд кнопок внутри поля, а не полоса фильтров
   страницы, и правила общего слоя ей не подходят. */
.mailings-scope .editor-toolbar{
  display:flex; flex-wrap:wrap; gap:6px;
  background:var(--surface-2); padding:8px; border-radius:var(--radius-sm);
  border:1px solid var(--border); margin-bottom:8px;
}
/* Шесть кнопок в ряд: подъём под курсором дёргал всю панель, а акцент на
   иконке зажигался поочерёдно на каждой. Меняется только фон. */
.mailings-scope .tb-btn{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--surface-3); border:1px solid var(--border); color:var(--text-dim);
  border-radius:var(--radius-xs); padding:7px 10px; cursor:pointer; font-size:13px;
  font-family:inherit;
  transition:background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast);
}
.mailings-scope .tb-btn:hover{
  background:var(--surface-hover); color:var(--text);
  border-color:var(--border-strong);
}
.mailings-scope .tb-btn:active{ transform:scale(.97); }
.mailings-scope .tb-btn i{ color:var(--muted); transition:color var(--fast); }
.mailings-scope .tb-btn:hover i{ color:var(--text-dim); }

.mailings-scope .editor{
  min-height:190px; max-height:420px; overflow:auto;
  border-radius:var(--radius-sm); padding:12px 14px; background:var(--surface-2);
  border:1px solid var(--border);
  line-height:1.5; color:var(--text); outline:none;
  transition:border-color var(--fast), box-shadow var(--fast);
}
.mailings-scope .editor:hover{ border-color:var(--border-strong); }
.mailings-scope .editor:focus{
  border-color:var(--border-accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.mailings-scope .editor:empty:before{
  content: attr(data-placeholder);
  color:var(--muted);
}
.mailings-scope .editor a,
.mailings-scope .preview a{ color:var(--accent); text-decoration:underline; }

.mailings-scope .editor tg-spoiler,
.mailings-scope .preview tg-spoiler{
  position:relative; border-radius:var(--radius-xs); padding:0 3px;
}
/* Заливка ровная: градиент под скрытым текстом добавлял третий оттенок
   поверхности там, где нужен просто затёртый участок. */
.mailings-scope .editor tg-spoiler:not(.open),
.mailings-scope .preview tg-spoiler:not(.open){
  color: transparent;
  text-shadow: 0 0 8px rgba(255,255,255,.55);
  cursor:pointer;
  background: var(--surface-hover);
}
.mailings-scope .editor tg-spoiler:not(.open)::after,
.mailings-scope .preview tg-spoiler:not(.open)::after{
  content:'✨'; position:absolute; right:-10px; top:-10px; opacity:.95;
  animation:sparkle 1.6s linear infinite; pointer-events:none;
}
@keyframes sparkle{
  0%{ transform:translate(0,0) rotate(0) scale(1); opacity:.95; }
  50%{ transform:translate(-2px,-3px) rotate(20deg) scale(1.05); opacity:.75; }
  100%{ transform:translate(0,0) rotate(0) scale(1); opacity:.95; }
}
.mailings-scope .editor tg-spoiler.open,
.mailings-scope .preview tg-spoiler.open{
  color: inherit; text-shadow:none; background:var(--good-soft);
}

.mailings-scope .preview{
  min-height:200px; max-height:460px; overflow:auto;
  border-radius:var(--radius-sm); padding:12px 14px; background:var(--surface-2);
  border:1px solid var(--border);
  line-height:1.5; color:var(--text);
}
/* Прежние 40 % считались от широкой карточки на всю страницу; в боковой
   колонке столько же процентов дают марку вместо картинки. */
.mailings-scope .preview img{
  max-width:100%; height:auto; display:block;
  border-radius:var(--radius-sm); margin-bottom:12px;
  border:1px solid var(--border);
}
.mailings-scope .preview-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-press) 100%); color:#fff;
  padding:10px 15px; border-radius:var(--radius-sm); text-decoration:none;
  box-shadow:var(--shadow-accent);
  transition:filter var(--fast), transform var(--fast);
}
.mailings-scope .preview-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.mailings-scope .preview-btn:active{ transform:translateY(0) scale(.985); }
/* Кнопка лежит внутри .preview, где ссылки перекрашены в акцент и
   подчёркнуты, — синий текст на синей кнопке был нечитаем. */
.mailings-scope .preview a.preview-btn{ color:#fff; text-decoration:none; }

/* ===== карточка рассылки ===== */
.mailings-scope .ml-facts{ display:grid; }
.mailings-scope .ml-fact{
  display:grid; grid-template-columns:170px 1fr; gap:6px 14px;
  padding:10px 0; align-items:baseline;
  border-bottom:1px solid var(--border);
}
.mailings-scope .ml-fact:last-child{ border-bottom:0; }
.mailings-scope .ml-fact-label{ color:var(--muted); font-size:13.5px; }
.mailings-scope .ml-fact-value{
  color:var(--text); word-break:break-word; font-variant-numeric:tabular-nums;
}
@media (max-width: 600px){
  .mailings-scope .ml-fact{ grid-template-columns:1fr; gap:4px; }
  .mailings-scope .row .col{ min-width: 100%; }
}
.mailings-scope .ml-progress{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.mailings-scope .ml-missing{ color:var(--muted); font-size:13px; }