/* =========================================================
   MB Pulso — Sistema visual (Fase 2)
   Cores extraidas por amostragem direta do logotipo oficial:
   azul-marinho #08204E, dourado #EDA802, grafite #262E31.
   Mobile-first: regras base sao para telas pequenas; breakpoints
   min-width adicionam/ajustam para telas maiores.
   ========================================================= */

:root {
  --mb-navy: #08204E;
  --mb-navy-light: #0F3372;
  --mb-gold: #EDA802;
  --mb-gold-dark: #C98D00;
  --mb-charcoal: #262E31;
  --mb-gray-900: #1B1F22;
  --mb-gray-700: #4A5257;
  --mb-gray-500: #7A8288;
  --mb-gray-300: #C9CFD3;
  --mb-gray-100: #F2F4F5;
  --mb-white: #FFFFFF;
  --mb-danger: #B3261E;
  --mb-danger-bg: #FBEAE9;
  --mb-success: #1E6B3D;
  --mb-success-bg: #E8F5EC;
  --mb-warning: #8A5A00;
  --mb-warning-bg: #FCF1DA;

  --mb-radius: 10px;
  --mb-radius-sm: 6px;
  --mb-space-1: 4px;
  --mb-space-2: 8px;
  --mb-space-3: 16px;
  --mb-space-4: 24px;
  --mb-space-5: 32px;
  --mb-space-6: 48px;
  --mb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mb-max-width: 1120px;
}

* { box-sizing: border-box; }

html {
  scroll-padding-top: env(safe-area-inset-top, 0px);
}

body {
  margin: 0;
  font-family: var(--mb-font);
  color: var(--mb-gray-900);
  background: var(--mb-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

h1, h2, h3 { color: var(--mb-navy); line-height: 1.2; margin: 0 0 var(--mb-space-3); }
h1 { font-size: 1.75rem; font-weight: 700; }
h2 { font-size: 1.375rem; font-weight: 700; }
h3 { font-size: 1.125rem; font-weight: 600; }
p { margin: 0 0 var(--mb-space-3); color: var(--mb-gray-700); }
a { color: var(--mb-navy-light); text-decoration: none; }
a:hover { text-decoration: underline; }
.mb-logo-img { max-width: 100%; height: auto; display: block; }

/* ---------- layout ---------- */
.mb-container {
  width: 100%;
  max-width: var(--mb-max-width);
  margin: 0 auto;
  padding: 0 var(--mb-space-3);
}

.mb-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.mb-main {
  flex: 1;
}

/* ---------- header ---------- */
.mb-header {
  border-bottom: 1px solid var(--mb-gray-300);
  background: var(--mb-white);
  position: sticky;
  top: 0;
  z-index: 20;
}
.mb-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* CORRECAO: "padding: var(--mb-space-3) 0" e um shorthand que
     redefine TODOS os quatro lados, inclusive os laterais que
     .mb-container ja define com var(--mb-space-3) - como os dois
     ficam no MESMO elemento, o shorthand daqui sobrescrevia o padding
     horizontal do container para 0, colando o simbolo na borda
     esquerda e o botao "Sair" na direita em mobile (visivel nas
     capturas de docs/qa/fase3-cruds/). Trocado por propriedades
     verticais apenas, preservando o padding lateral do container. */
  padding-top: var(--mb-space-3);
  padding-bottom: var(--mb-space-3);
}
.mb-header__logo { display: flex; align-items: center; gap: var(--mb-space-2); }
.mb-header__logo img { height: 28px; width: auto; display: block; margin-right: var(--mb-space-2); }
.mb-header__wordmark { font-weight: 700; color: var(--mb-navy); font-size: 1.05rem; letter-spacing: 0.2px; }
.mb-header__wordmark span { color: var(--mb-gold-dark); }

.mb-header__nav {
  display: none;
  gap: var(--mb-space-4);
  align-items: center;
}
/* Fallback para motores sem suporte a gap em flex (alguns WebViews
   antigos/embarcados) - margem no lugar do gap, sem efeito colateral
   em motores modernos que ja aplicam o gap corretamente. */
.mb-header__nav > * { margin-left: var(--mb-space-4); }
.mb-header__nav > *:first-child { margin-left: 0; }
.mb-header__nav a { color: var(--mb-charcoal); font-weight: 500; }

.mb-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.mb-header__toggle span,
.mb-header__toggle span::before,
.mb-header__toggle span::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--mb-navy);
  position: relative;
  transition: 0.2s;
}
.mb-header__toggle span::before { content: ""; position: absolute; top: -7px; }
.mb-header__toggle span::after { content: ""; position: absolute; top: 7px; }

.mb-header__mobile-menu {
  display: none;
  flex-direction: column;
  gap: var(--mb-space-2);
  padding: var(--mb-space-3) 0 var(--mb-space-4);
  border-top: 1px solid var(--mb-gray-300);
}
.mb-header__mobile-menu.is-open { display: flex; }
.mb-header__mobile-menu a {
  color: var(--mb-charcoal);
  font-weight: 500;
  padding: var(--mb-space-2) 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}

@media (min-width: 720px) {
  .mb-header__nav { display: flex; }
  .mb-header__toggle, .mb-header__mobile-menu { display: none !important; }
}

/* ---------- footer ---------- */
.mb-footer {
  border-top: 1px solid var(--mb-gray-300);
  background: var(--mb-gray-100);
  padding: var(--mb-space-4) 0;
  margin-top: var(--mb-space-6);
}
.mb-footer__row {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-2);
  font-size: 0.875rem;
  color: var(--mb-gray-700);
}
.mb-footer__links { display: flex; gap: var(--mb-space-3); flex-wrap: wrap; }
.mb-footer__links > * { margin-right: var(--mb-space-3); }
.mb-footer__links > *:last-child { margin-right: 0; }
.mb-footer__links a { color: var(--mb-gray-700); }
@media (min-width: 640px) {
  .mb-footer__row { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mb-space-2);
  min-height: 46px;
  padding: 0 var(--mb-space-4);
  border-radius: var(--mb-radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  width: 100%;
}
@media (min-width: 480px) { .btn { width: auto; } }

.btn-primary {
  background: var(--mb-gold);
  color: var(--mb-navy);
}
.btn-primary:hover { background: var(--mb-gold-dark); text-decoration: none; }

.btn-secondary {
  background: var(--mb-navy);
  color: var(--mb-white);
}
.btn-secondary:hover { background: var(--mb-navy-light); text-decoration: none; }

.btn-outline {
  background: transparent;
  border-color: var(--mb-navy);
  color: var(--mb-navy);
}
.btn-outline:hover { background: var(--mb-gray-100); text-decoration: none; }

.btn-block { width: 100%; }

/* ---------- forms ---------- */
.field { margin-bottom: var(--mb-space-3); text-align: left; }
.field label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--mb-charcoal);
  margin-bottom: var(--mb-space-1);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="tel"],
.field select {
  width: 100%;
  min-height: 46px;
  padding: 0 var(--mb-space-3);
  border: 1.5px solid var(--mb-gray-300);
  border-radius: var(--mb-radius-sm);
  font-size: 1rem;
  font-family: inherit;
  background: var(--mb-white);
  color: var(--mb-gray-900);
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--mb-navy);
  box-shadow: 0 0 0 3px rgba(8, 32, 78, 0.12);
}
.field .hint { font-size: 0.8rem; color: var(--mb-gray-500); margin-top: var(--mb-space-1); }
.field .error { font-size: 0.8rem; color: var(--mb-danger); margin-top: var(--mb-space-1); }

.field-check {
  display: flex;
  align-items: flex-start;
  gap: var(--mb-space-2);
  font-size: 0.875rem;
  color: var(--mb-gray-700);
  margin-bottom: var(--mb-space-3);
}
.field-check input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; }
.field-check a { font-weight: 600; }

/* ---------- cards / auth shell ---------- */
.mb-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mb-space-5) var(--mb-space-3);
  min-height: calc(100dvh - 140px);
}
.mb-card {
  width: 100%;
  max-width: 420px;
  background: var(--mb-white);
  border: 1px solid var(--mb-gray-300);
  border-radius: var(--mb-radius);
  padding: var(--mb-space-5) var(--mb-space-4);
}
.mb-card__logo { display: flex; justify-content: center; margin-bottom: var(--mb-space-4); }
.mb-card__logo img { height: 40px; width: auto; }
.mb-card h1 { text-align: center; font-size: 1.375rem; }
.mb-card .mb-card__subtitle {
  text-align: center;
  color: var(--mb-gray-500);
  font-size: 0.9rem;
  margin-top: -8px;
  margin-bottom: var(--mb-space-4);
}
.mb-card__footer {
  text-align: center;
  margin-top: var(--mb-space-4);
  font-size: 0.9rem;
  color: var(--mb-gray-700);
}

/* ---------- alerts ---------- */
.alert {
  padding: var(--mb-space-3);
  border-radius: var(--mb-radius-sm);
  font-size: 0.9rem;
  margin-bottom: var(--mb-space-3);
}
.alert-success { background: var(--mb-success-bg); color: var(--mb-success); }
.alert-error { background: var(--mb-danger-bg); color: var(--mb-danger); }
.alert-warning { background: var(--mb-warning-bg); color: var(--mb-warning); }

/* ---------- landing page ---------- */
.mb-hero {
  padding: var(--mb-space-6) 0 var(--mb-space-5);
  background: linear-gradient(180deg, var(--mb-gray-100) 0%, var(--mb-white) 100%);
  border-bottom: 1px solid var(--mb-gray-300);
}
.mb-hero__grid {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-5);
}
.mb-hero__eyebrow {
  display: inline-block;
  background: var(--mb-navy);
  color: var(--mb-gold);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: var(--mb-space-1) var(--mb-space-2);
  border-radius: 999px;
  margin-bottom: var(--mb-space-3);
}
.mb-hero h1 { font-size: 2rem; margin-bottom: var(--mb-space-3); }
.mb-hero p.lead { font-size: 1.05rem; color: var(--mb-gray-700); }
.mb-hero__actions { display: flex; flex-direction: column; gap: var(--mb-space-2); margin-top: var(--mb-space-4); }
@media (min-width: 480px) { .mb-hero__actions { flex-direction: row; } }
@media (min-width: 960px) {
  .mb-hero__grid { flex-direction: row; align-items: center; }
  .mb-hero__grid > div { flex: 1; }
  .mb-hero__grid > div:last-child { max-width: 320px; }
  .mb-hero__grid > div:last-child img { width: 100%; height: auto; display: block; }
}

.mb-features {
  padding: var(--mb-space-6) 0;
}
.mb-features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mb-space-4);
}
@media (min-width: 640px) { .mb-features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .mb-features__grid { grid-template-columns: repeat(3, 1fr); } }

.mb-feature {
  border: 1px solid var(--mb-gray-300);
  border-radius: var(--mb-radius);
  padding: var(--mb-space-4);
}
.mb-feature__icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--mb-gray-100);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--mb-space-3);
  color: var(--mb-navy);
}
.mb-feature h3 { margin-bottom: var(--mb-space-1); }
.mb-feature p { margin: 0; font-size: 0.9rem; }

.mb-cta {
  background: var(--mb-navy);
  color: var(--mb-white);
  padding: var(--mb-space-5) 0;
  text-align: center;
}
.mb-cta h2 { color: var(--mb-white); }
.mb-cta p { color: var(--mb-gray-300); }

.mb-example-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--mb-gray-500);
  background: var(--mb-gray-100);
  border: 1px solid var(--mb-gray-300);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: var(--mb-space-1);
}

/* ---------- onboarding ---------- */
.mb-onboarding {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--mb-space-5) var(--mb-space-3);
}
.mb-onboarding__step {
  display: flex;
  gap: var(--mb-space-3);
  padding: var(--mb-space-3) 0;
  border-bottom: 1px solid var(--mb-gray-300);
}
.mb-onboarding__step:last-child { border-bottom: none; }
.mb-onboarding__badge {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--mb-gold);
  color: var(--mb-navy);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
}

/* ---------- CRUDs da Fase 3 (correcao de precisao: nenhuma regra de
   flex aqui pode faltar flex-wrap - telas de manutencao (categorias)
   tinham combinacoes sem wrap que comprimiam ou estouravam em
   360px). ---------- */
.mb-data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mb-data-table-wrap table { width: 100%; border-collapse: collapse; min-width: 640px; }
.mb-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.mb-search-form { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.mb-search-form input[type="text"], .mb-search-form select {
  min-height: 44px; padding: 0 12px; border: 1.5px solid var(--mb-gray-300); border-radius: 6px; font-family: inherit; font-size: 1rem;
  /* Correcao (Etapa D, Marco 2) - achado real: um <select> nativo com
     uma option de texto longo (ex.: nome de cliente extenso) podia
     forcar a caixa do proprio select a ficar mais larga que o
     viewport em telas estreitas, causando scroll horizontal na
     PAGINA INTEIRA - max-width:100% + min-width:0 (necessario dentro
     de um container flex para o max-width realmente valer) resolve
     isso sem limitar a largura em telas largas. */
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.mb-search-form input[type="text"] { flex: 1 1 200px; min-width: 0; }
.mb-search-form select { flex: 1 1 160px; }

.mb-category-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--mb-gray-300);
}
.mb-category-row__edit-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 220px;
  min-width: 0;
}
.mb-category-row__edit-form input[type="text"] {
  flex: 1 1 160px;
  min-width: 0;
  min-height: 40px;
  padding: 0 10px;
  border: 1.5px solid var(--mb-gray-300);
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
}
.mb-category-row__status-form { flex-shrink: 0; }

/* Correcao: par de campos (ex.: preco/custo) que precisa empilhar em
   telas pequenas - lado a lado so a partir de um breakpoint onde os
   dois campos (rotulo + texto auxiliar + input) tem espaco real para
   ficar bem alinhados. Mobile-first: empilhado e o padrao. */
.mb-field-pair {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-3);
}
.mb-field-pair > .field { flex: 1; min-width: 0; }
.mb-field-pair > .field input { width: 100%; }
@media (min-width: 480px) {
  .mb-field-pair { flex-direction: row; }
}

/* =========================================================
   MB Pulso — Bloco 2.1: estrutura de app autenticada
   Sidebar fixa no desktop, drawer no mobile. Layout novo,
   substitui o header solto usado ate a Fase 5 Bloco 2.
   ========================================================= */

.mb-app {
  min-height: 100dvh;
  display: flex;
}

/* ---------- sidebar (desktop) / drawer (mobile) ---------- */
.mb-sidebar {
  background: var(--mb-navy);
  color: var(--mb-white);
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mb-sidebar.is-open { transform: translateX(0); }

.mb-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--mb-space-2);
  padding: var(--mb-space-3) var(--mb-space-4);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.mb-sidebar__brand img { height: 26px; width: auto; display: block; background: var(--mb-white); border-radius: 6px; padding: 2px; }
.mb-sidebar__brand span { font-weight: 700; color: var(--mb-white); font-size: 1.05rem; }
.mb-sidebar__brand span em { color: var(--mb-gold); font-style: normal; }

.mb-sidebar__scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--mb-space-3) var(--mb-space-2);
}

.mb-sidebar__group {
  margin-bottom: var(--mb-space-3);
}
.mb-sidebar__group-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.5);
  padding: 0 var(--mb-space-2);
  margin-bottom: var(--mb-space-1);
  font-weight: 700;
}
.mb-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--mb-space-2);
  padding: 10px var(--mb-space-2);
  border-radius: var(--mb-radius-sm);
  color: rgba(255,255,255,0.82);
  font-weight: 500;
  font-size: 0.9375rem;
  min-height: 44px;
}
.mb-sidebar__link:hover { background: rgba(255,255,255,0.08); text-decoration: none; color: var(--mb-white); }
.mb-sidebar__link.is-active {
  background: rgba(237,168,2,0.16);
  color: var(--mb-white);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--mb-gold);
}
.mb-sidebar__icon { flex-shrink: 0; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.mb-sidebar__link--disabled {
  color: rgba(255,255,255,0.35);
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--mb-space-2);
  min-height: 44px;
}
.mb-sidebar__soon {
  font-size: 0.6875rem;
  background: rgba(255,255,255,0.12);
  padding: 2px 8px;
  border-radius: 999px;
}

.mb-sidebar__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8,32,78,0.45);
  z-index: 35;
}
.mb-sidebar__backdrop.is-open { display: block; }

/* ---------- topbar ---------- */
.mb-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--mb-white);
  border-bottom: 1px solid var(--mb-gray-300);
  padding: 10px var(--mb-space-3);
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mb-space-2);
}
.mb-topbar__left { display: flex; align-items: center; gap: var(--mb-space-2); min-width: 0; }
.mb-topbar__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--mb-navy);
}
.mb-topbar__org {
  min-width: 0;
  overflow: hidden;
}
.mb-topbar__org-name {
  font-weight: 700;
  color: var(--mb-navy);
  font-size: 0.9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.mb-topbar__role {
  font-size: 0.75rem;
  color: var(--mb-gray-500);
}
.mb-topbar__right { display: flex; align-items: center; gap: var(--mb-space-2); flex-shrink: 0; }
.mb-topbar__logo { height: 32px; width: auto; max-width: 120px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }
.mb-topbar__logo-fallback { display: inline-flex; align-items: center; flex-shrink: 0; }
.mb-topbar__logo-fallback img { height: 28px; width: auto; }

/* ---------- menu de usuario (topbar) ---------- */
.mb-user-menu { position: relative; }
.mb-user-menu__trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1.5px solid var(--mb-gray-300);
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  min-height: 40px;
  color: var(--mb-navy);
}
.mb-user-menu__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mb-navy);
  color: var(--mb-white);
  font-weight: 700;
  font-size: 0.8125rem;
}
.mb-user-menu__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--mb-white);
  border: 1.5px solid var(--mb-gray-300);
  border-radius: var(--mb-radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  min-width: 200px;
  z-index: 30;
  padding: 6px;
}
.mb-user-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--mb-charcoal);
  font-size: 0.9375rem;
  border: none;
  background: none;
  cursor: pointer;
  min-height: 40px;
  font-family: inherit;
}
.mb-user-menu__item:hover { background: var(--mb-gray-100); text-decoration: none; }
.mb-user-menu__item--button { color: var(--mb-danger); }
.mb-user-menu__item-form { margin: 0; }

@media (min-width: 960px) {
  .mb-sidebar { position: sticky; transform: none; }
  .mb-sidebar__backdrop { display: none !important; }
  .mb-topbar__menu-btn { display: none; }
  .mb-app-content { margin-left: 0; }
}

.mb-app-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.mb-app-main {
  flex: 1;
  padding: var(--mb-space-4) var(--mb-space-3) var(--mb-space-6);
}
.mb-app-main.is-narrow { max-width: 640px; }
.mb-app-main.is-wide { max-width: 960px; }

/* ---------- badges ---------- */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--mb-gray-100);
  color: var(--mb-gray-700);
  white-space: nowrap;
}
.badge-navy { background: var(--mb-navy); color: var(--mb-white); }
.badge-gold { background: var(--mb-gold); color: var(--mb-navy); }
.badge-success { background: var(--mb-success-bg); color: var(--mb-success); }
.badge-danger { background: var(--mb-danger-bg); color: var(--mb-danger); }
.badge-warning { background: var(--mb-warning-bg); color: var(--mb-warning); }

/* ---------- dashboard cards ---------- */
.mb-stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mb-space-3);
  margin-bottom: var(--mb-space-4);
}
@media (min-width: 640px) { .mb-stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .mb-stat-grid { grid-template-columns: repeat(4, 1fr); } }

.mb-stat-card {
  background: var(--mb-white);
  border: 1.5px solid var(--mb-gray-300);
  border-radius: var(--mb-radius);
  padding: var(--mb-space-3);
}
.mb-stat-card__label { font-size: 0.8125rem; color: var(--mb-gray-500); font-weight: 600; margin-bottom: 4px; }
.mb-stat-card__value { font-size: 1.5rem; font-weight: 800; color: var(--mb-navy); line-height: 1.15; }
.mb-stat-card__meta { font-size: 0.8125rem; color: var(--mb-gray-500); margin-top: 4px; }
.mb-stat-card--danger .mb-stat-card__value { color: var(--mb-danger); }
.mb-stat-card--success .mb-stat-card__value { color: var(--mb-success); }

.mb-panel {
  background: var(--mb-white);
  border: 1.5px solid var(--mb-gray-300);
  border-radius: var(--mb-radius);
  padding: var(--mb-space-3);
  margin-bottom: var(--mb-space-3);
}
.mb-panel__title { font-weight: 700; color: var(--mb-navy); margin-bottom: var(--mb-space-2); font-size: 1rem; }
.mb-panel__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--mb-gray-100);
  font-size: 0.9375rem;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.mb-panel__row:last-child { border-bottom: none; }
.mb-panel__row > span:first-child { min-width: 0; word-break: break-word; }

.mb-quick-actions { display: flex; flex-wrap: wrap; gap: var(--mb-space-2); margin-bottom: var(--mb-space-4); }

/* ---------- estado vazio ---------- */
.mb-empty {
  text-align: center;
  padding: var(--mb-space-6) var(--mb-space-3);
  color: var(--mb-gray-500);
}
.mb-empty__icon { font-size: 2.5rem; margin-bottom: var(--mb-space-2); opacity: 0.5; }
.mb-empty__title { font-weight: 700; color: var(--mb-charcoal); margin-bottom: 4px; font-size: 1.0625rem; }
.mb-empty__hint { font-size: 0.9375rem; margin-bottom: var(--mb-space-3); }

/* ---------- central de importacao ---------- */
.mb-import-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--mb-space-4); }
.mb-import-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--mb-gray-500);
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--mb-gray-100);
}
.mb-import-step.is-current { background: var(--mb-navy); color: var(--mb-white); font-weight: 700; }
.mb-import-step.is-done { background: var(--mb-success-bg); color: var(--mb-success); }

.mb-dropzone {
  border: 2px dashed var(--mb-gray-300);
  border-radius: var(--mb-radius);
  padding: var(--mb-space-5) var(--mb-space-3);
  text-align: center;
  background: var(--mb-gray-100);
}
.mb-dropzone strong { color: var(--mb-navy); }

.mb-import-summary { display: flex; flex-wrap: wrap; gap: var(--mb-space-3); margin: var(--mb-space-3) 0; }
.mb-import-summary__item { flex: 1 1 120px; text-align: center; padding: var(--mb-space-2); border-radius: var(--mb-radius-sm); background: var(--mb-gray-100); }
.mb-import-summary__item strong { display: block; font-size: 1.375rem; color: var(--mb-navy); }
.mb-import-summary__item.is-error strong { color: var(--mb-danger); }
.mb-import-summary__item.is-warning strong { color: var(--mb-warning); }
.mb-import-summary__item.is-success strong { color: var(--mb-success); }

/* ---------- confirmacao destrutiva ---------- */
.mb-confirm-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mb-hint-text { font-size: 0.8125rem; color: var(--mb-gray-500); margin-top: 8px; }

/* ---------- utilitarios (Bloco 2.1, correcao V2 - item 10: migrando
   estilos inline repetidos das telas novas para classes) ---------- */
.mb-text-muted { color: var(--mb-gray-500); }
.mb-card-actions { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.mb-btn-compact { min-height: 38px; }
.mb-mt-2 { margin-top: 10px; }
.mb-mt-3 { margin-top: 16px; }
.mb-actions-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mb-textarea-mono {
  width: 100%;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 0.8125rem;
  padding: 10px;
  border: 1.5px solid var(--mb-gray-300);
  border-radius: 6px;
}
.mb-data-table-wrap table th, .mb-data-table-wrap table td { padding: 8px; }
.mb-data-table-wrap table tr { border-bottom: 1px solid var(--mb-gray-300); }
.mb-cell-detail { font-size: 0.8125rem; color: var(--mb-gray-500); }

/* ---------- Bloco 3: Dashboard - filtro de periodo, graficos, deltas ---------- */
.mb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mb-period-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-2);
  align-items: center;
  margin-bottom: var(--mb-space-3);
}

.mb-delta {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-top: 4px;
}
.mb-delta.is-up { color: var(--mb-success); }
.mb-delta.is-down { color: var(--mb-danger); }
.mb-delta.is-flat { color: var(--mb-gray-500); }

.mb-chart-card {
  background: var(--mb-white);
  border: 1.5px solid var(--mb-gray-300);
  border-radius: var(--mb-radius);
  padding: var(--mb-space-3);
  margin-bottom: var(--mb-space-3);
}
.mb-chart-container {
  position: relative;
  width: 100%;
  height: 260px;
}
.mb-chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

.mb-position-note {
  font-size: 0.8125rem;
  color: var(--mb-gray-500);
  margin-top: 4px;
}

/* ---------- Bloco 3: Pulso do Negocio ---------- */
.mb-pulse-card {
  background: var(--mb-white);
  border: 1.5px solid var(--mb-gray-300);
  border-left: 4px solid var(--mb-gray-300);
  border-radius: var(--mb-radius);
  padding: var(--mb-space-3);
  margin-bottom: var(--mb-space-3);
}
.mb-pulse-card.is-priority-high { border-left-color: var(--mb-danger); }
.mb-pulse-card.is-priority-medium { border-left-color: var(--mb-warning); }
.mb-pulse-card.is-priority-low { border-left-color: var(--mb-gray-500); }
.mb-pulse-card__title { font-weight: 700; color: var(--mb-navy); margin-bottom: 6px; }
.mb-pulse-card__data { font-size: 0.9375rem; margin-bottom: 6px; }
.mb-pulse-card__rule { font-size: 0.8125rem; color: var(--mb-gray-500); margin-bottom: 8px; }
.mb-pulse-card__action { font-size: 0.9375rem; font-weight: 600; color: var(--mb-navy); }
.mb-pulse-card__period { font-size: 0.75rem; color: var(--mb-gray-500); margin-top: 8px; }

/* ---------- Etapa B: construtor dinamico de itens ---------- */
.mb-line-item {
  border: 1.5px solid var(--mb-gray-300);
  border-radius: var(--mb-radius-sm);
  padding: var(--mb-space-3);
  margin-bottom: var(--mb-space-2);
  position: relative;
}
.mb-line-item__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mb-space-2);
}
@media (min-width: 720px) {
  .mb-line-item__grid { grid-template-columns: 2fr 1fr 1fr; }
}
.mb-line-item__search { position: relative; margin-bottom: var(--mb-space-2); }
.mb-item-search__results {
  position: absolute;
  z-index: 10;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--mb-white);
  border: 1.5px solid var(--mb-gray-300);
  border-radius: var(--mb-radius-sm);
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.mb-item-search__result {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.9375rem;
  min-height: 40px;
}
.mb-item-search__result:hover, .mb-item-search__result:focus { background: var(--mb-gray-100); }
.mb-line-item__footer { display: flex; justify-content: space-between; align-items: center; margin-top: var(--mb-space-2); }
.mb-line-item__subtotal { font-weight: 700; color: var(--mb-navy); }
.mb-document-total {
  text-align: right;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--mb-navy);
  padding: var(--mb-space-3) 0;
  border-top: 2px solid var(--mb-navy);
  margin-top: var(--mb-space-3);
}

/* ---------- Etapa B: modal/drawer ---------- */
.mb-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8,32,78,0.5);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: var(--mb-space-3);
}
.mb-modal-backdrop.is-open { display: flex; }
.mb-modal {
  background: var(--mb-white);
  border-radius: var(--mb-radius);
  padding: var(--mb-space-4);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.mb-modal__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--mb-space-3); }
.mb-modal__close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--mb-gray-500); min-width: 44px; min-height: 44px; }

/* V17: menu recolhível sem ocupar espaço no conteúdo. */
.mb-sidebar__close{display:none;border:1px solid #ffffff40;background:#ffffff10;color:#fff;border-radius:8px;width:40px;height:40px;font-size:24px;position:absolute;right:12px;top:12px;cursor:pointer}.mb-nav-drawer-open{overflow:hidden}.mb-topbar__menu-btn:focus-visible,.mb-sidebar__close:focus-visible{outline:3px solid #bd8809;outline-offset:2px}
@media(min-width:960px){.mb-topbar__menu-btn{display:inline-flex}.mb-app.is-nav-collapsed>.mb-sidebar{display:none}.mb-topbar__menu-btn:hover{background:#eef2f8;border-radius:8px}}
@media(max-width:959px){.mb-sidebar__close{display:block}.mb-sidebar__brand{padding-right:62px}.mb-topbar__org-name{max-width:calc(100vw - 185px);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.mb-topbar{padding-left:12px;padding-right:12px}}
@media(prefers-reduced-motion:reduce){.mb-sidebar{transition:none}}

/* Fixed icon boxes: align to the button center, independent of font baselines. */
.btn svg,.mb-topbar__menu-btn svg,.mb-sidebar__close svg{display:block;flex:0 0 auto;width:20px;height:20px;align-self:center;vertical-align:middle}
.btn .mb-sidebar__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;width:20px;height:20px;line-height:1}
.billing-method__icon{display:flex!important;align-items:center;justify-content:center;flex:none;line-height:1}
.billing-method__icon svg{display:block;width:24px;height:24px;flex:none}