/* /opt/skynet-portal/app/static/css/logs.css */
/* v0.3.0 — бейджи-счётчики (SMS-центр) + строка быстрого периода */
/* 07.08.2026: .lg-stats 4 плитки, .quick-range пилюли — как в devbill SMS-центре */
/* 07.08.2026: v0.2.1 высота полей через padding (height резал текст селектов) */

/* =====================================================================
   Общие стили двух журналов (mikrotik_log_list, microimpuls_log_list).
   Подключается ГЛОБАЛЬНО в base.html: head_extra не переживает SPA-своп
   #main (hx-boost меняет только контент, <head> остаётся прежним).
   ===================================================================== */

/* --- Заголовок раздела: журналы плотнее общих страниц --- */
.lg-page .page-header { margin-bottom: var(--sp-4); }
.lg-page .page-title { font-size: var(--fs-xl); }
.lg-page .page-title svg { width: 20px; height: 20px; }

/* --- Мини-баннер push в заголовке --- */
.push-mini {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 4px var(--sp-3); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  font-weight: var(--fw-bold); letter-spacing: 0.05em;
}
.push-mini.is-on  { background: rgba(34,197,94,0.14); color: var(--success-text); }
.push-mini.is-off { background: rgba(234,179,8,0.14); color: var(--warning-text); }

/* --- Карточка фильтров ---
   auto-fit: на широком экране все фильтры укладываются в ОДНУ строку,
   на узком переносятся сами. Фиксированные колонки давали простыню
   в три ряда — этого быть не должно. */
.filters-card {
  background: var(--bg-surface);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-card);
}
.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-2) var(--sp-3);
  align-items: end;
}
@media (max-width: 479px) { .filters-grid { grid-template-columns: 1fr; } }

.filter-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.filter-cell.is-wide { grid-column: span 2; }
@media (max-width: 479px) { .filter-cell.is-wide { grid-column: span 1; } }

.filter-lbl {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--text-tertiary); text-transform: uppercase;
  letter-spacing: 0.04em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* Поля фильтра ниже стандартных.
   ВАЖНО: высоту убавляем ТОЛЬКО через padding. Жёсткий height ломает
   .select/.input из components.css — там высота считается от padding
   (--sp-3 сверху и снизу), и height:36px срезал текст пополам. */
.filters-card .input,
.filters-card .select {
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}
.filters-card .select { padding-right: var(--sp-8); }

/* Кнопки — последняя ячейка сетки, не отдельная строка */
.filter-actions {
  display: flex; gap: var(--sp-2);
  align-items: flex-end; justify-content: flex-end;
}
.filter-actions .btn {
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
  white-space: nowrap;
}

/* --- Быстрый период (пилюли, как в SMS-центре) --- */
.quick-range {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-2); margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: var(--border-thin) solid var(--border-subtle);
}
.quick-lbl {
  font-size: var(--fs-xs); color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: var(--fw-semibold); margin-right: var(--sp-1);
}
.quick-btn {
  padding: 5px var(--sp-3); border-radius: var(--radius-full);
  border: var(--border-thin) solid var(--border-default);
  background: var(--bg-surface-2); color: var(--text-secondary);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  cursor: pointer; white-space: nowrap;
  transition: all var(--transition-fast);
}
.quick-btn:hover { border-color: var(--border-accent); color: var(--text-primary); }
.quick-btn.is-on {
  background: var(--accent-soft); color: var(--accent-bright);
  border-color: var(--border-accent);
}

/* --- Бейджи-счётчики над таблицей --- */
.lg-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.lg-stat {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.lg-stat-ic {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--radius-md);
}
.lg-stat-ic svg { width: 20px; height: 20px; }
.lg-stat-ic.is-total  { background: rgba(99,102,241,0.14);  color: #818cf8; }
.lg-stat-ic.is-debt   { background: rgba(239,68,68,0.14);   color: var(--danger-text); }
.lg-stat-ic.is-manual { background: rgba(234,179,8,0.14);   color: var(--warning-text); }
.lg-stat-ic.is-on     { background: rgba(34,197,94,0.14);   color: var(--success-text); }
.lg-stat-ic.is-off    { background: rgba(239,68,68,0.14);   color: var(--danger-text); }
.lg-stat-ic.is-tariff { background: rgba(20,184,166,0.14);  color: #2dd4bf; }
.lg-stat-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lg-stat-num {
  font-family: var(--font-mono); font-size: var(--fs-lg);
  font-weight: var(--fw-bold); color: var(--text-primary);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.lg-stat-cap {
  font-size: var(--fs-xs); color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Теги операций MikroTik --- */
.op-tag {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  padding: 3px var(--sp-2); border-radius: var(--radius-sm);
  font-weight: var(--fw-semibold); white-space: nowrap;
}
.op-add_client      { background: rgba(59,130,246,0.14);  color: #60a5fa; }
.op-enable_tariff   { background: rgba(34,197,94,0.14);   color: var(--success-text); }
.op-disable_tariff  { background: rgba(239,68,68,0.14);   color: var(--danger-text); }
.op-delete_ip       { background: rgba(168,85,247,0.14);  color: #c084fc; }
.op-activate_by_mac { background: rgba(20,184,166,0.14);  color: #2dd4bf; }
.op-delete_mac      { background: rgba(244,114,182,0.14); color: #f472b6; }
.op-ping            { background: var(--bg-surface-2);    color: var(--text-secondary); }

/* --- Теги операций Smarty/Microimpuls --- */
.op-customer_create    { background: rgba(59,130,246,0.14);  color: #60a5fa; }
.op-account_create     { background: rgba(14,165,233,0.14);  color: #38bdf8; }
.op-account_modify     { background: rgba(234,179,8,0.14);   color: var(--warning-text); }
.op-account_activate   { background: rgba(34,197,94,0.14);   color: var(--success-text); }
.op-account_deactivate { background: rgba(239,68,68,0.14);   color: var(--danger-text); }
.op-tariff_assign      { background: rgba(20,184,166,0.14);  color: #2dd4bf; }
.op-tariff_remove      { background: rgba(244,114,182,0.14); color: #f472b6; }
.op-subnet_modify      { background: rgba(168,85,247,0.14);  color: #c084fc; }

/* --- Точка результата --- */
.succ-dot { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.succ-dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.succ-ok::before   { background: var(--success-text); box-shadow: 0 0 6px rgba(34,197,94,0.5); }
.succ-fail::before { background: var(--danger-text);  box-shadow: 0 0 6px rgba(239,68,68,0.5); }

/* --- Бейдж типа выполнения --- */
.exec-tag {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  padding: 2px var(--sp-2); border-radius: var(--radius-sm);
  background: var(--bg-surface-2); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.exec-tag.is-dry    { background: rgba(234,179,8,0.14);  color: var(--warning-text); }
.exec-tag.is-manual { background: rgba(99,102,241,0.14); color: #818cf8; }
.exec-tag.is-cron   { background: rgba(168,85,247,0.14); color: #c084fc; }

/* --- Таблица журнала --- */
.lg-table-wrap .table th,
.lg-table-wrap .table td { padding: var(--sp-2) var(--sp-3); vertical-align: middle; }
.lg-table-wrap .table tbody tr { transition: background var(--transition-fast); }
.lg-table-wrap .table tbody tr:hover { background: var(--bg-surface-2); }

/* Двухуровневая ячейка: главное сверху, уточнение снизу мелким */
.cell-stack { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cell-main {
  font-size: var(--fs-sm); color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cell-sub {
  font-size: var(--fs-xs); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cell-main.is-mono, .cell-sub.is-mono { font-family: var(--font-mono); }
.cell-main.is-link { color: var(--accent); }
.cell-main.is-link:hover { text-decoration: underline; }

.when-date { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-primary); }
.when-time { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }
.dur-ms {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-tertiary); font-variant-numeric: tabular-nums;
}
.ip-mono { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-secondary); }
.srv-link { font-weight: var(--fw-semibold); color: var(--text-primary); }
.srv-link:hover { color: var(--accent); }

/* Команда MikroTik — моноширинная, перенос по словам */
.cmd-cell {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-secondary); max-width: 300px;
  word-break: break-all; line-height: 1.4;
}

/* Строка ошибки под записью */
.err-cell {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--danger-text); white-space: normal; word-break: break-word;
}

/* Кнопка-глаз */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--border-default);
  background: var(--bg-surface); color: var(--text-secondary);
  transition: all var(--transition-fast);
}
.icon-btn:hover { border-color: var(--border-accent); color: var(--accent); }
.icon-btn svg { width: 14px; height: 14px; }

/* --- Карточки для мобильного --- */
.lg-cards { display: none; }
.lg-card {
  background: var(--bg-surface);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-card);
  padding: var(--sp-4); margin-bottom: var(--sp-3);
  display: block; text-decoration: none; color: inherit;
}
.lg-card-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-2); flex-wrap: wrap;
}
.lg-card-row {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-top: var(--border-thin) solid var(--border-subtle);
  font-size: var(--fs-sm);
}
.lg-card-row .lbl { color: var(--text-tertiary); flex-shrink: 0; }
.lg-card-row .val {
  text-align: right; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.lg-card-cmd {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-secondary); margin-top: var(--sp-2);
  word-break: break-all; line-height: 1.4;
}
.lg-card-err {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--danger-text); margin-top: var(--sp-2); word-break: break-all;
}

/* --- Пагинация --- */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-top: var(--sp-4); flex-wrap: wrap;
}
.pagination-info { font-size: var(--fs-sm); color: var(--text-muted); }
.pagination-controls { display: flex; align-items: center; gap: var(--sp-2); }
.page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 var(--sp-3);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--border-default);
  background: var(--bg-surface); color: var(--text-secondary);
  font-size: var(--fs-sm); transition: all var(--transition-fast);
}
.page-btn:hover { border-color: var(--border-accent); color: var(--text-primary); }
.page-btn.is-disabled { opacity: 0.4; pointer-events: none; }
.page-current {
  font-size: var(--fs-sm); color: var(--text-secondary);
  padding: 0 var(--sp-2); white-space: nowrap;
}

/* --- Пустое состояние --- */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: var(--sp-10) var(--sp-6); text-align: center;
}
.empty-state-icon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--radius-2xl);
  background: var(--bg-surface-2); color: var(--text-muted);
  margin-bottom: var(--sp-4);
}
.empty-state-icon svg { width: 28px; height: 28px; }
.empty-state-title {
  font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-secondary);
}
.empty-state-sub { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-2); }

/* --- Переключение таблица/карточки --- */
@media (max-width: 1279px) {
  .lg-table-wrap { display: none; }
  .lg-cards { display: block; }
}