/*
 * visy-2026.css
 * Tema "Visy 2026" (docs/layout/plataforma_2026.md, etapas 1-4).
 * Carregar POR ULTIMO no head.jsp (depois de dark-theme.css).
 * Reverter = remover o <link> deste arquivo.
 *
 * Tema claro = padrao. Escuro = html[data-bs-theme="dark"]
 * (alternado pelo menu do usuario; escolha salva em localStorage "visy-theme").
 *
 * ENCODING: ASCII (sem acentos neste arquivo).
 */

/* ================================================================
   1. TOKENS
   ================================================================ */
:root,
[data-bs-theme="light"] {
    --vz-bg:            #f5f8fd;
    --vz-surface:       #ffffff;
    --vz-surface-2:     #eef3fb;
    --vz-field:         #ffffff;
    --vz-line:          #e3eaf5;
    --vz-line-strong:   #cdd8ea;
    --vz-text:          #0b1f3a;
    --vz-muted:         #5b6b85;
    --vz-faint:         #8a98b0;
    --vz-primary:       #2f6bff;
    --vz-primary-hover: #1f56e0;
    --vz-accent:        #10b8d9;
    --vz-ok:            #1a9e66;
    --vz-warn:          #b7791f;
    --vz-danger:        #d63445;

    --vz-primary-rgb:   47, 107, 255;
    --vz-accent-rgb:    16, 184, 217;
    --vz-ok-rgb:        26, 158, 102;
    --vz-warn-rgb:      183, 121, 31;
    --vz-danger-rgb:    214, 52, 69;
    /* "tinta" para overlays sutis: escura no claro, branca no escuro */
    --vz-ink-rgb:       11, 31, 58;

    --vz-grad:          linear-gradient(120deg, #2f6bff, #10b8d9);
    --vz-on-primary:    #ffffff;
    --vz-shadow:        0 1px 2px rgba(11, 31, 58, 0.04), 0 4px 16px rgba(11, 31, 58, 0.06);
    --vz-shadow-lg:     0 10px 32px rgba(11, 31, 58, 0.14);
    --vz-radius:        14px;
    --vz-radius-sm:     10px;
    --vz-font:          'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --vz-sb-w:          248px;
    --vz-sb-w-collapsed: 76px;
    --vz-topbar-h:      64px;

    /* variaveis legadas do style.css */
    --body-font:         var(--vz-font);
    --first-color:       var(--vz-surface);
    --first-color-light: var(--vz-muted);
    --black-color:       var(--vz-text);
    --white-color:       var(--vz-surface);

    color-scheme: light;
}

[data-bs-theme="dark"] {
    --vz-bg:            #0a1426;
    --vz-surface:       #101d35;
    --vz-surface-2:     #16284a;
    --vz-field:         #0d1a31;
    --vz-line:          #22365c;
    --vz-line-strong:   #2e4775;
    --vz-text:          #e8eef8;
    --vz-muted:         #93a4c3;
    --vz-faint:         #5f7193;
    --vz-primary:       #3d7bff;
    --vz-primary-hover: #5a8fff;
    --vz-accent:        #19c6e6;
    --vz-ok:            #22c07d;
    --vz-warn:          #f5a524;
    --vz-danger:        #ef4b5b;

    --vz-primary-rgb:   61, 123, 255;
    --vz-accent-rgb:    25, 198, 230;
    --vz-ok-rgb:        34, 192, 125;
    --vz-warn-rgb:      245, 165, 36;
    --vz-danger-rgb:    239, 75, 91;
    --vz-ink-rgb:       255, 255, 255;

    --vz-shadow:        0 1px 2px rgba(0, 0, 0, 0.30), 0 6px 20px rgba(0, 0, 0, 0.22);
    --vz-shadow-lg:     0 12px 36px rgba(0, 0, 0, 0.50);

    color-scheme: dark;
}

/* ================================================================
   2. MAPEAMENTO PARA AS VARIAVEIS DO BOOTSTRAP 5.3
   (mesmos seletores do bootstrap.min.css; este arquivo vem depois)
   ================================================================ */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-font-family:      var(--vz-font);
    --bs-body-bg:               var(--vz-bg);
    --bs-body-color:            var(--vz-text);
    --bs-emphasis-color:        var(--vz-text);
    --bs-heading-color:         var(--vz-text);
    --bs-secondary-color:       var(--vz-muted);
    --bs-tertiary-color:        var(--vz-faint);
    --bs-secondary-bg:          var(--vz-surface-2);
    --bs-tertiary-bg:           var(--vz-surface-2);
    --bs-border-color:          var(--vz-line);
    --bs-border-color-translucent: var(--vz-line);
    --bs-border-radius:         var(--vz-radius-sm);
    --bs-border-radius-lg:      var(--vz-radius);

    --bs-primary:               var(--vz-primary);
    --bs-primary-rgb:           var(--vz-primary-rgb);
    --bs-info:                  var(--vz-accent);
    --bs-info-rgb:              var(--vz-accent-rgb);
    --bs-success:               var(--vz-ok);
    --bs-success-rgb:           var(--vz-ok-rgb);
    --bs-warning:               var(--vz-warn);
    --bs-warning-rgb:           var(--vz-warn-rgb);
    --bs-danger:                var(--vz-danger);
    --bs-danger-rgb:            var(--vz-danger-rgb);

    --bs-link-color:            var(--vz-primary);
    --bs-link-color-rgb:        var(--vz-primary-rgb);
    --bs-link-hover-color:      var(--vz-primary-hover);
    --bs-link-hover-color-rgb:  var(--vz-primary-rgb);

    --bs-focus-ring-color:      rgba(var(--vz-primary-rgb), 0.25);
    --bs-form-valid-color:      var(--vz-ok);
    --bs-form-valid-border-color: var(--vz-ok);
    --bs-form-invalid-color:    var(--vz-danger);
    --bs-form-invalid-border-color: var(--vz-danger);
}

[data-bs-theme="light"],
:root:not([data-bs-theme="dark"]) {
    --bs-body-bg-rgb:    245, 248, 253;
    --bs-body-color-rgb: 11, 31, 58;
}
[data-bs-theme="dark"] {
    --bs-body-bg-rgb:    10, 20, 38;
    --bs-body-color-rgb: 232, 238, 248;
}

/* ================================================================
   3. BASE
   ================================================================ */
body {
    background: var(--vz-bg);
    color: var(--vz-text);
    font-family: var(--vz-font);
}

h1, h2, h3, h4, h5, h6 { color: var(--vz-text); font-weight: 600; }
.text-dark  { color: var(--vz-text) !important; }
.text-muted { color: var(--vz-muted) !important; }

a { color: var(--vz-primary); }
a:hover { color: var(--vz-primary-hover); }

::selection { background: rgba(var(--vz-primary-rgb), 0.22); }

/* Scrollbar discreta nos dois temas */
::-webkit-scrollbar             { width: 8px; height: 8px; }
::-webkit-scrollbar-track       { background: transparent; }
::-webkit-scrollbar-thumb       { background: rgba(var(--vz-ink-rgb), 0.16); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--vz-ink-rgb), 0.28); }

#loading-wrapper .spinner-border { color: var(--vz-primary); }

/* Backdrop da gaveta (antes so existia no dark-theme.css) */
#sv-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 12, 26, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}
#sv-nav-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ================================================================
   4. CARTOES / PAINEIS
   ================================================================ */
.card {
    --bs-card-bg: var(--vz-surface);
    --bs-card-border-color: var(--vz-line);
    --bs-card-border-radius: var(--vz-radius);
    --bs-card-inner-border-radius: calc(var(--vz-radius) - 1px);
    --bs-card-cap-bg: var(--vz-surface-2);
    --bs-card-color: var(--vz-text);
    background-color: var(--vz-surface);
    border: 1px solid var(--vz-line);
    border-radius: var(--vz-radius);
    box-shadow: var(--vz-shadow);
}
.card-title { color: var(--vz-muted); letter-spacing: 0.4px; }

.mini-stat {
    background-color: var(--vz-surface);
    border: 1px solid var(--vz-line);
    border-radius: var(--vz-radius);
}
.mini-stat h4 { color: var(--vz-text); }

.bx-shadow,
.cai {
    box-shadow: var(--vz-shadow);
}
.cai {
    border: 1px solid var(--vz-line);
    border-radius: var(--vz-radius);
}

/* Titulo de pagina absorvido pela barra superior (ver funcoes.js) */
.vz-title-card { display: none !important; }

.tab-content {
    background: var(--vz-surface);
    color: var(--vz-text) !important;
    border: 1px solid var(--vz-line);
    border-top: 0;
    border-radius: 0 0 var(--vz-radius) var(--vz-radius);
}

/* Cabecalho de secao com icone: <h5 class="vz-section-title"><i ...></i> Titulo</h5> */
.vz-section-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--vz-text);
    margin-bottom: 1rem;
}
.vz-section-title > i {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px;
    color: var(--vz-primary);
    background: rgba(var(--vz-primary-rgb), 0.12);
}

/* ================================================================
   5. BOTOES
   ================================================================ */
.btn {
    --bs-btn-font-family: var(--vz-font);
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--vz-radius-sm);
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--vz-primary-rgb), 0.25);
    border-radius: var(--vz-radius-sm);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, filter .15s ease;
}
.btn:hover { box-shadow: none; }

.btn-primary {
    --bs-btn-color: var(--vz-on-primary);
    --bs-btn-bg: var(--vz-primary);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--vz-on-primary);
    --bs-btn-hover-bg: var(--vz-primary-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--vz-on-primary);
    --bs-btn-active-bg: var(--vz-primary-hover);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--vz-on-primary);
    --bs-btn-disabled-bg: var(--vz-primary);
    --bs-btn-disabled-border-color: transparent;
    background-image: var(--vz-grad);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(var(--vz-primary-rgb), 0.28);
}
.btn-primary:hover,
.btn-primary:focus-visible {
    filter: brightness(1.06);
    box-shadow: 0 6px 18px rgba(var(--vz-primary-rgb), 0.36);
}

.btn-secondary {
    --bs-btn-color: var(--vz-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--vz-line-strong);
    --bs-btn-hover-color: var(--vz-primary);
    --bs-btn-hover-bg: rgba(var(--vz-primary-rgb), 0.06);
    --bs-btn-hover-border-color: var(--vz-primary);
    --bs-btn-active-color: var(--vz-primary);
    --bs-btn-active-bg: rgba(var(--vz-primary-rgb), 0.12);
    --bs-btn-active-border-color: var(--vz-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--vz-primary);
    --bs-btn-border-color: var(--vz-primary);
    --bs-btn-hover-color: var(--vz-on-primary);
    --bs-btn-hover-bg: var(--vz-primary);
    --bs-btn-hover-border-color: var(--vz-primary);
    --bs-btn-active-bg: var(--vz-primary-hover);
    --bs-btn-active-border-color: var(--vz-primary-hover);
}
.btn-success {
    --bs-btn-bg: var(--vz-ok);
    --bs-btn-border-color: var(--vz-ok);
    --bs-btn-hover-bg: var(--vz-ok);
    --bs-btn-hover-border-color: var(--vz-ok);
}
.btn-danger {
    --bs-btn-bg: var(--vz-danger);
    --bs-btn-border-color: var(--vz-danger);
    --bs-btn-hover-bg: var(--vz-danger);
    --bs-btn-hover-border-color: var(--vz-danger);
}
.btn-success:hover, .btn-danger:hover { filter: brightness(1.08); }

/* ================================================================
   6. FORMULARIOS
   ================================================================ */
.form-label {
    color: var(--vz-muted);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.35rem;
}

.form-control,
.form-select {
    min-height: 42px;
    background-color: var(--vz-field);
    border: 1px solid var(--vz-line-strong);
    border-radius: var(--vz-radius-sm);
    color: var(--vz-text);
    font-size: 0.95rem;
}
textarea.form-control { min-height: 84px; }
.form-control-sm, .form-select-sm { min-height: 34px; }
.form-control::placeholder { color: var(--vz-faint); }

.form-control:focus,
.form-select:focus {
    background-color: var(--vz-field);
    color: var(--vz-text);
    border-color: var(--vz-primary);
    box-shadow: 0 0 0 0.22rem rgba(var(--vz-primary-rgb), 0.18);
}
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--vz-surface-2);
    color: var(--vz-muted);
}

.form-check-input {
    border-color: var(--vz-line-strong);
    background-color: var(--vz-field);
}
.form-check-input:checked {
    background-color: var(--vz-primary);
    border-color: var(--vz-primary);
}
.form-check-input:focus {
    border-color: var(--vz-primary);
    box-shadow: 0 0 0 0.22rem rgba(var(--vz-primary-rgb), 0.18);
}

.input-group-text {
    background-color: var(--vz-surface-2);
    border-color: var(--vz-line-strong);
    color: var(--vz-muted);
    border-radius: var(--vz-radius-sm);
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover {
    background-color: var(--vz-primary) !important;
    color: #fff !important;
}

/* ================================================================
   7. ABAS
   ================================================================ */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--vz-line);
    --bs-nav-tabs-link-active-color: var(--vz-primary);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--vz-primary);
    --bs-nav-link-color: var(--vz-muted);
    --bs-nav-link-hover-color: var(--vz-text);
    border-bottom: 1px solid var(--vz-line);
}
.nav-tabs .nav-link {
    font-weight: 500;
    border: 0;
    border-bottom: 2px solid transparent;
}
.nav-tabs .nav-link.active {
    color: var(--vz-primary);
    border-bottom-color: var(--vz-primary);
    background: transparent;
}
.nav.nav-tabs > li > a,
.nav.tabs-vertical > li > a {
    color: var(--vz-muted) !important;
}
.nav.nav-tabs > li > a.active,
.nav.nav-tabs > li > a:hover {
    color: var(--vz-primary) !important;
    background-color: transparent;
}

/* ================================================================
   8. TABELAS (cabecalho fixo + zebra suave)
   ================================================================ */
.table {
    --bs-table-color: var(--vz-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--vz-line);
    --bs-table-striped-bg: rgba(var(--vz-ink-rgb), 0.025);
    --bs-table-striped-color: var(--vz-text);
    --bs-table-hover-bg: rgba(var(--vz-primary-rgb), 0.06);
    --bs-table-hover-color: var(--vz-text);
    --bs-table-active-bg: rgba(var(--vz-primary-rgb), 0.08);
}
.table > thead > tr > th,
.table > thead > tr > td,
.table-show-users thead td,
.table-show-users thead th,
.table-tittle td,
.table-tittle th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--vz-surface-2);
    color: var(--vz-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.table > tbody > tr:nth-of-type(even) > *,
.table-show-users tbody tr:nth-of-type(even) > td {
    background-color: rgba(var(--vz-ink-rgb), 0.025);
}

/* ================================================================
   9. PILULAS DE STATUS
   <span class="vz-pill vz-pill-ok">Online</span>
   ================================================================ */
.vz-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
}
.vz-pill::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.vz-pill-ok     { color: var(--vz-ok);      background: rgba(var(--vz-ok-rgb), 0.12);      border-color: rgba(var(--vz-ok-rgb), 0.35); }
.vz-pill-warn   { color: var(--vz-warn);    background: rgba(var(--vz-warn-rgb), 0.12);    border-color: rgba(var(--vz-warn-rgb), 0.35); }
.vz-pill-danger { color: var(--vz-danger);  background: rgba(var(--vz-danger-rgb), 0.12);  border-color: rgba(var(--vz-danger-rgb), 0.35); }
.vz-pill-info   { color: var(--vz-primary); background: rgba(var(--vz-primary-rgb), 0.10); border-color: rgba(var(--vz-primary-rgb), 0.30); }
.vz-pill-muted  { color: var(--vz-muted);   background: rgba(var(--vz-ink-rgb), 0.06);     border-color: var(--vz-line); }

/* badges Bootstrap tambem em formato de pilula */
.badge { border-radius: 999px; font-weight: 600; }

/* ================================================================
   10. DROPDOWN / MODAL / PAGINACAO / ALERTAS / SWEETALERT
   ================================================================ */
.dropdown-menu {
    --bs-dropdown-bg: var(--vz-surface);
    --bs-dropdown-color: var(--vz-text);
    --bs-dropdown-border-color: var(--vz-line);
    --bs-dropdown-border-radius: var(--vz-radius-sm);
    --bs-dropdown-link-color: var(--vz-text);
    --bs-dropdown-link-hover-color: var(--vz-text);
    --bs-dropdown-link-hover-bg: var(--vz-surface-2);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--vz-primary);
    --bs-dropdown-divider-bg: var(--vz-line);
    --bs-dropdown-header-color: var(--vz-muted);
    box-shadow: var(--vz-shadow-lg);
    padding: 0.4rem;
}
.dropdown-item { border-radius: 8px; padding: 0.45rem 0.75rem; }

.modal {
    --bs-modal-bg: var(--vz-surface);
    --bs-modal-color: var(--vz-text);
    --bs-modal-border-color: var(--vz-line);
    --bs-modal-border-radius: var(--vz-radius);
    --bs-modal-inner-border-radius: calc(var(--vz-radius) - 1px);
    --bs-modal-header-border-color: var(--vz-line);
    --bs-modal-footer-border-color: var(--vz-line);
}

.pagination {
    --bs-pagination-color: var(--vz-muted);
    --bs-pagination-bg: var(--vz-surface);
    --bs-pagination-border-color: var(--vz-line);
    --bs-pagination-hover-color: var(--vz-text);
    --bs-pagination-hover-bg: var(--vz-surface-2);
    --bs-pagination-hover-border-color: var(--vz-line);
    --bs-pagination-active-bg: var(--vz-primary);
    --bs-pagination-active-border-color: var(--vz-primary);
    --bs-pagination-disabled-bg: var(--vz-surface);
    --bs-pagination-disabled-color: var(--vz-faint);
    --bs-pagination-disabled-border-color: var(--vz-line);
}

.alert { border-radius: var(--vz-radius-sm); }

.swal2-popup {
    border-radius: var(--vz-radius) !important;
    font-family: var(--vz-font) !important;
}
.swal2-styled.swal2-confirm {
    background: var(--vz-grad) !important;
    border-radius: var(--vz-radius-sm) !important;
}

/* ================================================================
   11. FOCO ACESSIVEL
   ================================================================ */
:focus-visible { outline: 2px solid rgba(var(--vz-primary-rgb), 0.6); outline-offset: 2px; }
.form-control:focus-visible,
.form-select:focus-visible,
.btn:focus-visible { outline: none; }

/* ===== Tipografia Inter / Inter Display (padrão do site, 2026-10-10) ===== */
html, body { font-optical-sizing: auto; }
h1, h2, h3, .h1, .h2, .h3 { font-family: var(--vz-font); font-optical-sizing: auto; font-weight: 700; }
h1, .h1, h2, .h2 { letter-spacing: -0.02em; }
h3, .h3, h4, .h4 { letter-spacing: -0.01em; }
/* tabelas e números: algarismos de largura fixa alinham as colunas */
table, .table, .vz-pill { font-variant-numeric: tabular-nums; }

/* Menu "Ações" dos cartões de câmera: largura pelo conteúdo (o texto
   "Análise IA em tempo real" passava da borda do menu). */
.btn-acoes + .dropdown-menu { min-width: max-content; }

/* Estado vazio das listas em grade (ex.: Eventos sem resultado): ocupa a linha inteira */
.vz-empty-state {
    grid-column: 1 / -1; width: 100%; text-align: center;
    padding: 40px 16px; color: var(--vz-muted);
}
.vz-empty-state i { font-size: 28px; opacity: .55; margin-bottom: 10px; display: block; }
.vz-empty-state p { max-width: 560px; margin: 0 auto; font-size: 15px; line-height: 1.5; }