/* Правки поверх темы light-bootstrap-dashboard (подключать после нее) */

/* Неактивные кнопки: тема делает их прозрачными с белым текстом - текст не виден.
   Оставляем цвет кнопки, только тусклее. Контурные (.btn-outline) не трогаем. */
.btn[disabled]:not(.btn-outline),
.btn.disabled:not(.btn-outline) {
    color: #FFFFFF !important;
    opacity: 0.45;
}
.btn-primary[disabled]:not(.btn-outline), .btn-primary.disabled:not(.btn-outline) { background-color: #447DF7 !important; border-color: #447DF7 !important; }
.btn-success[disabled]:not(.btn-outline), .btn-success.disabled:not(.btn-outline) { background-color: #87CB16 !important; border-color: #87CB16 !important; }
.btn-info[disabled]:not(.btn-outline),    .btn-info.disabled:not(.btn-outline)    { background-color: #23CCEF !important; border-color: #23CCEF !important; }
.btn-warning[disabled]:not(.btn-outline), .btn-warning.disabled:not(.btn-outline) { background-color: #FFA534 !important; border-color: #FFA534 !important; }
.btn-danger[disabled]:not(.btn-outline),  .btn-danger.disabled:not(.btn-outline)  { background-color: #FB404B !important; border-color: #FB404B !important; }

/* Кнопки с иконкой для мобильной версии:
   <button class="btn ..." title="Текст"><i class="btn-ico fa-solid fa-..."></i><span class="btn-txt">Текст</span></button>
   На десктопе - текст, на телефоне - иконка. */
.btn .btn-ico { display: none; }

/* Отступ перед отдельной группой кнопок */
.btn-group-sep { margin-left: 2rem; }

@media (max-width: 767px) {
    .btn .btn-ico { display: inline-block; }
    .btn .btn-txt { display: none; }
    .btn-group-sep { margin-left: 1rem; }
}

/* Строка таблицы устройства не в сети (HNet / Устройства) */
.dev-offline { background-color: #fdd; }

/* Событие шлюза в логе устройства (HNet / Устройство / Лог) */
.devlog-event { background-color: #fff3cd; }

/* Видео / Просмотр: кадр камеры на всю ширину блока, с сохранением пропорций */
[hnet-video] img,
[hnet-video] video {
    display: block;
    width: 100%;
    height: auto;
}

/* Камера без сигнала: вместо кадра шум, строки развертки, бегущая полоса и "NO SIGNAL" */
[hnet-video] { position: relative; }
[hnet-video].hnet-video-off img,
[hnet-video].hnet-video-off video { display: none; }

.hnet-video-nosignal {
    display: none;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111;
}
[hnet-video].hnet-video-off .hnet-video-nosignal { display: block; }

.hnet-video-nosignal canvas {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    filter: contrast(1.3) brightness(0.9);
}

.hnet-video-nosignal::before,
.hnet-video-nosignal::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    pointer-events: none;
}
.hnet-video-nosignal::before {
    top: 0; bottom: 0;
    background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.25) 0, rgba(0,0,0,0.25) 1px, transparent 1px, transparent 3px);
}
.hnet-video-nosignal::after {
    top: -30%;
    height: 30%;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.12) 50%, transparent);
    animation: hnet-video-roll 3.5s linear infinite;
}
@keyframes hnet-video-roll {
    from { transform: translateY(0); }
    to   { transform: translateY(433%); }
}

.hnet-video-nosignal-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    padding: 0.3em 0.9em;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    font-size: clamp(14px, 4vw, 32px);
    letter-spacing: 0.2em;
    text-shadow: 2px 0 rgba(255,0,0,0.6), -2px 0 rgba(0,200,255,0.6);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .hnet-video-nosignal::after { animation: none; }
}

/* Система / Документация */
.hnet-docs h1 { font-size: 1.6rem; margin-top: 0; }
.hnet-docs h2 { font-size: 1.3rem; margin-top: 1.5rem; }
.hnet-docs pre { background: rgba(127, 127, 127, 0.1); padding: 0.75rem; border-radius: 0.25rem; font-size: 85%; }
.hnet-docs pre code { background: transparent; padding: 0; color: inherit; }
.hnet-docs table { width: auto; margin-bottom: 1rem; }
.hnet-docs-toc .list-group-item { padding: 0.5rem 0.75rem; font-size: 0.9rem; }

/* MTable: перетаскивание строк (sortable) */
.mtable-sortable tbody tr[mtable-row] { cursor: move; }
.mtable-sortable tr.ui-sortable-helper { background: rgba(127, 127, 127, 0.15); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.mtable-sortable tr.mtable-placeholder td { background: rgba(127, 127, 127, 0.12); border: 1px dashed rgba(127, 127, 127, 0.6); }

/* Ползунок (hnet-widget-slider), по виду как bootstrap-switch */
.hnet-slider { display: inline-flex; align-items: center; gap: 8px; height: 26px; vertical-align: middle; user-select: none; }
.hnet-slider-track {
    position: relative; display: inline-block; width: 160px; height: 13px;
    border-radius: 30px; background-color: #cfcfca; cursor: pointer; touch-action: none;
}
.hnet-slider-fill {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0;
    border-radius: 30px; background-color: #23CCEF;
}
.hnet-slider-knob {
    position: absolute; top: -4.5px; left: 2px; width: 22px; height: 22px; border-radius: 12px;
    background-color: #FFFFFF; box-shadow: 0 1px 1px #FFFFFF inset, 0 1px 1px rgba(0, 0, 0, 0.25);
}
.hnet-slider:not(.hnet-slider-drag) .hnet-slider-knob { transition: left 0.25s ease-out; }
.hnet-slider:not(.hnet-slider-drag) .hnet-slider-fill { transition: width 0.25s ease-out; }
.hnet-slider-value { min-width: 3.5em; font-size: 14px; }
.hnet-slider-disabled { opacity: 0.6; }
.hnet-slider-disabled .hnet-slider-track { cursor: default; }