/* Complemento do visual legado: grids, formulários e responsividade.
   Mantém o desktop idêntico ao legado; adiciona comportamento mobile. */

/* ---------- Grid (listagens) ---------- */
.liion-grid-wrap { overflow-x: auto; }
.liion-grid {
  border-collapse: collapse;
  width: 100%;
  background: #fff;
  font-size: 12px;
  font-family: Tahoma, Arial, sans-serif;
}
.liion-grid th {
  background: #1565C0;
  color: #fff;
  text-align: left;
  padding: 7px 8px;
  font-weight: bold;
  white-space: nowrap;
}
.liion-grid td {
  padding: 6px 8px;
  border-bottom: 1px solid #d6e4f0;
  vertical-align: top;
}
.liion-grid tbody tr:nth-child(even) td { background: #eef6ff; }
.liion-grid tbody tr:hover td { background: #d8ecff; }

/* ---------- Botões / toolbar ---------- */
.liion-btn {
  display: inline-block;
  background: #1565C0;
  color: #fff;
  padding: 6px 12px;
  text-decoration: none;
  font-size: 12px;
  font-family: Tahoma, Arial, sans-serif;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}
.liion-btn:hover { background: #0D47A1; }
.liion-btn-secondary { background: #6c7a89; }
.liion-btn-secondary:hover { background: #55606b; }
.liion-link { color: #0057B8; text-decoration: none; }
.liion-link:hover { text-decoration: underline; }
.liion-linkbtn {
  background: none; border: none; color: #c0392b; cursor: pointer;
  font: inherit; padding: 0; text-decoration: none;
}
.liion-linkbtn:hover { text-decoration: underline; }
.liion-toolbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ---------- Busca ---------- */
.liion-searchbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.liion-searchbar input[type=text] {
  flex: 1 1 320px; max-width: 480px;
  padding: 6px 8px; border: 1px solid #9bbde0; font-size: 13px;
}

/* ---------- Formulário ---------- */
.liion-form { background: #fff; padding: 16px; max-width: 920px; }
.liion-fieldset { border: 1px solid #cfe0f0; margin: 0 0 14px; padding: 12px 14px; }
.liion-fieldset legend { font-weight: bold; color: #0D47A1; font-size: 13px; padding: 0 6px; }
.liion-form .row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 10px; }
.liion-form .field { display: flex; flex-direction: column; flex: 1 1 240px; }
.liion-form label { font-size: 12px; font-weight: bold; margin-bottom: 4px; }
.liion-form input[type=text],
.liion-form input[type=email],
.liion-form input[type=password],
.liion-form select {
  padding: 6px; border: 1px solid #9bbde0; font-size: 13px;
  font-family: Tahoma, Arial, sans-serif;
  width: 100%;
  box-sizing: border-box;
}
.liion-pager { margin-top: 10px; display: flex; gap: 12px; align-items: center; font-size: 12px; }
.liion-pager a { color: #0057B8; text-decoration: none; }
.liion-pager a:hover { text-decoration: underline; }

/* ---------- Botão hambúrguer (só mobile) ---------- */
.menu-toggle {
  display: none;
  background: #1565C0; color: #fff; border: none;
  font-size: 16px; font-weight: bold; padding: 12px 16px; width: 100%;
  text-align: left; cursor: pointer;
}

/* ---------- Responsividade ---------- */
@media (max-width: 1080px) {
  .liion-header { flex-wrap: wrap; min-height: auto; padding: 10px 14px; }
  .liion-brand-name { font-size: 1.4rem; }

  .menu-toggle { display: block; }

  #cssmenu { height: auto; }
  #cssmenu > ul { float: none; display: none; }
  #cssmenu.open > ul { display: block; }
  #cssmenu > ul > li { float: none; width: 100%; }
  #cssmenu a {
    display: block; line-height: normal; padding: 12px 16px; font-size: 14px;
  }
  #cssmenu > ul > li > a { border-bottom: 1px solid #e0e0e0; }

  /* submenus viram acordeão em QUALQUER profundidade.
     !important vence as regras de desktop (position:absolute; left:100%) que têm
     especificidade maior nos níveis aninhados. */
  #cssmenu ul ul {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    display: none !important;
  }
  #cssmenu li.expanded > ul { display: block !important; }
  #cssmenu .has-sub ul li a { padding-left: 32px; }
  #cssmenu .has-sub .has-sub ul li a { padding-left: 48px; }
  #cssmenu .has-sub .has-sub .has-sub ul li a { padding-left: 64px; }

  /* desliga os triângulos/hover do desktop no mobile */
  #cssmenu > ul > li:hover:after,
  #cssmenu > ul > li.active:after { display: none; }

  /* seta indicativa nos itens com submenu */
  #cssmenu .has-sub > a > span::after { content: ' ▸'; opacity: .6; }
  #cssmenu li.expanded > a > span::after { content: ' ▾'; }

  .liion-main { padding: 12px; }
  .liion-form { padding: 12px; }
}