/* =============================================================================
   Responsivo — celulares e tablets
   Carregado depois de volt.css e beholder.css; mantém a identidade visual e só
   adapta layout, navegação e alvos de toque para telas menores.
   Breakpoints (Bootstrap 5): sm 576 · md 768 · lg 992 · xl 1200
   ============================================================================= */

/* ── Gráfico TradingView (altura por faixa de tela) ── */
.tv-chart-card { height: 520px; }

img, svg, video { max-width: 100%; }

/* ── Barra superior + menu em gaveta (< 992px) ── */
.mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: 56px;
}

.mobile-topbar .navbar-toggler {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 32px;
    height: 32px;
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.sidebar-backdrop.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease;
}

/* o menu ocupa a altura toda e rola quando os itens não cabem (barra oculta
   pelo beholder.css) — nunca corta itens nem ultrapassa a tela */
.sidebar {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
}

@media (max-width: 991.98px) {
    /* o Volt deixa o .sidebar fixo em tela cheia abaixo de 992px e cobre o
       conteúdo; aqui ele vira uma gaveta, fechada por padrão */
    .sidebar {
        display: block;
        width: 85%;
        max-width: 300px;
        z-index: 1045;
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
    }

    .sidebar.show {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.25s ease;
    }

    body.sidebar-aberta { overflow: hidden; }

    /* alvos de toque maiores no menu (mín. 44px) */
    .sidebar .nav-link {
        padding: 0.7rem 0.75rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .tv-chart-card { height: 440px; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .sidebar.show,
    .sidebar-backdrop,
    .sidebar-backdrop.show { transition: none; }
}

/* ── Desktop: botão de recolher/expandir (menu só com ícones) ── */
.sidebar-collapse-btn {
    position: absolute;
    top: 18px;
    right: 10px;
    z-index: 2;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #4b5563;
    border-radius: 0.375rem;
    background: #1f2937;
    color: #9ca3af;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.sidebar-collapse-btn:hover,
.sidebar-collapse-btn:focus-visible {
    background: #374151;
    color: #ffffff;
    outline: none;
}

/* recolhido: o botão fica centralizado abaixo do logo */
.sidebar.contracted .sidebar-collapse-btn {
    position: static;
    margin: 0.75rem auto 0;
}

/* item de menu desativado (ex.: WebHooks) */
.sidebar .nav-item.disabled .nav-link,
.sidebar .nav-item.disabled .nav-link:hover {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: transparent;
    color: #ffffff;
}

/* recolhido: esconde o bloco de dados do usuário (só texto) */
.sidebar.contracted .nav-item.px-2.py-3 { display: none; }

/* ── Tablets (< 768px) ── */
@media (max-width: 767.98px) {
    .content { padding: 0 0.75rem; }

    .tv-chart-card { height: 380px; }

    /* cabeçalhos de página: título e ações quebram linha sem estourar */
    .content h1.h4,
    .content h2.h4 { font-size: 1.15rem; margin-bottom: 0.25rem; }

    .btn-toolbar { flex-wrap: wrap; gap: 0.5rem; }

    .card-body { padding: 1rem; }
    .card-header { padding: 0.75rem 1rem; }

    /* formulários em coluna única ganham respiro entre os campos */
    .content .row > [class*="col-12"] + [class*="col-12"] { margin-top: 0.5rem; }

    /* badges de índices não reservam espaço lateral fixo */
    .divScrollBadges { margin-right: 0; }

    /* tabelas: rolagem horizontal suave dentro do card */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .table { font-size: 0.8rem; }
    .table td, .table th { padding-left: 0.5rem; padding-right: 0.5rem; }

    /* InfoBlock: ícone e texto mais compactos */
    .icon-shape { width: 2.75rem; height: 2.75rem; }
    .card h3.fw-bolder { font-size: 1.25rem; }

    /* paginação pode quebrar linha */
    .pagination { flex-wrap: wrap; }
}

/* ── Celulares (< 576px) ── */
@media (max-width: 575.98px) {
    /* padding = meio gutter do Bootstrap (0,75rem), para as .row não vazarem */
    .tv-chart-card { height: 320px; }

    /* botões e campos com altura mínima para toque */
    .content .btn:not(.btn-close),
    .content .form-control,
    .content .form-select { min-height: 42px; }

    /* ações do cabeçalho ocupam a largura toda */
    .btn-toolbar > * { flex: 1 1 auto; }

    /* modais quase em tela cheia */
    .modal-dialog { margin: 0.5rem; }

    /* chat do Beholder: botão menor e painel em tela cheia */
    .float {
        width: 52px;
        height: 52px;
        bottom: 16px;
        right: 16px;
        font-size: 24px;
    }

    .offcanvas-custom {
        width: 100%;
        right: -100%;
        border-radius: 0;
    }
}

/* ── Dispositivos de toque ── */
@media (hover: none) and (pointer: coarse) {
    .table-hover > tbody > tr:hover > * { --bs-table-accent-bg: transparent; }
    .form-check-input { width: 1.25em; height: 1.25em; }
}