/* ============================================================================
   Padrao MLTEC — Sidebar / Menu  (identidade visual UNICA dos portais web)
   ----------------------------------------------------------------------------
   Fonte de verdade: framework-web/css/mltec-layout.css  — cada projeto COPIA
   este arquivo para o seu ./css/ e o carrega DEPOIS do adminlte e ANTES do
   custom.css do projeto.

   FILOSOFIA: a base compacta e' o AdminLTE 4 (rc7) STOCK. Este arquivo so
   ADICIONA o que o stock nao faz (scroll mobile sem OverlayScrollbars) e o
   tamanho do logo. NAO reimplementar seta/treeview/hover aqui nem no custom.css
   do projeto — quem cuida disso e' o AdminLTE stock (e e' o que garante a
   identidade com o ML MES). Regra de ouro: NAO inflar o menu.

   Referencia visual: ML MES.

   HTML esperado no shell (app.html):
     <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
       <div class="sidebar-brand">
         <a href="#..." class="brand-link">
           <img class="brand-image" src="logo">     <!-- ou <i class="brand-image bi bi-..."> -->
           <span class="brand-text fw-light">NOME</span>
         </a>
       </div>
       <div class="sidebar-wrapper">
         <nav class="mt-2">
           <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview"
               role="navigation" id="menu-sidebar"></ul>
         </nav>
       </div>
     </aside>
   ============================================================================ */

/* Scroll da sidebar em mobile (projetos sem OverlayScrollbars: Samsung Internet / WebView) */
.sidebar-wrapper {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 60px);
  max-height: calc(100dvh - 60px);
}

/* Marca (logo/icone + nome) — o unico ajuste de marca (tamanho do logo). */
.sidebar-brand .brand-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.sidebar-brand .brand-image {
  max-height: 33px;
  width: auto;
}

/* Itens do menu — COMPACTO (identico ao AdminLTE stock; anchors anti-inflar) */
.sidebar-menu .nav-link {
  padding: 0.5rem 1rem;
}
.sidebar-menu .nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  max-width: 1.5rem;
}

/* ── Seta (nav-arrow) e submenu (nav-treeview): 100% AdminLTE stock — NAO sobrescrever. ──
   A seta usa position:absolute + transform: translateY(-50%) e, no .menu-open, o stock
   aplica translateY(-50%) rotate(90deg). Se voce puser um transform proprio (ex.: so
   rotate(90deg)), o translateY some e a seta desalinha/torta ao abrir o menu. Idem o
   display/indentacao do treeview: deixe o stock cuidar para bater com o ML MES. */

/* ── Forms: floating-label sem "chip" de fundo nos inputs (igual ML MES) ─────────────────
   O Bootstrap standalone (mais novo) poe um ::after (background var(--bs-body-bg)) atras do
   label flutuante TAMBEM em <input>/<select>; no AdminLTE bundled do MES isso e' so para
   <textarea>. Neutralizamos nos inputs/selects para o label ficar limpo, identico ao MES.
   (Carregue este arquivo tambem no login.html.) */
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-select ~ label::after {
  content: none;
}
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after {
  content: none;
}
/* ============================================================================
   HUB DE CARDS da tela de entrada (js/home.js + #home-grid)
   ----------------------------------------------------------------------------
   Componente da CASA, nao marca do projeto — por isso mora aqui e nao no
   custom.css: ML MES, pituta e portal_mape tem que renderizar o MESMO card.
   Cada projeto escolhe apenas ONDE montar o grid (rota #home propria ou dentro
   da landing existente).
   ============================================================================ */
.home-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 120px;
  padding: 18px 10px;
  border: 1px solid #e3e6ea;
  border-radius: 12px;
  background: #fff;
  color: #344050;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease;
}

.home-card:hover,
.home-card:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(13, 110, 253, .18);
  border-color: #0d6efd;
  color: #0d6efd;
  outline: none;
}

.home-card i {
  font-size: 2.1rem;
  color: #0d6efd;
}

.home-card span {
  font-weight: 600;
  font-size: .95rem;
  text-align: center;
  line-height: 1.2;
}