/* =============================================================================
 * fg_style.bs5.css — CSS próprio NewSimples sobre Bootstrap 5
 * =============================================================================
 *
 * Substitui funcionalmente:
 *   - bootstrap_limitless.min.css  (105 KB, overrides Limitless sobre BS4)
 *   - colors.min.css               (51 KB, paleta Material Design Limitless)
 *   - components.min.css           (417 KB, componentes Limitless)
 *   - layout.min.css               (40 KB, sidebar, page-header, content)
 *   - fg_style.css                 (1.4 KB, custom NewSimples original)
 *
 * Mantém intacto:
 *   - loading.css      (loader independente)
 *   - icomoon/styles.css        (fontes de ícones)
 *   - fontawesome/styles.min.css (fontes de ícones)
 *
 * Paleta de cores: Material Design (mesma do Limitless) — cor primária
 * de ação é teal-400 (#26A69A), usada em ~16 botões inline hardcoded.
 *
 * Convenção:
 *   - Variáveis CSS namespaceadas: --fg-*
 *   - Classes Limitless replicadas mantêm o mesmo nome (compat retroativa
 *     com as ~2.570 ocorrências em views — não precisamos renomear nada)
 *
 * Plano: docs/UI_MIGRATION_BS5.md
 * Data:  2026-05-08
 * ============================================================================= */


/* =============================================================================
 * 1. CSS VARIABLES — Paleta Material/Limitless
 * ============================================================================= */

:root {
  /* Primary brand color (cor de ação principal — teal Material Design) */
  --fg-teal-300: #4DB6AC;
  --fg-teal-400: #26A69A;
  --fg-teal-500: #009688;
  --fg-teal-600: #00897B;
  --fg-teal-700: #00796B;
  --fg-teal-800: #00695C;

  /* Material palette completa (espelha colors.css do Limitless) */
  --fg-primary-300: #64B5F6;
  --fg-primary-400: #42A5F5;
  --fg-primary-600: #1E88E5;
  --fg-primary-700: #1976D2;
  --fg-primary-800: #1565C0;

  --fg-danger-300: #E57373;
  --fg-danger-400: #EF5350;
  --fg-danger-600: #E53935;
  --fg-danger-700: #D32F2F;
  --fg-danger-800: #C62828;

  --fg-success-300: #81C784;
  --fg-success-400: #66BB6A;
  --fg-success-600: #43A047;
  --fg-success-700: #388E3C;
  --fg-success-800: #2E7D32;

  --fg-warning-300: #FF8A65;
  --fg-warning-400: #FF7043;
  --fg-warning-600: #F4511E;
  --fg-warning-700: #E64A19;
  --fg-warning-800: #D84315;

  --fg-info-300: #4DD0E1;
  --fg-info-400: #26C6DA;
  --fg-info-600: #00ACC1;
  --fg-info-700: #0097A7;
  --fg-info-800: #00838F;

  --fg-indigo-300: #7986CB;
  --fg-indigo-400: #5C6BC0;
  --fg-indigo-600: #3949AB;
  --fg-indigo-700: #303F9F;
  --fg-indigo-800: #283593;

  --fg-blue-300: #4FC3F7;
  --fg-blue-400: #29B6F6;
  --fg-blue-600: #039BE5;
  --fg-blue-700: #0288D1;
  --fg-blue-800: #0277BD;

  --fg-secondary-400: #607D8B;

  /* Cinzas/neutrals */
  --fg-grey-100: #F5F5F5;
  --fg-grey-200: #EEEEEE;
  --fg-grey-300: #E0E0E0;
  --fg-grey-400: #BDBDBD;
  --fg-grey-500: #9E9E9E;
  --fg-grey-600: #757575;
  --fg-grey-700: #616161;
  --fg-grey-800: #424242;

  /* Tokens semânticos (use estes nos componentes) */
  --fg-action: var(--fg-teal-400);
  --fg-action-hover: var(--fg-teal-600);
  --fg-action-active: var(--fg-teal-700);

  /* Layout dimensions */
  --fg-sidebar-width: 16.875rem;     /* 270px */
  --fg-navbar-height: 3.125rem;      /* 50px */
  --fg-content-padding: 1.25rem;
  --fg-card-radius: 0.1875rem;       /* Limitless usa cantos pouco arredondados */

  /* Override de variáveis Bootstrap 5 */
  --bs-body-font-family: 'Open Sans', sans-serif;
  --bs-body-font-size: 0.8125rem;    /* 13px — Limitless padrão */
  --bs-body-line-height: 1.5384616;
  --bs-body-color: #333;
  --bs-body-bg: #f5f5f5;

  --bs-link-color: var(--fg-action);
  --bs-link-hover-color: var(--fg-action-hover);

  --bs-border-radius: var(--fg-card-radius);
  --bs-border-radius-sm: 0.125rem;
  --bs-border-radius-lg: 0.25rem;
}


/* =============================================================================
 * 2. RESET / BASE
 * ============================================================================= */

/* Reset defensivo (2026-05-12): páginas admin mostravam ~150-200px de gap acima
   do navbar. Forçando margin/padding 0 em html+body + navbar primeiro filho do
   body sem margin-top, garantimos que o topbar cole no topo da viewport. */
html {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  line-height: var(--bs-body-line-height);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  min-height: 100vh;
  margin: 0 !important;
  padding: 0;
}

/* Esconde qualquer div vazio direto-filho do body (proteção contra elementos
   "fantasma" injetados por extensões/plugins que possam criar espaço inicial). */
body > div:empty {
  display: none !important;
}

/* Navbar topo: garante que cola na primeira posição do body sem nenhum gap.
   Override forçado para neutralizar qualquer margin-top que CSS de terceiro
   plugin (ex.: BS5 reboot, daterangepicker etc.) tente injetar. */
body > .navbar:first-of-type,
body > .navbar.navbar-dark {
  margin-top: 0 !important;
}

/* Flex column ESCOPADO ao login (2026-05-12): aplicar flex column no body de
   TODA tela quebrou o layout de páginas admin que têm muito conteúdo (notif/OS
   mostravam ~200px de gap acima da navbar). Aqui usamos :has() para detectar
   a presença do .login-form e SÓ AÍ ativar o flex layout para centralizar
   verticalmente o form de login. Páginas admin mantêm o block layout padrão. */
body:has(.login-form) {
  display: flex;
  flex-direction: column;
}

/* Tira outline azul padrão de focus em links/botões para não conflitar com
   Limitless. BS5 usa box-shadow para focus — mantemos. */
a, .btn, button {
  outline: none;
}


/* =============================================================================
 * 3. UTILITY CLASSES — Paleta de cor (compat com .bg-teal-400 etc das views)
 * ============================================================================= */

/* Background colors */
.bg-teal-300       { background-color: var(--fg-teal-300) !important; color: #fff; }
.bg-teal-400       { background-color: var(--fg-teal-400) !important; color: #fff; }
.bg-teal-600       { background-color: var(--fg-teal-600) !important; color: #fff; }
.bg-teal-700       { background-color: var(--fg-teal-700) !important; color: #fff; }
.bg-teal-800       { background-color: var(--fg-teal-800) !important; color: #fff; }

.bg-primary-300    { background-color: var(--fg-primary-300) !important; color: #fff; }
.bg-primary-400    { background-color: var(--fg-primary-400) !important; color: #fff; }
.bg-primary-600    { background-color: var(--fg-primary-600) !important; color: #fff; }
.bg-primary-700    { background-color: var(--fg-primary-700) !important; color: #fff; }
.bg-primary-800    { background-color: var(--fg-primary-800) !important; color: #fff; }

.bg-danger-300     { background-color: var(--fg-danger-300) !important; color: #fff; }
.bg-danger-400     { background-color: var(--fg-danger-400) !important; color: #fff; }
.bg-danger-600     { background-color: var(--fg-danger-600) !important; color: #fff; }
.bg-danger-700     { background-color: var(--fg-danger-700) !important; color: #fff; }
.bg-danger-800     { background-color: var(--fg-danger-800) !important; color: #fff; }

.bg-success-300    { background-color: var(--fg-success-300) !important; color: #fff; }
.bg-success-400    { background-color: var(--fg-success-400) !important; color: #fff; }
.bg-success-600    { background-color: var(--fg-success-600) !important; color: #fff; }
.bg-success-700    { background-color: var(--fg-success-700) !important; color: #fff; }
.bg-success-800    { background-color: var(--fg-success-800) !important; color: #fff; }

.bg-warning-300    { background-color: var(--fg-warning-300) !important; color: #fff; }
.bg-warning-400    { background-color: var(--fg-warning-400) !important; color: #fff; }
.bg-warning-600    { background-color: var(--fg-warning-600) !important; color: #fff; }
.bg-warning-700    { background-color: var(--fg-warning-700) !important; color: #fff; }
.bg-warning-800    { background-color: var(--fg-warning-800) !important; color: #fff; }

.bg-info-300       { background-color: var(--fg-info-300) !important; color: #fff; }
.bg-info-400       { background-color: var(--fg-info-400) !important; color: #fff; }
.bg-info-600       { background-color: var(--fg-info-600) !important; color: #fff; }
.bg-info-700       { background-color: var(--fg-info-700) !important; color: #fff; }
.bg-info-800       { background-color: var(--fg-info-800) !important; color: #fff; }

.bg-indigo-300     { background-color: var(--fg-indigo-300) !important; color: #fff; }
.bg-indigo-400     { background-color: var(--fg-indigo-400) !important; color: #fff; }
.bg-indigo-600     { background-color: var(--fg-indigo-600) !important; color: #fff; }
.bg-indigo-700     { background-color: var(--fg-indigo-700) !important; color: #fff; }
.bg-indigo-800     { background-color: var(--fg-indigo-800) !important; color: #fff; }

.bg-blue-300       { background-color: var(--fg-blue-300) !important; color: #fff; }
.bg-blue-400       { background-color: var(--fg-blue-400) !important; color: #fff; }
.bg-blue-600       { background-color: var(--fg-blue-600) !important; color: #fff; }
.bg-blue-700       { background-color: var(--fg-blue-700) !important; color: #fff; }
.bg-blue-800       { background-color: var(--fg-blue-800) !important; color: #fff; }

.bg-secondary-400  { background-color: var(--fg-secondary-400) !important; color: #fff; }

/* Text colors */
.text-teal-300     { color: var(--fg-teal-300) !important; }
.text-teal-400     { color: var(--fg-teal-400) !important; }
.text-teal-700     { color: var(--fg-teal-700) !important; }
.text-teal-800     { color: var(--fg-teal-800) !important; }

.text-primary-300  { color: var(--fg-primary-300) !important; }
.text-primary-400  { color: var(--fg-primary-400) !important; }
.text-primary-700  { color: var(--fg-primary-700) !important; }
.text-primary-800  { color: var(--fg-primary-800) !important; }

.text-danger-300   { color: var(--fg-danger-300) !important; }
.text-danger-400   { color: var(--fg-danger-400) !important; }
.text-danger-700   { color: var(--fg-danger-700) !important; }
.text-danger-800   { color: var(--fg-danger-800) !important; }

.text-success-300  { color: var(--fg-success-300) !important; }
.text-success-400  { color: var(--fg-success-400) !important; }
.text-success-700  { color: var(--fg-success-700) !important; }
.text-success-800  { color: var(--fg-success-800) !important; }

.text-warning-300  { color: var(--fg-warning-300) !important; }
.text-warning-400  { color: var(--fg-warning-400) !important; }
.text-warning-700  { color: var(--fg-warning-700) !important; }
.text-warning-800  { color: var(--fg-warning-800) !important; }

.text-info-300     { color: var(--fg-info-300) !important; }
.text-info-400     { color: var(--fg-info-400) !important; }
.text-info-700     { color: var(--fg-info-700) !important; }
.text-info-800     { color: var(--fg-info-800) !important; }

.text-indigo-300   { color: var(--fg-indigo-300) !important; }
.text-indigo-400   { color: var(--fg-indigo-400) !important; }
.text-indigo-700   { color: var(--fg-indigo-700) !important; }
.text-indigo-800   { color: var(--fg-indigo-800) !important; }

.text-blue-300     { color: var(--fg-blue-300) !important; }
.text-blue-400     { color: var(--fg-blue-400) !important; }
.text-blue-700     { color: var(--fg-blue-700) !important; }
.text-blue-800     { color: var(--fg-blue-800) !important; }

.text-default      { color: var(--bs-body-color) !important; }


/* =============================================================================
 * 4. NAVBAR — Topbar (Limitless: navbar-dark fixo no topo, ~50px)
 * ============================================================================= */

.navbar {
  padding: 0.625rem 1.25rem;
  min-height: var(--fg-navbar-height);
}

/* (2026-05-12) Fix definitivo do gap-acima-do-navbar: força o navbar dark do topo
   a colar na viewport y=0 via position: sticky. Cobre qualquer caso onde elementos
   "fantasma" (extensões, plugins, divs vazios injetados em runtime) empurrem o
   conteúdo do body para baixo — o sticky ignora a posição no fluxo e ancora no
   topo enquanto o usuário não scrolla. */
body > .navbar.navbar-dark,
body > .navbar:first-of-type {
  position: sticky;
  top: 0;
  z-index: 1040;
}

.navbar-dark {
  background-color: #273246;
}

.navbar-light {
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.navbar-brand {
  display: flex;
  align-items: center;
  padding: 0;
  margin-right: 0;
}

.navbar-brand.wmin-200 {
  min-width: 200px;
}

/* Logo NewSimples (custom) */
.logo {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.logo-name {
  display: flex;
  flex-direction: column;
  line-height: 1.2;        /* era 0.85 — fazia "versão 1.0.0" sobrepor "SIMPLES NACIONAL" */
  padding-left: 5px;
  align-items: flex-start; /* era flex-end — alinha à esquerda como o resto da navbar */
}

.logo-content-name {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.logo-content-version {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
}

/* Navbar nav links */
.navbar-nav-link {
  display: flex;
  align-items: center;
  padding: 0.625rem 0.875rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: background-color 0.15s ease-in-out;
}

.navbar-nav-link:hover,
.navbar-nav-link:focus {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.navbar-nav-link i {
  font-size: 1rem;
}

/* No navbar-dark, .text-muted (cor cinza escura padrão BS5) fica invisível.
   Override para tornar legível (e.g. linha do email do usuário). */
.navbar-dark .text-muted {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Navbar toggler (hamburger / sidebar mobile) */
.navbar-toggler {
  border: none;
  padding: 0.5rem 0.75rem;
  color: rgba(255, 255, 255, 0.85);
}

.navbar-toggler:hover {
  color: #fff;
}

.navbar-toggler i {
  font-size: 1.25rem;
}

.sidebar-control,
.sidebar-main-toggle,
.sidebar-mobile-main-toggle {
  cursor: pointer;
}


/* =============================================================================
 * 5. PAGE LAYOUT — page-content, content-wrapper, content
 * ============================================================================= */

.page-content {
  display: flex;
  flex-grow: 1;
  padding: 1.25rem 0.625rem;
}

.page-content.pt-0 {
  padding-top: 0 !important;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-x: hidden;  /* impede barra de rolagem horizontal indesejada na página */
  overflow-y: visible;
  min-width: 0;  /* permite shrink dentro de flex */
}

.content {
  flex-grow: 1;
  margin-left: 0.625rem;
  margin-right: 0.625rem;
}


/* =============================================================================
 * 6. PAGE HEADER — header-elements, breadcrumb-line, page-title
 * ============================================================================= */

/* page-header é transparente — só o .breadcrumb-line-light fica branco;
   a área do .page-header-content (título + botões) mostra o fundo cinza do body. */
.page-header {
  background-color: transparent;
  margin-bottom: 1.25rem;
  border-bottom: 0;
}

.page-header-content {
  position: relative;
  padding: 0 1.25rem;
}

.page-title {
  padding: 1.25rem 0;
  position: relative;
}

.page-title h4,
.page-title .h4 {
  font-size: 1.125rem;
  font-weight: 400;
  margin-bottom: 0.25rem;
}

.page-title small {
  color: #999;
}

/* Breadcrumb-line: barra com breadcrumb + header-elements */
.breadcrumb-line {
  position: relative;
  padding: 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.breadcrumb-line .breadcrumb {
  padding: 0.375rem 0;
  margin-bottom: 0;
  background-color: transparent;
  border-radius: 0;
}

.breadcrumb-line-light {
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.breadcrumb-line-dark {
  background-color: #273246;
  color: rgba(255, 255, 255, 0.85);
}

.breadcrumb-line-dark .breadcrumb-item,
.breadcrumb-line-dark .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.85);
}

.breadcrumb-elements-item {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  color: inherit;
  text-decoration: none;
}

.breadcrumb-elements-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: inherit;
}

/* Header elements (área à direita do page-header) */
.header-elements {
  display: flex;
  align-items: center;
}

.header-elements-toggle,
.footer-elements-toggle {
  margin-left: auto;
  align-self: center;
}

.header-elements-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}

/* Em telas md+, alinha header-elements inline (à direita); em mobile, esconde
   atrás de um toggle (header-elements-toggle controla visibilidade) */
@media (min-width: 768px) {
  .header-elements-md-inline {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .header-elements-md-inline > .header-elements {
    display: flex !important;
    align-items: center;
  }
  .header-elements-md-inline .header-elements-toggle {
    display: none;
  }
}

@media (min-width: 576px) {
  .header-elements-sm-inline {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .header-elements-sm-inline > .header-elements {
    display: flex !important;
    align-items: center;
  }
}


/* =============================================================================
 * 7. SIDEBAR — comportamento dual: fixed em mobile, flex member em md+
 * =============================================================================
 *
 * Modelo Limitless original (replicado abaixo):
 *  - Mobile (<768px): .sidebar é position: fixed e fica off-screen via left:-18.5625rem.
 *    Body recebe a classe .sidebar-mobile-main (via toggle JS) para empurrar para left:0.
 *  - Desktop (md+ ≥ 768px): .sidebar-expand-md força position: static, transformando
 *    a sidebar em membro normal do flex container .page-content.
 *    Resultado: page-content é flex com [sidebar | content-wrapper] lado a lado.
 *    Não há margin-left artificial em content-wrapper — o flex faz o trabalho.
 *
 * Importante: a estrutura usual é
 *    <page-header>           ← FULL-WIDTH (sidebar fica abaixo dela)
 *    <div class="page-content">   ← flex container
 *        <div class="sidebar sidebar-expand-md">…</div>
 *        <div class="content-wrapper">…</div>
 *    </div>
 * ============================================================================= */

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  box-sizing: content-box;
  border: 1px solid transparent;
  flex: 0 0 auto;
  width: var(--fg-sidebar-width);
  z-index: 1040;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all ease-in-out 0.15s;
}

.sidebar-light {
  background-color: #fff;
  color: var(--bs-body-color);
}

.sidebar-dark {
  background-color: #273246;
  color: rgba(255, 255, 255, 0.85);
}

/* Mobile default: sidebar e seu conteúdo ficam off-screen à esquerda. */
.sidebar-main,
.sidebar-main .sidebar-content {
  left: -18.5625rem;
}

.sidebar-content {
  position: fixed;
  top: var(--fg-navbar-height);
  bottom: 0;
  width: var(--fg-sidebar-width);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: all ease-in-out 0.15s;
}

/* Toggle no body mostra a sidebar mobile */
body.sidebar-mobile-main .sidebar-main,
body.sidebar-mobile-main .sidebar-main .sidebar-content {
  left: 0;
  box-shadow: 0.25rem 0 1rem rgba(0, 0, 0, 0.35);
}

.sidebar.align-self-start {
  align-self: flex-start;
}

/* Desktop md+: sidebar-expand-md transforma sidebar em membro static do flex.
   Isto sobrescreve position:fixed e deixa o flex container .page-content
   distribuir [sidebar | content-wrapper] lado a lado. */
@media (min-width: 768px) {
  .sidebar-expand-md {
    position: static;
    margin-left: 0.625rem;
    margin-right: 0;
    margin-bottom: 1.25rem;
    border: 1px solid #ddd;            /* mesmo border que .card */
    border-radius: var(--fg-card-radius);
    transition: none;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);   /* mesmo shadow que .card */
    overflow: hidden;                  /* clip do conteúdo no border-radius */
  }
  .sidebar-expand-md.sidebar-main {
    left: auto;
    z-index: 99;
  }
  .sidebar-expand-md.sidebar-main .sidebar-content,
  .sidebar-expand-md .sidebar-content {
    position: static;
    overflow: visible;
    width: auto;
    left: 0;
    top: auto;
  }
  .sidebar-expand-md .sidebar-mobile-toggler {
    display: none;
  }
}

/* Sidebar user card — fundo branco (NewSimples 2026-05-10) */
.sidebar-user {
  display: flex;
  align-items: center;
  padding: 1.25rem 1rem;
  background-color: #fff;
}

.sidebar-user .card-body {
  padding: 0;
}

.sidebar-user .media-title {
  font-weight: 500;
  margin: 0;
  line-height: 1.3;
}

.sidebar-user img {
  border-radius: 0.1875rem;
  object-fit: contain;
}

/* Borda leve abaixo do bloco de usuário (separa da lista MENU) */
.sidebar-user-divider {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* `.card.card-sidebar-mobile` (especificidade dupla) garante override sobre
   .card { background-color: #fff } definido mais abaixo no arquivo. */
.card.card-sidebar-mobile {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  margin-bottom: 0;
}


/* =============================================================================
 * 8. NAV-SIDEBAR — menu de navegação dentro da sidebar
 * ============================================================================= */

.nav-sidebar {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  list-style: none;
}

.nav-sidebar .nav-item {
  position: relative;
}

.nav-sidebar .nav-link {
  display: flex;
  align-items: center;
  padding: 0.625rem 1.25rem;
  color: var(--bs-body-color);
  text-decoration: none;
  border-radius: 0;
  transition: background-color 0.15s ease-in-out;
}

.nav-sidebar .nav-link i {
  width: 1.25rem;
  margin-right: 0.875rem;
  font-size: 1rem;
  text-align: center;
  flex-shrink: 0;
}

.nav-sidebar .nav-link:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.nav-sidebar .nav-link.active,
.nav-sidebar .nav-item.active > .nav-link {
  background-color: var(--fg-action);
  color: #fff;
}

.nav-sidebar .nav-link.active i {
  color: #fff;
}

/* Submenu (accordion) */
.nav-item-submenu > .nav-link {
  padding-right: 2.75rem;
}

.nav-item-submenu > .nav-link:after {
  content: '\e9c7';                /* icomoon arrow-right8 */
  font-family: 'icomoon';
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.15s ease-in-out;
  font-size: 0.875rem;
}

.nav-item-submenu.nav-item-open > .nav-link:after {
  transform: translateY(-50%) rotate(90deg);
}

.nav-item-submenu .nav-group-sub {
  display: flex;             /* sobrescreve .nav { display: flex; flex-wrap: wrap } do BS5 */
  flex-direction: column;    /* itens empilham — sem isso EVE/EVEMEI ficavam lado a lado */
  list-style: none;
  padding-left: 0;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.03);
}

.nav-item-submenu .nav-group-sub .nav-item {
  width: 100%;               /* cada <li> ocupa a largura toda do submenu */
}

.nav-item-submenu .nav-group-sub .nav-link {
  padding-left: 3.5rem;
  font-size: 0.8125rem;
}

.nav-item-submenu .nav-group-sub .nav-group-sub .nav-link {
  padding-left: 4.75rem;
}

/* Section header dentro do menu */
.nav-item-header {
  padding: 1rem 1.25rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--fg-grey-500);
  letter-spacing: 0.05em;
}

.nav-item-header i {
  display: none;          /* tooltip-only no Limitless original; ignoramos */
}


/* =============================================================================
 * 9. CARDS — Limitless usa cantos pouco arredondados e sombra sutil
 * ============================================================================= */

.card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: var(--fg-card-radius);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.25rem;
}

.card-header {
  background-color: rgba(0, 0, 0, 0.02);
  border-bottom: 1px solid #ddd;
  padding: 0.9375rem 1.25rem;
}

.card-header.bg-white {
  background-color: #fff !important;
}

.card-title {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0;
}

.card-body {
  padding: 1.25rem;
}

.card-footer {
  background-color: rgba(0, 0, 0, 0.02);
  border-top: 1px solid #ddd;
  padding: 0.9375rem 1.25rem;
}


/* =============================================================================
 * 10. BUTTONS — btn-float (toolbar Limitless), overrides
 * ============================================================================= */

/* Botão "flutuante" do header (icon em cima, texto pequeno embaixo).
   Usado em: contribuintes/index, importações (header upload),
   cadastros (header novo), notificacoes (header). ~50 ocorrências. */
.btn-float {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1rem;
  text-align: center;
  line-height: 1;
  min-width: 5rem;
  text-decoration: none;
  border-radius: var(--fg-card-radius);
}

.btn-float i {
  display: block;
  font-size: 1.25rem;
  margin-bottom: 0.375rem;
}

.btn-float span {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  font-weight: 500;
}

.btn-link.btn-float {
  color: var(--bs-body-color);
}

.btn-link.btn-float:hover {
  background-color: rgba(0, 0, 0, 0.04);
  color: var(--bs-body-color);
  text-decoration: none;
}

/* Override BS5 — botões teal-400 são os "primary action" do sistema */
.btn-teal-400,
.btn.bg-teal-400 {
  color: #fff;
  background-color: var(--fg-teal-400);
  border-color: var(--fg-teal-400);
}

.btn-teal-400:hover,
.btn.bg-teal-400:hover {
  color: #fff;
  background-color: var(--fg-teal-600);
  border-color: var(--fg-teal-600);
}

/* Tamanho extra-pequeno (legado BS4) */
.btn-xs {
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  line-height: 1.5;
  border-radius: 0.125rem;
}

/* legitRipple — efeito ripple do Limitless (mantemos sem animação;
   classe presente em ~20 lugares mas é puramente visual) */
.legitRipple {
  position: relative;
  overflow: hidden;
}


/* =============================================================================
 * 11. FORMS — feedback, file inputs, plain-text
 * ============================================================================= */

/* form-group-feedback (input com ícone do lado) */
.form-group-feedback {
  position: relative;
}

.form-group-feedback-left .form-control {
  padding-left: 2.375rem;
}

.form-group-feedback-right .form-control {
  padding-right: 2.375rem;
}

.form-control-feedback {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--fg-grey-500);
  z-index: 4;
  width: 2.375rem;
  text-align: center;
}

.form-group-feedback-left .form-control-feedback {
  left: 0;
}

.form-group-feedback-right .form-control-feedback {
  right: 0;
}

/* form-input-styled / form-control-uniform — placeholders
   (usado pelos plugins styling; manter como no-op se removidos).
   IMPORTANTE: não aplicar display:block em checkbox/radio — eles precisam
   ser inline para o label "Lembrar" ficar ao lado. */
.form-input-styled:not([type="checkbox"]):not([type="radio"]),
.form-control-uniform:not([type="checkbox"]):not([type="radio"]) {
  display: block;
}

/* Checkbox/radio com classe legacy mantém comportamento inline padrão BS5 */
input[type="checkbox"].form-input-styled,
input[type="radio"].form-input-styled {
  width: 1em;
  height: 1em;
  margin: 0 0.5rem 0 0;
  vertical-align: middle;
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: auto;
}

/* Checkbox legacy Limitless — mapear para a aparência BS5 nativa.
   Views ainda têm "form-check-input-styled" remanescente (era estilizado
   pelo uniform.js, removido no Phase 5). Replicamos as regras de BS5
   .form-check-input para que renderizem corretamente. */
input[type="checkbox"].form-check-input-styled,
input[type="radio"].form-check-input-styled {
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  margin-right: 0.5rem;
  vertical-align: top;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgba(0, 0, 0, 0.25);
  appearance: none;
  -webkit-appearance: none;
  vertical-align: middle;
  cursor: pointer;
}

input[type="checkbox"].form-check-input-styled {
  border-radius: 0.25em;
}

input[type="radio"].form-check-input-styled {
  border-radius: 50%;
}

input[type="checkbox"].form-check-input-styled:checked {
  background-color: var(--fg-action);
  border-color: var(--fg-action);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E");
}

input[type="radio"].form-check-input-styled:checked {
  background-color: var(--fg-action);
  border-color: var(--fg-action);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E");
}

input[type="checkbox"].form-check-input-styled:focus,
input[type="radio"].form-check-input-styled:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}


/* =============================================================================
 * 11.4 LOGIN FORM — visual minimalista (centro da página, sem card)
 * =============================================================================
 *
 * O markup é <form class="login-form"><div class="card-body">...</div></form>.
 * Visual atual (2026-05-11): form transparente, sem border/sombra, centralizado.
 * Os inputs e o botão ficam com sua aparência BS5 padrão sobre o fundo da página.
 * ============================================================================= */

.login-form {
  width: 100%;
  max-width: 25rem;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

.login-form .card-body {
  padding: 1.5rem 0;
}

/* Botão de login full-width (substitui .btn-block do BS4 que não existe no BS5) */
.login-form .btn-block,
.btn-block {
  display: block;
  width: 100%;
}


/* =============================================================================
 * 11.5 BTN-CLOSE — preservar visual maior do Limitless
 * =============================================================================
 *
 * No BS4 + Limitless o botão de fechar de modal usava <i class="fa fa-times"
 * style="font-size: 1.7rem;"> que produzia um X de ~27px.
 *
 * O .btn-close padrão do BS5 desenha um SVG em ~16px — visualmente menor.
 * Esta regra restaura o tamanho próximo ao do Limitless original.
 * ============================================================================= */

.modal-header .btn-close {
  width: 1.5rem;
  height: 1.5rem;
  background-size: 1rem;
  padding: 0.25rem;
  opacity: 0.6;
}

.modal-header .btn-close:hover,
.modal-header .btn-close:focus {
  opacity: 1;
}


/* =============================================================================
 * 11.6 SELECT2 — alinhar visual ao form-control BS5
 * =============================================================================
 *
 * Select2 v4 ships com tema 'default' que não combina bem com BS5.
 * Estes overrides aproximam altura/borda/foco aos inputs BS5.
 * ============================================================================= */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-color: #ced4da;
  min-height: calc(1.5em + 0.75rem + 2px);
  border-radius: 0.25rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: calc(1.5em + 0.75rem);
  padding-left: 0.75rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(1.5em + 0.75rem + 2px);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #e9ecef;
  border-color: #ced4da;
  margin: 0.25rem 0.25rem 0 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Multi-select: container ganha altura máxima + scroll quando há muitas chips
   (caso de Modelo Envio Mensagem Lote do comunicacaoDTE com 10+ opções). Sem
   isso, o campo cresce verticalmente até cobrir o modal inteiro. */
.select2-container--default .select2-selection--multiple {
  max-height: 8rem;
  overflow-y: auto;
}

/* Chip individual: largura máxima força ellipsis em descrições longas
   (ex.: "00014 - Termo de Exclusão do Simples Nacional por Irregularidade Cadastral"). */
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  display: inline-block;
  max-width: 26ch;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* form-control-sm (input pequeno) → Select2 menor */
.form-control-sm + .select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--single.form-control-sm {
  min-height: calc(1.5em + 0.5rem + 2px);
  font-size: 0.875rem;
}


/* =============================================================================
 * 12. TABLES — alias de classes legadas BS4 / Limitless
 * ============================================================================= */

/* Remove o margin-bottom default do BS5 (.table { margin-bottom: 1rem }). */
.table {
  margin-bottom: 0;
}

/* table-condensed (BS4) → table-sm (BS5) */
.table-condensed {
  font-size: 0.8125rem;
}

.table-condensed > :not(caption) > * > * {
  padding: 0.375rem 0.75rem;
}

.table-condensed.table-fg td,
.table-condensed.table-fg th,
.table-fg td,
.table-fg th {
  padding: 0.25rem 0.75rem !important;
  vertical-align: top !important;
}

.table-tr-row {
  font-weight: bold;
  background-color: #f9f9f9;
}

/* =============================================================================
 * DataTables — wrappers, filter, length, info, paginate, sort indicators
 * Replica visual Limitless original (components.min.css.bak)
 * ============================================================================= */

/* Container do plugin (wrappper) */
.dataTables_wrapper {
  position: relative;
  clear: both;
}

.dataTables_wrapper::after {
  display: block;
  clear: both;
  content: "";
}

/* Quando length / filter / info / paginate são filhos diretos do wrapper
   (init padrão do DT, dom='lfrtip'), posiciona via float.
   Padrão do projeto (vide /admin/contribuintes): filter + length AMBOS à direita.
   Tabelas que usam .datatable-header explicitamente já são distribuídas pelo
   flex space-between acima — produzem visual idêntico. */
.dataTables_wrapper > .dataTables_length {
  float: right;
  margin: 0.75rem 0 0.75rem 0;
  padding: 0.75rem 1.25rem;
}
.dataTables_wrapper > .dataTables_filter {
  float: right;
  margin: 0.75rem 0 0.75rem 0;
  padding: 0.75rem 0.5rem 0.75rem 1.25rem;
}
.dataTables_wrapper > .dataTables_info {
  float: left;
  margin-top: 0.75rem;
  padding: 0.75rem 1.25rem;
}
.dataTables_wrapper > .dataTables_paginate {
  float: right;
  margin-top: 0.75rem;
  padding: 0.75rem 1.25rem;
}
.dataTables_wrapper > table.dataTable {
  clear: both;
}

/* Header / footer flex containers — Limitless usa estes em volta dos controles.
   justify-content: space-between distribui filter/length (header) e
   info/paginate (footer) nas extremidades. */
.datatable-header,
.datatable-footer {
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Header: banda cinza-clara de borda a borda — referência: /admin/contribuintes.
   O bg fica no container (.datatable-header), não nos filhos individuais,
   garantindo que a faixa cubra toda a largura do card. */
.datatable-header {
  background-color: #fafafa;
  border-bottom: 1px solid #e9e9e9;
}

.datatable-footer {
  background-color: #fff;
  border-top: 1px solid #f0f0f0;
}

/* Garante alinhamento à direita mesmo se a ordem do dom mudar. */
.datatable-header .dataTables_filter,
.datatable-footer .dataTables_paginate {
  margin-left: auto;
}

/* Remove a barra de rolagem horizontal indesejada do .datatable-scroll
   quando a tabela cabe no container. table-layout: auto + width: 100%
   fazem o conteúdo se ajustar sem overflow. */
/* .datatable-scroll: contém o overflow horizontal dentro dele se for necessário
   (não vaza para o content-wrapper, que mostraria barra na parte de baixo da página).
   Combinado com width:100% na table abaixo, na maioria dos casos não há scrollbar. */
.datatable-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.datatable-scroll > table.dataTable,
.table-responsive > table.dataTable,
.table-responsive.DataTables > table {
  width: 100% !important;
  max-width: 100% !important;
}

/* .table-responsive (BS5) — mantém auto, mas garante que não vaze para fora do card. */
.card > .table-responsive,
.card .table-responsive.DataTables {
  overflow-x: auto;
  max-width: 100%;
}

/* thead com fundo cinza-claro padrão Limitless (2026-05-11: usuário pediu para
   uniformizar com o visual do contribuintes_table — distingue área de header
   da área de dados). Body das linhas mantém o branco/striping normal do BS. */
.dataTable > thead > tr > th,
.table > thead > tr > th {
  background-color: #fafafa;
  border-bottom: 1px solid #e9e9e9;
  font-weight: 600;
  color: #333;
}

/* O bg cinza da faixa superior agora vem do container .datatable-header (criado
   automaticamente pelo dom default global em app.blade.php). Os filhos individuais
   ficam transparentes para não duplicar a cor. */

/* Padronização do BODY das DataTables — todas as grids devem se comportar como
   /admin/contribuintes (referência do usuário em 2026-05-11), independente de
   declararem .table-striped, .table-hover ou nenhum dos dois:
   - striping bem sutil (quase imperceptível, só ajuda na leitura)
   - hover destacado em qualquer linha do body */
.dataTable > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: #fcfcfc;
}
.dataTable > tbody > tr:hover > *,
.table > tbody > tr:hover > * {
  --bs-table-bg-type: #f0f0f0;
  background-color: #f0f0f0 !important;
}

/* Footer (info + paginate) — fundo branco, separador sutil acima.
   Replica o visual da contribuintes/index. */
.dataTables_wrapper > .dataTables_info,
.dataTables_wrapper > .dataTables_paginate {
  background-color: #fff;
  border-top: 1px solid #f0f0f0;
}

/* dataTables_length — dropdown "Mostrar 25" */
.dataTables_length {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.dataTables_length > label {
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.dataTables_length select {
  height: 2.25rem;
  padding: 0.4375rem 1.75rem 0.4375rem 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.5385;
  color: #333;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 0.1875rem;
  outline: 0;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23999' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
}

/* dataTables_filter — input "Filtro" (no Limitless o ícone era via icomoon ::after) */
.dataTables_filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.dataTables_filter > label {
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.dataTables_filter input {
  width: 12.5rem;
  height: 2.25rem;
  padding: 0.4375rem 2rem 0.4375rem 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.5385;
  color: #333;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 0.1875rem;
  outline: 0;
}

.dataTables_filter input::placeholder {
  color: #999;
  opacity: 1;
}

.dataTables_filter input:focus,
.dataTables_length select:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

/* dataTables_info — "Mostrando 1 a 25 de 100" */
.dataTables_info {
  padding-top: 0.5rem;
  color: #666;
  font-size: 0.8125rem;
}

/* dataTables_paginate — botões de paginação */
.dataTables_paginate {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.125rem;
  margin: 0;
}

.dataTables_paginate .paginate_button {
  display: inline-block;
  padding: 0.4375rem;
  min-width: 2.25rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  color: #333;
  outline: 0;
  border: 1px solid transparent;
  border-radius: 0.1875rem;
  transition: all ease-in-out 0.15s;
}

.dataTables_paginate .paginate_button:hover:not(.disabled) {
  background-color: #f5f5f5;
  color: #333;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  color: #fff;
  background-color: var(--fg-action);
  border-color: var(--fg-action);
}

.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
  cursor: default;
  background-color: transparent;
  color: #ccc;
}

.dataTables_paginate .paginate_button.previous,
.dataTables_paginate .paginate_button.next {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

/* Processing overlay com .icon-spinner4 (icomoon \eb53) à esquerda do texto.
   - Posicionamento: relativo ao .dataTables_wrapper (que já tem position: relative
     acima). Usa left:0 / right:0 + transform:translateY(-50%) para centrar de forma
     robusta independente do tamanho do texto.
   - Durante o loading o <tbody> está pequeno, então o "centro do wrapper" ficaria
     em cima do thead. A regra :has() abaixo força min-height enquanto o spinner
     está visível, criando espaço vertical para o centro real ficar abaixo da área
     de cabeçalho. */
/* Processing inline do DataTables: ESCONDIDO. O loading visual é feito pelo
   overlay full-page .ajax_load (ver public/css/loading.css + hook global
   processing.dt em resources/views/layouts/app.blade.php), que cobre toda a
   tela com backdrop escuro e o ring spinner padrão do sistema. Mantemos a
   regra aqui só para suprimir qualquer renderização do indicador inline. */
.dataTables_processing {
  display: none !important;
}

/* Sorting indicators no thead — usa fontes icomoon ou setas Unicode */
.dataTable thead th {
  outline: 0;
  position: relative;
}

.dataTable thead .sorting,
.dataTable thead .sorting_asc,
.dataTable thead .sorting_desc {
  cursor: pointer;
  padding-right: 1.5rem !important;
}

.dataTable thead .sorting::after,
.dataTable thead .sorting_asc::after,
.dataTable thead .sorting_desc::after {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  font-size: 0.7rem;
  line-height: 1;
  margin-top: -0.35rem;
  opacity: 0.5;
  font-family: inherit;
  content: "\2195";  /* ↕ */
}

.dataTable thead .sorting_asc::after {
  content: "\25B2";  /* ▲ */
  opacity: 1;
}

.dataTable thead .sorting_desc::after {
  content: "\25BC";  /* ▼ */
  opacity: 1;
}

/* "Nenhum registro" */
.dataTable .dataTables_empty {
  text-align: center;
  padding: 1.5rem;
  color: #999;
}


/* =============================================================================
 * 12.5 EXPAND-SELECTION — botão "+" inline com a linha de dados
 * =============================================================================
 *
 * O JS (em pgdasd/index.blade.php, os/index.blade.php, etc.) insere uma <tr>
 * `expand-selection` após cada linha de dados, contendo o ícone + para expandir.
 * Visualmente isto consumia uma linha extra abaixo de cada dado.
 *
 * Solução: colapsar a linha de expansão para altura zero quando vazia (estado
 * default) e posicionar o ícone absolutamente no canto direito da linha
 * anterior. Quando expandida (template injetado em .px-2), a linha cresce
 * naturalmente para mostrar o conteúdo do detalhe.
 * ============================================================================= */

.expand-selection > td.details-control {
  padding: 0 !important;
  border-top: 0;
  position: relative;
  background-color: transparent;
}

/* O wrapper .px-2 contém o <i> ícone (sempre presente) e, após clique,
   também recebe o template HTML do detalhe. Mantemos o wrapper em fluxo
   normal — só o ícone é absolutamente posicionado. */
.expand-selection > td.details-control > div.px-2 {
  padding: 0 !important;
  margin: 0;
}

/* Ícone +/- posicionado sobre a linha de dados anterior, à direita.
   right: 0.5rem alinha-se com o padding extra que reservamos no td:last-child
   das linhas de dados (regra abaixo com :has()). */
.expand-selection > td.details-control > div.px-2 > i.fa-plus-square,
.expand-selection > td.details-control > div.px-2 > i.fa-minus-square {
  position: absolute;
  right: 0.5rem;
  top: -1.85rem;       /* sobe para alinhar verticalmente com a linha de dados */
  z-index: 5;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  color: #444;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 0.125rem;
  padding: 0.0625rem;
}

.expand-selection > td.details-control > div.px-2 > i.fa-plus-square:hover,
.expand-selection > td.details-control > div.px-2 > i.fa-minus-square:hover {
  color: var(--fg-action);
  background-color: #fff;
}

/* Quando o detalhe está expandido (template adicionado a .px-2), a linha
   da expansão cresce naturalmente. O ícone vira "−" e segue posicionado
   sobre a linha de dados. */
.expand-selection > td.details-control > div.px-2 > .panel-selection,
.expand-selection > td.details-control > div.px-2 > div:not(.px-2) {
  margin-top: 0.5rem;
}

/* Aviso de sonegação compartilhando linha com o ícone — recolhe vertical */
.expand-selection > td.soneg-aviso {
  padding: 0.25rem 0.75rem !important;
  border-top: 0;
}

/* Reserva espaço à direita na última coluna das linhas de dados quando a
   tabela tem o padrão expand-selection. Sem isto o ícone "+" fica grudado
   nos valores da última coluna (geralmente right-aligned). Usa :has()
   para aplicar apenas em tabelas que efetivamente têm o padrão. */
.dataTable:has(tr.expand-selection) tbody tr:not(.group):not(.expand-selection) > td:last-child,
.table:has(tr.expand-selection) tbody tr:not(.group):not(.expand-selection) > td:last-child {
  padding-right: 2.25rem;
}


/* =============================================================================
 * 13. MODAL — overrides Limitless e tamanho full
 * ============================================================================= */

.modal-content {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--fg-card-radius);
}

.modal-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #ddd;
  background-color: rgba(0, 0, 0, 0.02);
}

.modal-body {
  padding: 1.25rem;
}

.modal-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid #ddd;
  background-color: rgba(0, 0, 0, 0.02);
}

/* modal-full — tamanho extra usado em formulários longos
   (notificações, OS, comunicação DTE) */
@media (min-width: 992px) {
  .modal-full .modal-dialog,
  .modal-dialog.modal-full {
    max-width: 95%;
    margin: 1.5rem auto;
  }
}


/* =============================================================================
 * 14. ALERTS — variantes Limitless
 * ============================================================================= */

.alert-styled-left {
  border-left-width: 0.25rem;
}

.alert-success {
  background-color: #DEF1DD;
  border-color: var(--fg-success-400);
  color: var(--fg-success-800);
}

.alert-danger {
  background-color: #FDDFDE;
  border-color: var(--fg-danger-400);
  color: var(--fg-danger-800);
}

.alert-warning {
  background-color: #FFE0D6;
  border-color: var(--fg-warning-400);
  color: var(--fg-warning-800);
}

.alert-info {
  background-color: #DEF7FA;
  border-color: var(--fg-info-400);
  color: var(--fg-info-800);
}


/* =============================================================================
 * 15. BADGES — Limitless adiciona variantes 400/800
 * ============================================================================= */

.badge {
  font-weight: 500;
  font-size: 0.6875rem;
  padding: 0.25em 0.5em;
}

.badge.badge-light {
  background-color: var(--fg-grey-200);
  color: var(--fg-grey-800);
}

.badge.bg-light {
  color: var(--fg-grey-800);
}


/* =============================================================================
 * 16. UTILITIES — extras Limitless / NewSimples
 * ============================================================================= */

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* Tipografia */
.text-bold,
.font-weight-bold       { font-weight: 700 !important; }
.font-weight-semibold   { font-weight: 600 !important; }

.font-size-xs           { font-size: 0.6875rem !important; }
.font-size-sm           { font-size: 0.8125rem !important; }
.font-size-base         { font-size: 0.875rem !important; }

/* Opacity (BS5 já tem .opacity-25/50/75/100, mas Limitless usa .opacity-50/75 mesmo) */
.opacity-50  { opacity: 0.5 !important; }
.opacity-75  { opacity: 0.75 !important; }

/* Ícones tamanho aumentado (Limitless: .icon-2x) */
.icon-2x  { font-size: 1.5rem; }
.icon-3x  { font-size: 2.25rem; }
.icon-4x  { font-size: 3rem; }

/* Width helpers (Limitless usa wmin-* / wmax-*) */
.wmin-200 { min-width: 200px; }
.wmin-100 { min-width: 100px; }
.wmin-150 { min-width: 150px; }

/* Layout helpers (NewSimples original) */
.flex             { display: flex; }
.flex-between     { justify-content: space-between; align-items: center; }
.item-center      { align-items: center; }
.gap-5            { gap: 5px; }

.align-items-column {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* .list-icons / .list-icons-item — wrapper de ícones de ação em tabelas
   (eye, pencil, bin). Migração BS5 (2026-05-12): classe veio do Limitless
   mas não estava estilizada após a migração, deixando os ícones desalinhados
   em algumas telas (especialmente quando um deles era <button> com classe
   .dropdown-item que força display:block). Usado em ~5 controllers de
   listagem (textosDTE, textos, parametros, usuarios, notificacoes). */
.list-icons {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.list-icons-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #333;
  text-decoration: none;
  line-height: 1;
  padding: 0.25rem;
  border-radius: 0.1875rem;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.list-icons-item:hover {
  color: var(--fg-action);
  background-color: rgba(0, 0, 0, 0.04);
}

.list-icons-item i {
  font-size: 1rem;
  line-height: 1;
}

/* Labels semânticos (NewSimples original) */
.info-label     { color: #00626e !important; }
.success-label  { color: green !important; }
.danger-label   { color: #7f231c !important; }
.required {
  font-weight: bolder;
  color: #7f231c;
}

/* No-arrows: esconde spinners de input[type=number] */
.no-arrows input::-webkit-outer-spin-button,
.no-arrows input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.no-arrows input[type=number] {
  -moz-appearance: textfield;
}


/* =============================================================================
 * 17. ICOMOON — Spinner animado (.icon-spinner4 + .spinner)
 * ============================================================================= */

.spinner {
  -webkit-animation: fg-spin 1s linear infinite;
  animation: fg-spin 1s linear infinite;
  display: inline-block;
}

@-webkit-keyframes fg-spin {
  from { -webkit-transform: rotate(0deg); }
  to   { -webkit-transform: rotate(360deg); }
}

@keyframes fg-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* =============================================================================
 * 18. BALÕES DE CHAT — usado em notificacoes/visualizacao_notificacao
 *     (estilo conversa, similar a WhatsApp)
 * ============================================================================= */

.balao,
.balao2 {
  position: relative;
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
  border-radius: 0.5rem;
  max-width: 75%;
  word-wrap: break-word;
}

.balao {
  background-color: #DCF8C6;       /* verde estilo WhatsApp */
  align-self: flex-end;
  margin-left: auto;
}

.balao2 {
  background-color: #ECECEC;
  align-self: flex-start;
  margin-right: auto;
}


/* =============================================================================
 * 19. PRINT — estilos para validacao_notificacao e visualizacao_notificacao
 * ============================================================================= */

@media print {
  body {
    background: #fff !important;
  }

  .navbar,
  .sidebar,
  .page-header,
  .navbar-toggler,
  .breadcrumb,
  .header-elements,
  button,
  .btn {
    display: none !important;
  }

  .content-wrapper {
    margin-left: 0 !important;
  }

  .card {
    border: none !important;
    box-shadow: none !important;
  }

  .padded-table {
    width: 100%;
    border-collapse: collapse;
  }

  .padded-table td,
  .padded-table th {
    padding: 0.5rem;
    border: 1px solid #ddd;
  }
}


/* =============================================================================
 * 20. RESPONSIVO — breakpoints menores
 * ============================================================================= */

@media (max-width: 575.98px) {
  .page-content {
    padding: 0.625rem 0.3125rem;
  }

  .content {
    margin-left: 0.3125rem;
    margin-right: 0.3125rem;
  }

  .card {
    margin-bottom: 0.625rem;
  }

  .modal-dialog {
    margin: 0.5rem;
  }
}


/* =============================================================================
 * FIM
 *
 * O QUE NÃO ESTÁ AQUI (e pode quebrar nas QA):
 * - Plugins Limitless específicos (switchery, uniform, multiselect) —
 *   removidos na Fase 5 do plano
 * - Componentes raros (timeline, ribbon, alpaca, fullcalendar custom) —
 *   adicionar caso a caso conforme quebrarem
 * - Form Wizards (wizards/steps) — não usado nas views auditadas
 * - Sidebar secondary / right — projeto não usa
 *
 * Rota de adição: testar no browser, achar classe quebrada, adicionar regra
 * aqui (commit individual por classe).
 * ============================================================================= */