/* ==========================================================================
   НЕОН И ДВИЖЕНИЕ

   Отдельный слой поверх style.css: там раскладка и цвет, здесь — характер.
   Разделены намеренно, чтобы правку оформления можно было откатить целиком,
   не задев вёрстку.

   Язык взят из видео агентства: чертёж, светящийся холодным цианом. Отсюда
   главный приём — угловые засечки, как регистрационные метки на
   архитектурном чертеже. Они загораются при наведении и служат единственной
   яркой деталью; всё остальное держится тихо.

   Осознанное ограничение: свечение живёт на управляющих элементах —
   навигации, кнопках, карточках. Таблицы с числами остаются спокойными.
   CRM смотрят по восемь часов в день, и неон под каждой строкой цифр
   превращает работу в мучение, а премиальность — в аляповатость.
   ========================================================================== */

:root {
    /* Ледяной циан из видео — холоднее и точнее прежнего фиолетового акцента. */
    --neon: #35e0f2;
    --tick: rgba(53, 224, 242, 0.62);
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Засечки: подпись всего оформления ---------- */

.home-card, .alert-card, .card, .tile, .home-stat {
    position: relative;
}

.home-card::after, .alert-card::after, .card::after,
.tile::after, .home-stat::after {
    content: "";
    position: absolute;
    inset: 9px;
    pointer-events: none;
    background:
        linear-gradient(var(--tick), var(--tick)) left  top    / 13px 1px no-repeat,
        linear-gradient(var(--tick), var(--tick)) left  top    / 1px 13px no-repeat,
        linear-gradient(var(--tick), var(--tick)) right top    / 13px 1px no-repeat,
        linear-gradient(var(--tick), var(--tick)) right top    / 1px 13px no-repeat,
        linear-gradient(var(--tick), var(--tick)) left  bottom / 13px 1px no-repeat,
        linear-gradient(var(--tick), var(--tick)) left  bottom / 1px 13px no-repeat,
        linear-gradient(var(--tick), var(--tick)) right bottom / 13px 1px no-repeat,
        linear-gradient(var(--tick), var(--tick)) right bottom / 1px 13px no-repeat;
    opacity: 0;
    transition: opacity 0.28s var(--ease), inset 0.28s var(--ease);
}
.home-card:hover::after, .alert-card:hover::after, .card:hover::after,
.tile:hover::after, .home-stat:hover::after {
    opacity: 1;
    inset: 6px;
}

/* ---------- Навигация ---------- */

.topnav a {
    position: relative;
    transition: color 0.2s var(--ease), background 0.2s var(--ease),
                border-color 0.2s var(--ease);
}
/* Линия снизу растёт от центра к краям — короткий и точный отклик. */
.topnav a::after {
    content: "";
    position: absolute;
    left: 50%; right: 50%; bottom: 4px;
    height: 1px;
    background: var(--neon);
    box-shadow: 0 0 8px var(--neon);
    transition: left 0.26s var(--ease), right 0.26s var(--ease);
}
.topnav a:hover::after { left: 14px; right: 14px; }
.topnav a.on::after { display: none; }

/* Текущий раздел дышит — еле заметно, чтобы глаз находил его без усилий. */
.topnav a.on { animation: nav-breathe 3.6s ease-in-out infinite; }
@keyframes nav-breathe {
    0%, 100% { box-shadow: 0 3px 14px rgba(139, 92, 246, 0.28); }
    50%      { box-shadow: 0 3px 22px rgba(139, 92, 246, 0.5),
                           0 0 0 1px rgba(53, 224, 242, 0.22); }
}

.brand { position: relative; }
.brand::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -5px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--neon), transparent);
    opacity: 0;
    transition: opacity 0.25s var(--ease);
}
.brand:hover::after { opacity: 1; }

/* ---------- Кнопки ---------- */

button, .btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* Блик пробегает поперёк один раз на наведение. Зацикливать не стал:
   мигающая кнопка в рабочем интерфейсе быстро начинает раздражать. */
button::after, .btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        transparent 32%, rgba(255, 255, 255, 0.26) 50%, transparent 68%);
    transform: translateX(-130%);
    transition: transform 0.6s var(--ease);
    pointer-events: none;
}
button:hover::after, .btn:hover::after { transform: translateX(130%); }
button:active, .btn:active { transform: translateY(1px); }

/* ---------- Переключатели и вкладки ---------- */

.viewswitch a, .tabs a, .chip {
    transition: color 0.2s var(--ease), background 0.2s var(--ease),
                border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.viewswitch a.on, .tabs a.on {
    box-shadow: 0 3px 16px rgba(139, 92, 246, 0.32),
                inset 0 0 0 1px rgba(53, 224, 242, 0.18);
}
.tabs a:not(.on):hover, a.chip:hover {
    border-color: rgba(53, 224, 242, 0.45);
    box-shadow: 0 0 14px rgba(53, 224, 242, 0.14);
}

/* ---------- Плитки и карточки ---------- */

.tile, .home-stat, .home-card, .card, .alert-card {
    transition: border-color 0.25s var(--ease), transform 0.25s var(--ease),
                box-shadow 0.25s var(--ease);
}
.tile:hover, .home-stat:hover {
    border-color: rgba(53, 224, 242, 0.42);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.34),
                0 0 22px rgba(53, 224, 242, 0.10);
}
.home-card:hover, .card:hover {
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4),
                0 0 26px rgba(53, 224, 242, 0.12);
}
/* Полоска сверху разгорается вместе с карточкой. */
.tile::before, .home-card::before, .card::before, .alert-card::before {
    transition: filter 0.25s var(--ease);
}
.tile:hover::before, .home-card:hover::before,
.card:hover::before, .alert-card:hover::before {
    filter: brightness(1.35) saturate(1.15);
}

/* ---------- Быстрые переходы ---------- */

.quick-row {
    position: relative;
    overflow: hidden;
    transition: border-color 0.22s var(--ease), transform 0.22s var(--ease),
                box-shadow 0.22s var(--ease);
}
/* Полоса света уезжает слева направо — та же логика, что у кнопок, но
   мягче: это переход, а не действие. */
.quick-row::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--neon);
    box-shadow: 0 0 10px var(--neon);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.26s var(--ease);
}
.quick-row:hover::before { transform: scaleY(1); }
.quick-row:hover {
    border-color: rgba(53, 224, 242, 0.42);
    transform: translateX(3px);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3),
                0 0 20px rgba(53, 224, 242, 0.10);
}
.quick-row .qr-go { transition: transform 0.26s var(--ease), color 0.22s var(--ease); }
.quick-row:hover .qr-go { transform: translateX(4px); color: var(--neon); }
.quick-row:hover .qr-icon { color: var(--neon); }
.quick-row.warn:hover .qr-icon { color: var(--amber); }
/* Подсвеченные строки при наведении держат свой цвет: если жёлтая и зелёная
   строки на секунду становятся бирюзовыми, глаз теряет, какая из них какая. */
.quick-row.good:hover .qr-icon { color: var(--green); }
.quick-row.good::before { background: var(--green); box-shadow: 0 0 10px var(--green); }
.quick-row.good:hover { border-color: rgba(52, 211, 153, 0.55); }

/* Число подсвечивается вместе со строкой — иначе при наведении оно
   выглядит отклеившимся от остального. */
.qr-num { transition: color 0.22s var(--ease), text-shadow 0.22s var(--ease); }
.quick-row.good:hover .qr-num { text-shadow: 0 0 14px rgba(52, 211, 153, 0.5); }

/* ---------- Строки таблиц ---------- */

/* Вместо свечения — тонкая метка слева: в плотной таблице она указывает на
   строку точнее, чем подсветка фона, и не мешает читать числа. */
tbody tr { transition: background 0.16s var(--ease), box-shadow 0.16s var(--ease); }
tbody tr:hover { box-shadow: inset 3px 0 0 var(--neon); }

/* ---------- Поля ввода ---------- */

input, select, textarea {
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
input:focus, select:focus, textarea:focus {
    border-color: rgba(53, 224, 242, 0.65);
    box-shadow: 0 0 0 3px rgba(53, 224, 242, 0.13),
                0 0 18px rgba(53, 224, 242, 0.12);
}

/* ---------- Появление при загрузке ---------- */

/* Один поставленный момент вместо разрозненных эффектов: сетки карточек
   всплывают лесенкой, дальше страница ведёт себя спокойно. */
@keyframes rise-in {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: none; }
}
.home-sections > *, .alert-grid > *, .tiles > *,
.staff-grid > *, .home-stats > * {
    animation: rise-in 0.5s var(--ease) both;
}
.home-sections > *:nth-child(1), .alert-grid > *:nth-child(1),
.tiles > *:nth-child(1), .staff-grid > *:nth-child(1),
.home-stats > *:nth-child(1) { animation-delay: 0.03s; }
.home-sections > *:nth-child(2), .alert-grid > *:nth-child(2),
.tiles > *:nth-child(2), .staff-grid > *:nth-child(2),
.home-stats > *:nth-child(2) { animation-delay: 0.09s; }
.home-sections > *:nth-child(3), .alert-grid > *:nth-child(3),
.tiles > *:nth-child(3), .staff-grid > *:nth-child(3),
.home-stats > *:nth-child(3) { animation-delay: 0.15s; }
.home-sections > *:nth-child(4), .alert-grid > *:nth-child(4),
.tiles > *:nth-child(4), .staff-grid > *:nth-child(4),
.home-stats > *:nth-child(4) { animation-delay: 0.21s; }
.tiles > *:nth-child(n+5), .staff-grid > *:nth-child(n+5) { animation-delay: 0.27s; }

/* ---------- Клавиатура ---------- */

/* Видимый фокус — не украшение, а условие того, что системой можно
   пользоваться без мыши. Держим его ярким и всегда поверх соседей. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--neon);
    outline-offset: 2px;
    border-radius: 6px;
    position: relative;
    z-index: 5;
}

/* ---------- Уважение к настройке «меньше движения» ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}