/*
 * components.css — ручные стили для Tailwind-классов,
 * используемых динамически в JS render-файлах.
 *
 * Контекст: tailwind.css скомпилирован без @tailwind base (без Preflight).
 * Preflight устанавливает глобально border-style: solid и border-width: 0,
 * что позволяет утилитам border-t, border-b и др. работать корректно.
 * Без него браузер использует border-style: none — рамки не отображаются.
 */


/* ================================================
   FIX: border-style для Tailwind border-утилит
   Без @tailwind base (Preflight) браузер использует border-style: none,
   поэтому утилиты border-t / border-b не показывают рамок.
   Добавляем border-style только к классам установки ШИРИНЫ рамки —
   именно они активируют рамку, цветовые классы style не нужен.
   Решает: разделители строк WHOIS, DNS, IP, SSL, Email, Traceroute.
================================================ */
.border   { border-style: solid; }
.border-t { border-top-style: solid; }
.border-b { border-bottom-style: solid; }
.border-l { border-left-style: solid; }
.border-r { border-right-style: solid; }


/* ================================================
   Статус-бейджи Ping / Traceroute
   Собираются динамически: `${baseClass} ${tones[tone]}`
   Tailwind-сканер не всегда гарантирует их наличие в compiled CSS.
================================================ */
.text-rose-300           { color: #fda4af; }
.text-cyan-200           { color: #a5f3fc; }

.border-cyan-500\/40     { border-color: rgb(6 182 212 / 0.4); }
.border-emerald-500\/40  { border-color: rgb(16 185 129 / 0.4); }
.border-rose-500\/40     { border-color: rgb(244 63 94 / 0.4); }

.bg-cyan-500\/10         { background-color: rgb(6 182 212 / 0.1); }
.bg-emerald-500\/10      { background-color: rgb(16 185 129 / 0.1); }
.bg-rose-500\/10         { background-color: rgb(244 63 94 / 0.1); }


/* ================================================
   Traceroute: анимация hop-строк
   Классы добавляются/убираются через JS classList
================================================ */
.opacity-0     { opacity: 0; }
.opacity-70    { opacity: 0.7; }
.translate-y-2 { transform: translateY(0.5rem); }

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-300  { transition-duration: 300ms; }


/* ================================================
   Traceroute: заголовок таблицы (desktop)
================================================ */
.text-\[11px\] { font-size: 11px; }
.uppercase     { text-transform: uppercase; }
.pb-2          { padding-bottom: 0.5rem; }
.leading-5     { line-height: 1.25rem; }

@media (min-width: 768px) {
  .md\:grid { display: grid; }
}


/* ================================================
   Traceroute: last:border-0 (нижняя строка)
================================================ */
.last\:border-0:last-child { border-width: 0; }


/* ================================================
   WHOIS: raw-блок
================================================ */
.max-h-64        { max-height: 16rem; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-auto { overflow-x: auto; }


/* ================================================
   index.html: кнопочный блок рядом с input
================================================ */
.border-cyan-600\/20 { border-color: rgb(8 145 178 / 0.2); }
.bg-slate-800\/20    { background-color: rgb(30 41 59 / 0.2); }

.hover\:shadow-\[0_0_10px_rgba\(6\,182\,212\,0\.25\)\]:hover {
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.25);
}