/* Brand kit You Solucoes aplicado ao NetBox 4.5.
 *
 * Paleta oficial: navy #001A61 e #0A1240 (fundo real de modo escuro), salmao
 * #F09879, terracota #C95E5C. Fonte Plus Jakarta Sans. Nunca roxo.
 *
 * O NetBox usa Tabler (Bootstrap 5), entao quase tudo sai de variaveis CSS
 * "--tblr-*", com um tema claro e um escuro selecionados por
 * [data-bs-theme]. Este arquivo so redefine essas variaveis: nada da imagem do
 * container e alterado, o nginx injeta o link deste CSS em cada pagina.
 *
 * Regra que nao se quebra: cor semantica de status (verde, vermelho, azul,
 * amarelo de badge de device, cabo, IP, alerta) fica como o NetBox entrega. Se
 * a marca repintar status, o analista le o inventario errado. Aqui so muda a
 * moldura: sidebar, fundo, acao primaria, link, foco, tipografia e logo.
 */

/* --------------------------------------------------------------------------
 * Tipografia (auto-hospedada, sem chamada ao Google Fonts no navegador)
 * -------------------------------------------------------------------------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/PlusJakartaSans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/PlusJakartaSans-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/PlusJakartaSans-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/PlusJakartaSans-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/PlusJakartaSans-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/PlusJakartaSans-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
 * Tokens da marca
 * -------------------------------------------------------------------------- */
:root {
  --you-navy: #001A61;
  --you-navy-escuro: #0A1240;
  --you-salmao: #F09879;
  --you-terracota: #C95E5C;

  /* Superficies do modo escuro, derivadas do navy */
  --you-superficie: #101C52;
  --you-superficie-alta: #16255F;

  --tblr-font-sans-serif: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tblr-body-font-family: var(--tblr-font-sans-serif);
}

/* Tema claro: navy conduz link, foco e estado ativo */
:root,
[data-bs-theme="light"] {
  --tblr-primary: var(--you-navy);
  --tblr-primary-rgb: 0, 26, 97;
  --tblr-primary-fg: #ffffff;
  --tblr-link-color: var(--you-navy);
  --tblr-link-color-rgb: 0, 26, 97;
  --tblr-link-hover-color: #00248a;
  --tblr-body-bg: #f6f7fb;
  --tblr-focus-ring-color: rgba(0, 26, 97, 0.25);
}

/* Tema escuro: fundo navy da marca. O salmao conduz porque navy sobre navy some */
[data-bs-theme="dark"] {
  --tblr-primary: var(--you-salmao);
  --tblr-primary-rgb: 240, 152, 121;
  --tblr-primary-fg: var(--you-navy-escuro);
  --tblr-link-color: var(--you-salmao);
  --tblr-link-color-rgb: 240, 152, 121;
  --tblr-link-hover-color: #f7b7a0;
  --tblr-focus-ring-color: rgba(240, 152, 121, 0.4);

  --tblr-body-bg: var(--you-navy-escuro);
  --tblr-body-bg-rgb: 10, 18, 64;
  --tblr-bg-surface: var(--you-superficie);
  --tblr-bg-surface-primary: var(--you-superficie);
  --tblr-bg-surface-secondary: var(--you-navy-escuro);
  --tblr-bg-surface-tertiary: var(--you-superficie-alta);
  --tblr-bg-forms: var(--you-superficie-alta);
  --tblr-border-color: rgba(255, 255, 255, 0.12);
  --tblr-border-color-translucent: rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------------------------------------
 * Superficies do modo escuro
 *
 * O NetBox nao usa so variavel no modo escuro: ele fixa #001423 e #081b2a em
 * regras "html[data-bs-theme=dark] ..." e varias com !important. Por isso os
 * blocos abaixo repetem a mesma especificidade do original; sem isso o fundo
 * continua no verde-petroleo de fabrica.
 * -------------------------------------------------------------------------- */
html[data-bs-theme="dark"],
html[data-bs-theme="dark"] .navbar,
html[data-bs-theme="dark"] .page-header {
  background-color: var(--you-navy-escuro);
}

html[data-bs-theme="dark"] .page {
  background-color: var(--you-navy-escuro) !important;
}

html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .toast {
  background: var(--you-superficie) !important;
}

html[data-bs-theme="dark"] .table thead th,
html[data-bs-theme="dark"] .markdown > table thead th,
html[data-bs-theme="dark"] .page-tabs .nav-tabs .nav-link.active {
  background: var(--you-superficie-alta) !important;
}

/* O NetBox forca o texto da acao primaria no proprio verde-escuro; aqui volta
 * para o navy da marca, que e o par de contraste do salmao. */
html[data-bs-theme="dark"] .btn-primary,
html[data-bs-theme="light"] .btn-primary,
html[data-bs-theme="dark"] .text-bg-primary,
html[data-bs-theme="light"] .text-bg-primary {
  color: var(--you-navy-escuro) !important;
}

/* --------------------------------------------------------------------------
 * Sidebar: navy nos dois temas, a assinatura mais visivel da marca
 * -------------------------------------------------------------------------- */
html[data-bs-theme="light"] .navbar-vertical.navbar-expand-lg,
html[data-bs-theme="dark"] .navbar-vertical.navbar-expand-lg {
  background: linear-gradient(
      180deg,
      rgba(240, 152, 121, 0),
      rgba(240, 152, 121, 0.12)
    ),
    var(--you-navy);
}

.navbar-vertical {
  --tblr-navbar-bg: var(--you-navy);
  --tblr-bg-surface: var(--you-navy);
  --tblr-navbar-color: rgba(255, 255, 255, 0.72);
  --tblr-navbar-hover-color: #ffffff;
  --tblr-navbar-active-color: #ffffff;
  --tblr-navbar-active-bg: rgba(255, 255, 255, 0.1);
  --tblr-navbar-active-border-color: var(--you-salmao);
  --tblr-navbar-brand-color: #ffffff;
  --tblr-navbar-brand-hover-color: #ffffff;
  --tblr-body-color: rgba(255, 255, 255, 0.82);
  --tblr-border-color: rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="light"] .navbar-vertical.navbar-expand-lg .nav-link-title,
html[data-bs-theme="light"] .navbar-vertical.navbar-expand-lg .nav-link-icon,
html[data-bs-theme="light"] .navbar-vertical.navbar-expand-lg .dropdown-item a,
html[data-bs-theme="dark"] .navbar-vertical.navbar-expand-lg .nav-link-title,
html[data-bs-theme="dark"] .navbar-vertical.navbar-expand-lg .nav-link-icon,
html[data-bs-theme="dark"] .navbar-vertical.navbar-expand-lg .dropdown-item a {
  color: rgba(255, 255, 255, 0.86) !important;
}

html[data-bs-theme="light"] .navbar-vertical.navbar-expand-lg .text-secondary,
html[data-bs-theme="dark"] .navbar-vertical.navbar-expand-lg .text-secondary,
html[data-bs-theme="light"] .navbar-vertical.navbar-expand-lg .text-muted,
html[data-bs-theme="dark"] .navbar-vertical.navbar-expand-lg .text-muted {
  color: rgba(255, 255, 255, 0.55) !important;
}

html[data-bs-theme="light"] .navbar-vertical.navbar-expand-lg .text-muted a,
html[data-bs-theme="dark"] .navbar-vertical.navbar-expand-lg .text-muted a {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Marcador do item aberto: salmao no lugar do teal */
html[data-bs-theme="light"]
  .navbar-vertical.navbar-expand-lg
  .nav-item.dropdown.active:after,
html[data-bs-theme="dark"]
  .navbar-vertical.navbar-expand-lg
  .nav-item.dropdown.active:after {
  border-color: var(--you-salmao) !important;
}

html[data-bs-theme="light"]
  .navbar-vertical.navbar-expand-lg
  .dropdown-item.active,
html[data-bs-theme="light"]
  .navbar-vertical.navbar-expand-lg
  .dropdown-item:hover,
html[data-bs-theme="dark"]
  .navbar-vertical.navbar-expand-lg
  .dropdown-item.active,
html[data-bs-theme="dark"]
  .navbar-vertical.navbar-expand-lg
  .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link:focus {
  background-color: rgba(255, 255, 255, 0.06);
}

.navbar-vertical .nav-link.active {
  box-shadow: inset 3px 0 0 var(--you-salmao);
}

/* Logo You no lugar do logo NetBox. O arquivo em si e trocado no nginx; aqui so
 * o tamanho, porque o lockup da You e quadrado e o do NetBox era horizontal. */
.navbar-brand-image {
  height: 4.5rem;
  width: auto;
}

.navbar-vertical .navbar-brand {
  padding-top: 1.15rem;
}

/* A sidebar e navy nos dois temas, entao ela sempre pede o logo claro. O NetBox
 * escolhe entre as duas variantes pelo tema da pagina, o que no tema claro
 * traria o logo navy e sumiria o "you" sobre o fundo navy. */
html[data-bs-theme="light"] .navbar-vertical .navbar-brand-image.hide-theme-dark {
  display: none !important;
}

html[data-bs-theme="light"] .navbar-vertical .navbar-brand-image.hide-theme-light {
  display: inline-block !important;
}

/* "Community" abaixo do logo: rotulo de edicao do NetBox, sem sentido sob a
 * marca da You. */
.netbox-edition {
  display: none !important;
}

/* --------------------------------------------------------------------------
 * Acao primaria em salmao com texto navy, nos dois temas
 * -------------------------------------------------------------------------- */
.btn-primary {
  --tblr-btn-bg: var(--you-salmao);
  --tblr-btn-color: var(--you-navy-escuro);
  --tblr-btn-hover-bg: #e8805e;
  --tblr-btn-hover-color: var(--you-navy-escuro);
  --tblr-btn-active-bg: #e8805e;
  --tblr-btn-active-color: var(--you-navy-escuro);
  --tblr-btn-disabled-bg: var(--you-salmao);
  --tblr-btn-disabled-color: var(--you-navy-escuro);
  --tblr-btn-border-color: transparent;
  --tblr-btn-hover-border-color: transparent;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
 * Campos de formulario: foco na cor da marca
 * -------------------------------------------------------------------------- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--you-navy);
  box-shadow: 0 0 0 0.25rem rgba(0, 26, 97, 0.15);
}

html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus,
html[data-bs-theme="dark"] .form-check-input:focus {
  border-color: var(--you-salmao);
  box-shadow: 0 0 0 0.25rem rgba(240, 152, 121, 0.25);
}

.form-check-input:checked {
  background-color: var(--you-navy);
  border-color: var(--you-navy);
}

html[data-bs-theme="dark"] .form-check-input:checked {
  background-color: var(--you-salmao);
  border-color: var(--you-salmao);
}

/* --------------------------------------------------------------------------
 * Tela de login
 * -------------------------------------------------------------------------- */
.page-center .logo {
  height: 132px !important;
  width: auto;
}

/* Faixa de assinatura da You, preenchida pelo BANNER_LOGIN do NetBox */
.you-login-assinatura {
  font-family: var(--tblr-font-sans-serif);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--you-navy);
}

[data-bs-theme="dark"] .you-login-assinatura {
  color: var(--you-salmao);
}

.you-login-assinatura .you-login-sub {
  display: block;
  margin-top: 0.35rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  font-size: 0.85rem;
  color: var(--tblr-secondary);
}

/* Cartao do login com um fio da marca no topo */
.page-center .card {
  border-top: 3px solid var(--you-salmao);
}

html[data-bs-theme="dark"] .page-center .card {
  background: var(--you-superficie) !important;
}