/* =========================================================================
   theme.css  ·  Nota Simples — identidade "Fintech confiável"
   ---------------------------------------------------------------------------
   Folha de TEMA SOBREPOSTA. Deve ser carregada por ÚLTIMO no index.html,
   depois de bootstrap.min.css / style.css / style-custom.css.
   Não altera markup, rotas, controllers ou diretivas AngularJS — apenas
   estilo. Toda a paleta vive nos tokens (CSS custom properties) abaixo;
   o resto referencia var(--token). Tema escuro via html[data-theme="dark"].
   Spec: redesign-nota-simples.md  (seções 4–8)
   Seletores reais mapeados no Passo 0 (tema Inspinia 2.7.1).
   ========================================================================= */

/* ------------------------------------------------------------------ */
/*  Fontes auto-hospedadas (licença OFL) — subset latin (cobre PT-BR)  */
/*  Bricolage e Plus Jakarta são variáveis: 1 arquivo cobre os pesos.  */
/* ------------------------------------------------------------------ */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('../fonts/notasimples/BricolageGrotesque-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/notasimples/PlusJakartaSans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/notasimples/IBMPlexMono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/notasimples/IBMPlexMono-500-latin.woff2') format('woff2');
}

/* ================================================================== */
/*  1. TOKENS DE DESIGN — fonte única de verdade                       */
/* ================================================================== */
:root {
  /* Superfícies — claro */
  --bg-app:            #F7F8FA;
  --bg-surface:        #FFFFFF;
  --bg-sidebar:        #1B1442;
  --bg-sidebar-active: #2C2068;

  /* Marca e acentos */
  --brand:       #5B4BD6; /* roxo da marca: links, realces, borda de obrigatório */
  --primary:     #2563EB; /* ação primária (botões "Salvar") */
  --accent:      #047857; /* sucesso / texto branco sobre verde */
  --accent-soft: #10B981; /* verde decorativo: ícones, badges (NUNCA texto branco) */
  --warning:     #D97706; /* alertas */
  --danger:      #DC2626; /* erros de validação */

  /* Texto e bordas */
  --text:       #1A2233;
  --text-muted: #5B6678;
  --border:     #D9DEE8;
  --field-bg:   #FFFFFF;

  /* Texto sobre a sidebar (roxo profundo) */
  --sidebar-text:       #A79FD6;
  --sidebar-text-hover: #FFFFFF;

  /* Tipografia */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --radius:    9px;
  --radius-lg: 13px;

  /* Anel de foco (derivado do roxo da marca) */
  --focus-ring: 0 0 0 3px rgba(91, 75, 214, .22);
}

:root[data-theme="dark"] {
  --bg-app:            #0F1525;
  --bg-surface:        #1A2236;
  --bg-sidebar:        #14102E;
  --bg-sidebar-active: #2C2068;
  --brand:       #9A8CF5;
  --primary:     #3B82F6;
  --accent:      #34D399; /* em dark, usar com texto escuro */
  --accent-soft: #34D399;
  --warning:     #FBBF24;
  --danger:      #F87171;
  --text:       #E8ECF4;
  --text-muted: #97A1B5;
  --border:     #2A3550;
  --field-bg:   #131B2E;

  --sidebar-text:       #B7AFE8;
  --sidebar-text-hover: #FFFFFF;

  --focus-ring: 0 0 0 3px rgba(154, 140, 245, .30);
}

/* ================================================================== */
/*  2. BASE — corpo e área de conteúdo                                 */
/*  No Inspinia, body é a FAIXA da sidebar; o conteúdo é #page-wrapper. */
/* ================================================================== */
body {
  background-color: var(--bg-sidebar);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
}

#page-wrapper,
.gray-bg,
.wrapper-content {
  background-color: var(--bg-app);
}

/* Links de conteúdo / apoio (ex.: "consultar IE") usam a cor de marca */
a,
.text-link {
  color: var(--brand);
}
a:hover,
a:focus {
  color: var(--brand);
  filter: brightness(.88);
}

/* ================================================================== */
/*  3. SIDEBAR  (nav.navbar-static-side + #side-menu .metismenu)       */
/* ================================================================== */
.navbar-static-side,
nav.navbar-static-side {
  background-color: var(--bg-sidebar);
}

.nav-header {
  background-color: var(--bg-sidebar);
  background-image: none; /* remove a textura header-profile.png do Inspinia */
}

ul.nav-second-level,
.nav-second-level,
.mini-navbar .nav .nav-second-level {
  background-color: var(--bg-sidebar);
}

/* Itens de menu (sidebar only — not .nav-tabs) */
.nav:not(.nav-tabs) > li > a {
  color: var(--sidebar-text);
  font-family: var(--font-body);
}
.navbar-default .nav:not(.nav-tabs) > li > a:hover,
.navbar-default .nav:not(.nav-tabs) > li > a:focus {
  background-color: var(--bg-sidebar-active);
  color: var(--sidebar-text-hover);
}

/* Item ativo: fundo + marcador lateral verde decorativo (sidebar only) */
.nav:not(.nav-tabs) > li.active {
  background: var(--bg-sidebar-active);
  border-left: 3px solid var(--accent-soft);
}
.nav:not(.nav-tabs) > li.active > a,
.nav-second-level > li.active > a {
  color: var(--sidebar-text-hover);
  font-weight: 500;
}

/* ================================================================== */
/*  TABS (uib-tabset / .tabs-container .nav-tabs)                       */
/*  Scoped under .tabs-container so the sidebar .nav rules above never  */
/*  bleed into tab headings (was causing invisible/low-contrast text).  */
/* ================================================================== */

/* Neutralize any sidebar background/border on the tab <li> itself */
.tabs-container .nav-tabs > li,
.tabs-container .nav-tabs > li.active {
  background: transparent;
  border-left: none;
}

/* Inactive tab heading — readable muted text */
.tabs-container .nav-tabs > li > a {
  color: var(--text-muted, #5B6678);
  font-weight: 400;
}
.tabs-container .nav-tabs > li > a:hover,
.tabs-container .nav-tabs > li > a:focus {
  color: var(--brand);
  background: transparent;
}

/* Active tab heading — brand purple, bold, on white */
.tabs-container .nav-tabs > li.active > a,
.tabs-container .nav-tabs > li.active > a:hover,
.tabs-container .nav-tabs > li.active > a:focus {
  color: var(--brand);
  background-color: #fff;
  border-color: #e7eaec #e7eaec transparent;
  font-weight: 600;
}

/* Divisores da sidebar */
.navbar-default .special_link a { background: var(--bg-sidebar-active); }

/* ================================================================== */
/*  4. TOPBAR  (.navbar-static-top.topo-bg + .navbar-top-links)        */
/* ================================================================== */
.navbar-static-top,
.topo-bg {
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.border-bottom {
  border-bottom: 1px solid var(--border) !important;
}

.navbar-top-links li a,
.topnavbutton,
.box-empresacnpj,
.box-empresacnpj a,
.dadosConta {
  color: var(--text);
}
.navbar-top-links li a:hover,
.topnavbutton:hover,
.box-empresacnpj a:hover {
  color: var(--brand);
}
.box-empresacnpj strong {
  font-family: var(--font-display);
  font-weight: 600;
}

/* Empresa em estado de alerta — substitui o "!" cru por um chip legível */
.company-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FCEFD9;
  color: #92560A;
  padding: 3px 9px;
  border-radius: 7px;
  font-weight: 500;
}

/* ================================================================== */
/*  5. CARDS DE SEÇÃO  (.ibox / .ibox-title / .ibox-content)           */
/* ================================================================== */
.ibox {
  background: transparent;
  border: 0;
}
.ibox-title {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  color: var(--text);
}
.ibox-content {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  color: var(--text);
}
/* ibox só com título (ex.: título da tela): vira um card fechado */
.ibox > .ibox-title:last-child {
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.ibox-footer {
  background-color: var(--bg-surface);
  border-top: 1px solid var(--border);
  color: var(--text);
}

/* Títulos de seção */
.ibox-title h1,
.ibox-title h2,
.ibox-title h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
}
/* Título de TELA (ibox só com título) maior que o de seção */
.ibox > .ibox-title:last-child h1,
.ibox > .ibox-title:last-child h2,
.ibox > .ibox-title:last-child h3 {
  font-size: 22px;
}

/* ================================================================== */
/*  6. CAMPOS DE FORMULÁRIO                                            */
/* ================================================================== */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
  height: 36px;
  background-color: var(--field-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  box-shadow: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
textarea,
textarea.form-control {
  height: auto;
}
.form-control::placeholder {
  color: var(--text-muted);
}

/* Rótulos */
label,
.control-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 5px;
}

/* Campo obrigatório: marcador lateral roxo */
.form-control[required],
.form-control.is-required {
  border-left: 3px solid var(--brand);
}

/* Identificadores fiscais em fonte mono (CNPJ, CEP, IE, valores, CSC…) */
.form-control.mono,
input.mono,
.mono {
  font-family: var(--font-mono);
  letter-spacing: -.01em;
}

/* Foco — anel visível e acessível por teclado */
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Validação — integrada às classes ng-* e ao wrapper real .has-danger */
.form-control.ng-invalid.ng-touched,
.form-control.ng-invalid.ng-dirty,
.has-danger .form-control,
.has-error .form-control {
  border-color: var(--danger);
}
.form-control.ng-valid.ng-dirty {
  border-color: var(--accent);
}
.field-error,
.help-block.has-error,
.has-danger .help-block,
.has-error .help-block {
  color: var(--danger);
  font-size: 11.5px;
  margin-top: 4px;
}

/* ================================================================== */
/*  7. BOTÕES                                                          */
/* ================================================================== */
.btn {
  border-radius: var(--radius);
}
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--primary);
  border-color: var(--primary);
  filter: brightness(.94);
}
.btn-success {
  background-color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
.btn-success:hover,
.btn-success:focus {
  background-color: var(--accent);
  border-color: var(--accent);
  filter: brightness(.94);
}
.btn:focus,
.btn:focus-visible {
  box-shadow: var(--focus-ring);
}

/* ================================================================== */
/*  8. TEMA ESCURO — toggle (ícone lua/sol via CSS, sem JS no ícone)   */
/* ================================================================== */
.theme-ico-sun { display: none; }
[data-theme="dark"] .theme-ico-moon { display: none; }
[data-theme="dark"] .theme-ico-sun { display: inline-block; }