/* ==========================================================================
   PADRÃO OFICIAL ESTOQUE TECKTRONIX (SIMETRIA ESQUERDA & DIREITA)
   Fundo: #F5B027 | Botões Menu: #CE7E00 | Botões Ação: #2c3e50 | Texto: #FFFFFF
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CABEÇALHO / TOPO TECKTRONIX (LOGO NATIVA + BANNER À DIREITA)
   -------------------------------------------------------------------------- */
.container-header,
header.header {
  background-color: #F5B027 !important;
  background-image: none !important;
  border-bottom: 4px solid #ffffff !important; /* Divisória branca de destaque */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  padding: 10px 0 !important;
}

/* Mantém Logo e Banner lado a lado na mesma linha sem deformar */
.container-header .container-fluid,
.container-header .header-inner,
.container-header .site-grid,
.container-header .grid-child {
  max-width: var(--cassiopeia-grid-max-width, 1320px) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;
}

/* Logo Oficial - Tamanho Nativo e Destravado */
.container-header .navbar-brand,
.container-header .site-logo {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.container-header .navbar-brand img,
.container-header .site-logo img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  max-width: 100% !important;
}

.container-header .site-description {
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin-top: 4px !important;
  line-height: 1.2 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Banner à Direita */
.container-header .mod-banners,
.container-header .bannergroup,
.container-header .header-banner-rotativo {
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-shrink: 0 !important;
}

.container-header .banneritem img,
.container-header .bannergroup img {
  display: block !important;
  height: auto !important;
  max-height: 65px !important;
  width: auto !important;
  border-radius: 4px !important;
}

/* --------------------------------------------------------------------------
   2. PAINÉIS LATERAIS (ESQUERDO E DIREITO COM FUNDO #F5B027)
   -------------------------------------------------------------------------- */
/* Lateral Esquerda */
.container-sidebar-left,
.sidebar-left,
aside.sidebar-left {
  background-color: #F5B027 !important;
  padding: 12px !important;
  border-radius: 6px !important;
  margin-top: 6px !important;
  border-right: 4px solid #ffffff !important; /* Divisória vertical branca */
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Lateral Direita (Simetria) */
.container-sidebar-right,
.sidebar-right,
aside.sidebar-right {
  background-color: #F5B027 !important;
  padding: 12px !important;
  border-radius: 6px !important;
  margin-top: 6px !important;
  border-left: 4px solid #ffffff !important;  /* Divisória vertical branca à esquerda */
  box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Moldura interna branca que envolve os blocos/módulos */
.container-sidebar-left .card,
.sidebar-left .card,
.container-sidebar-left .mod-menu,
.container-sidebar-right .card,
.sidebar-right .card,
.container-sidebar-right .mod-menu,
.container-sidebar-right .mod-custom,
.container-sidebar-right .mod-login {
  background-color: transparent !important;
  border: 2px solid #ffffff !important;
  border-radius: 6px !important;
  padding: 12px 10px !important;
  margin-bottom: 12px !important;
  box-shadow: none !important;
}

.container-sidebar-left .card-body,
.sidebar-left .card-body,
.container-sidebar-right .card-body,
.sidebar-right .card-body {
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   3. TÍTULOS DOS MENUS E MÓDULOS LATERAIS ("ESTOQUE TECKTRONIX", "DIVULGAÇÃO", ETC.)
   -------------------------------------------------------------------------- */
.container-sidebar-left h1,
.container-sidebar-left h2,
.container-sidebar-left h3,
.container-sidebar-left .card-title,
.sidebar-left h1,
.sidebar-left h2,
.sidebar-left h3,
.container-sidebar-right h1,
.container-sidebar-right h2,
.container-sidebar-right h3,
.container-sidebar-right .card-title,
.sidebar-right h1,
.sidebar-right h2,
.sidebar-right h3 {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  text-transform: uppercase !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  letter-spacing: 0.5px !important;
  text-align: center !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* --------------------------------------------------------------------------
   4. BOTÕES DE MENU (#CE7E00 COM TEXTO BRANCO - AMBOS OS LADOS)
   -------------------------------------------------------------------------- */
.container-sidebar-left ul,
.sidebar-left ul,
.container-sidebar-right ul,
.sidebar-right ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.container-sidebar-left ul li,
.sidebar-left ul li,
.container-sidebar-right ul li,
.sidebar-right ul li {
  list-style: none !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
}

.container-sidebar-left a,
.sidebar-left a,
.container-sidebar-left .mod-menu a,
.sidebar-left .mod-menu a,
.container-sidebar-left .nav-link,
.sidebar-left .nav-link,
.container-sidebar-right a,
.sidebar-right a,
.container-sidebar-right .mod-menu a,
.sidebar-right .mod-menu a,
.container-sidebar-right .nav-link,
.sidebar-right .nav-link {
  background-color: #CE7E00 !important;
  color: #ffffff !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 14px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  border: 1px solid #b36b00 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s ease-in-out !important;
}

/* Efeito Hover com detalhe branco */
.container-sidebar-left a:hover,
.sidebar-left a:hover,
.container-sidebar-left .nav-link:hover,
.sidebar-left .nav-link:hover,
.container-sidebar-right a:hover,
.sidebar-right a:hover,
.container-sidebar-right .nav-link:hover,
.sidebar-right .nav-link:hover {
  background-color: #b56e00 !important;
  color: #ffffff !important;
  border-left: 5px solid #ffffff !important;
  padding-left: 18px !important;
}

/* Botão Ativo / Página Selecionada */
.container-sidebar-left .active > a,
.sidebar-left .active > a,
.container-sidebar-left .current > a,
.sidebar-left .current > a,
.container-sidebar-right .active > a,
.sidebar-right .active > a,
.container-sidebar-right .current > a,
.sidebar-right .current > a {
  background-color: #9e6000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

/* --------------------------------------------------------------------------
   5. FORMULÁRIO DE LOGIN E BOTÕES DE AÇÃO (#2c3e50 TECKTRONIX)
   -------------------------------------------------------------------------- */
.sidebar-right .form-control,
.container-sidebar-right .form-control {
  background-color: #ffffff !important;
  border: 1px solid #2c3e50 !important;
  color: #2c3e50 !important;
  font-weight: 600 !important;
}

.sidebar-right label,
.container-sidebar-right label,
.sidebar-right .form-check-label,
.container-sidebar-right .form-check-label {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Links auxiliares (Esqueceu a senha / usuário) */
.sidebar-right .mod-login a,
.container-sidebar-right .mod-login a {
  background-color: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
  border: none !important;
  padding: 2px 0 !important;
  font-size: 0.8rem !important;
  text-transform: none !important;
  text-decoration: underline !important;
}

.sidebar-right .mod-login a:hover,
.container-sidebar-right .mod-login a:hover {
  background-color: transparent !important;
  color: #2c3e50 !important;
  border: none !important;
  padding-left: 0 !important;
}

/* Botão Entrar e Botões de Submissão */
.login-form .btn,
.btn-primary,
button[type="submit"],
.btn-success {
  background-color: #2c3e50 !important;
  border: 1px solid #1a252f !important;
  color: #ffffff !important;
  font-weight: bold !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s ease-in-out !important;
}

.login-form .btn:hover,
.btn-primary:hover,
button[type="submit"]:hover,
.btn-success:hover {
  background-color: #1a252f !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}