/*
 * Tema VTech Solutions - overrides de variaveis do Bootstrap 5.
 * Paleta neutra e moderna, mantendo o azul como cor primaria da marca.
 * Carregado depois do bootstrap.min.css em todas as paginas migradas.
 */

:root {
  /* Paleta oficial VTech Solutions (kit global do site institucional) */
  --bs-primary: #ff7a00;
  --bs-primary-rgb: 255, 122, 0;
  --bs-primary-text-emphasis: #b35600;
  --bs-primary-bg-subtle: #ffe8d1;
  --bs-primary-border-subtle: #ffc48a;

  --bs-secondary: #54595f;
  --bs-secondary-rgb: 84, 89, 95;

  --bs-success: #16a34a;
  --bs-info: #0891b2;
  --bs-warning: #d97706;
  --bs-danger: #dc2626;

  --bs-body-bg: #f5f5f5;
  --bs-body-color: #2b2b2b;
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.375rem;
  --bs-border-radius-lg: 0.75rem;

  --vt-sidebar-bg: #0b1020;
  --vt-sidebar-bg-active: #ff7a00;
  --vt-sidebar-text: #cbd5e1;
  --vt-sidebar-text-active: #ffffff;
  --vt-card-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
}

body {
  background-color: var(--bs-body-bg);
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-color: #000000;
  --bs-btn-hover-bg: #e56d00;
  --bs-btn-hover-border-color: #e56d00;
  --bs-btn-hover-color: #000000;
  --bs-btn-active-bg: #e56d00;
  --bs-btn-active-border-color: #e56d00;
  --bs-btn-active-color: #000000;
  font-weight: 700;
}

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

.card,
.x_panel {
  border: 0;
  border-radius: var(--bs-border-radius);
  box-shadow: var(--vt-card-shadow);
}

/*
 * Correcoes de compatibilidade BS3 -> BS5 para o "shell" das paginas internas
 * (sidebar fixo + conteudo), herdado do template Gentelella:
 *
 * 1) .container no Bootstrap 5 (igual ao 3) limita a largura maxima e
 *    centraliza com margem automatica a partir de certos breakpoints.
 *    O Gentelella usa a classe "container" so como nome, esperando largura
 *    total (100%) - por isso o sidebar aparecia deslocado e sobrava espaco
 *    em branco nas laterais.
 */
.container.body {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/*
 * 2) .navbar-nav no Bootstrap 5 e "flex-direction: column" por padrao
 *    (pensado para dentro de um componente <nav class="navbar"> completo,
 *    que o menu superior do Gentelella nao usa). Isso fazia cada item do
 *    menu superior (Sair / usuario / ambiente / data-hora) cair numa linha.
 */
.top_nav .navbar-nav {
  flex-direction: row;
  justify-content: flex-end;
}

/*
 * 3) O BS3 usava .navbar-right (float:right) para empurrar o menu do
 *    usuario para a direita, dentro de um <nav> que ficava em bloco
 *    normal. O BS5 nao tem mais .navbar-right, entao o menu ficava
 *    "solto" perto do centro. Vira flex, com o icone de colapsar o menu
 *    na esquerda e o menu do usuario na direita.
 */
.top_nav .nav_menu nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/*
 * 4) Mesmo motivo do .navbar-nav (item 2): .nav no Bootstrap 5 tambem e
 *    flex por padrao. O menu lateral (ul.side-menu) e os submenus
 *    (ul.child_menu) esperam empilhar os itens verticalmente, como bloco
 *    normal - por isso "Inicio" e "Tarefas" apareciam lado a lado.
 */
.side-menu,
.child_menu {
  display: block;
}

/*
 * 5) .form-horizontal / .control-label / .form-group eram componentes do
 *    Bootstrap 3 (usados em ~20 telas de cadastro/alteracao) e foram
 *    removidos no BS5. Recriando aqui o essencial do comportamento
 *    original (rotulo alinhado a direita e recuado, espacamento entre
 *    campos) em vez de reescrever o HTML de cada formulario.
 */
.form-group {
  margin-bottom: 10px;
}
/*
 * O :not([class*="col-"]) abaixo distingue os dois usos de .form-group
 * nas telas migradas:
 *  - "invólucro de linha" (telas de cadastro/alteração): .form-group SEM
 *    classe col-*, contendo label + div.col-* como filhos — precisa da
 *    margem negativa para simular o .row do BS3 (cancela o padding do
 *    filho encostado na borda).
 *  - "a própria coluna" (telas de abrir/fechar OS): .form-group JUNTO
 *    com col-md-6 no mesmo elemento — aplicar a margem negativa aqui
 *    cancelava o padding lateral da propria coluna e colava os 2 campos
 *    lado a lado sem gutter nenhum entre eles.
 */
.form-horizontal .form-group:not([class*="col-"]) {
  margin-right: -15px;
  margin-left: -15px;
}
.form-horizontal .form-group::before,
.form-horizontal .form-group::after {
  content: "";
  display: table;
}
.form-horizontal .form-group::after {
  clear: both;
}
@media (min-width: 768px) {
  .form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: right;
  }
}
/*
 * O BS3 dava margin-bottom:5px a QUALQUER <label>, mesmo sem classe.
 * O BS5 so aplica essa margem em .form-label. Algumas telas (abrir/fechar
 * OS) usam <label> sem classe direto acima do campo (ex.: <label>Ambiente
 * </label>) e ficaram coladas no campo abaixo por causa dessa diferenca.
 */
.form-group label:not(.control-label) {
  display: inline-block;
  margin-bottom: 0.5rem;
}

/*
 * 6) O BS5 remove a seta nativa de TODO <select> (regra propria do
 *    framework, nao so em .form-select) mas so desenha a seta customizada
 *    via background-image na classe .form-select. As telas legadas usam
 *    <select class="form-control">, entao ficavam sem nenhuma seta visivel.
 *    Recriando aqui a mesma seta do .form-select para select.form-control.
 */
select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  padding-right: 2.25rem;
}

/*
 * 7) Botoes de filtro por status (Abertas/Fechadas/Canceladas/Todas/Meus
 *    Chamados/Reabertas) das telas de Ordem de Servico. Antes eram
 *    btn-dark/btn-primary/btn-danger/btn-success/btn-info (cores puras do
 *    Bootstrap, muito saturadas) - trocado por contorno colorido + icone,
 *    uma cor por significado, escolhida junto com o usuario (18/08/2026).
 */
.btn-status {
  background: #fff;
  border-width: 1.5px;
  border-style: solid;
  border-radius: 6px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px 8px 12px;
}
.btn-status:hover {
  color: #fff;
}
.btn-status-abertas { color: #185fa5; border-color: #185fa5; }
.btn-status-abertas:hover { background: #185fa5; }
.btn-status-fechadas { color: #5f5e5a; border-color: #5f5e5a; }
.btn-status-fechadas:hover { background: #5f5e5a; }
.btn-status-canceladas { color: #993c1d; border-color: #993c1d; }
.btn-status-canceladas:hover { background: #993c1d; }
.btn-status-todas { color: #0f6e56; border-color: #0f6e56; }
.btn-status-todas:hover { background: #0f6e56; }
.btn-status-meus { color: #534ab7; border-color: #534ab7; }
.btn-status-meus:hover { background: #534ab7; }
.btn-status-reabertas { color: #854f0b; border-color: #854f0b; }
.btn-status-reabertas:hover { background: #854f0b; }

/*
 * 8) Mesmo padrao (contorno + icone) aplicado ao botao unico de CTA das
 *    telas de confirmacao (OK/Consultar Chamados/Cadastrar novo X/Imprimir),
 *    na cor laranja da marca em vez do preenchimento solido antigo
 *    (btn-primary). Extensao do padrao acima, pedida pelo usuario (19/08/2026).
 */
.btn-status-cta {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn-status-cta:hover {
  background: var(--bs-primary);
}

/*
 * 9) Variante pequena, para botoes de acao por item dentro de uma lista/card
 *    (ex.: Chamado/Concluir/Cancelar de cada tarefa em adm_cadastro_tarefa.php).
 *    Reaproveita as cores de .btn-status-* (nao precisa de cor propria).
 */
.btn-status-sm {
  padding: 4px 10px 4px 8px;
  font-size: 12px;
  gap: 5px;
}

/*
 * 10) Modal "Deseja cancelar o chamado?" (consulta_os admin/usuario): a
 *     largura padrao do BS5 (~500px) ficou grande demais pro conteudo curto,
 *     e os botoes ficavam alinhados a direita (padrao do .modal-footer).
 *     Reduz a largura e centraliza os botoes.
 */
.bs-example-modal-sm .modal-dialog {
  max-width: 380px;
}
.bs-example-modal-sm .modal-footer {
  justify-content: center;
}