/* ===================================================================
   AppMaxEquipa — theme layer on top of Bootstrap 5.3 (wwwroot/lib/bootstrap).
   Cores extraídas da logo real (Docs/MAXEQUIPA.png): vermelho gradiente
   com borda dupla branca. Aprovado no canvas de design "MaxEquipa Topbar
   e Sidebar" (artboard principal, sidebar escura).
=================================================================== */
:root {
  --brand: #e23b32;
  --brand-2: #7a0f0a;
  --brand-soft: #fbe9e7;
  --wine-mid: #8a2530;
  --wine-dark: #5c1015;
  --wine-border-soft: #f1b9bc;

  /* ===== Neutros — únicos tons de cinza de texto/borda apagados do tema; reaproveitar
     em vez de aproximar um novo hex "a olho" ===== */
  --mx-muted: #9aa1ab;
  --mx-text-2: #6b7178;
  --mx-border: #c7ccd3;

  --mx-page-bg: #F7F8F9;
  --mx-sidebar-bg: #2A2E35;
  --mx-sidebar-text: #cfd4dc;
  --mx-sidebar-text-muted: var(--mx-muted);
  --mx-topbar-height: 56px;
  --mx-sidebar-width: 260px;

  --mx-teal: #1F7A5A;
  --mx-purple: #5B4B9A;

  /* ===== Neutraliza o azul padrão do Bootstrap (links, anel de foco) ===== */
  --bs-primary: var(--brand);
  --bs-primary-rgb: 226, 59, 50;
  --bs-link-color: var(--wine-mid);
  --bs-link-color-rgb: 138, 37, 48;
  --bs-link-hover-color: var(--brand-2);
  --bs-link-hover-color-rgb: 122, 15, 10;
  --bs-focus-ring-color: rgba(226, 59, 50, .25);
  --bs-danger: var(--wine-dark);
  --bs-danger-rgb: 92, 16, 21;

  /* ===== Neutraliza o azul padrão do tema Syncfusion (grid, combobox, pager, checkbox) =====
     O tema bootstrap5.3.css do Syncfusion não lê variáveis --bs-*, usa as suas próprias
     --color-sf-primary-*, então precisam ser sobrescritas à parte (theme.css carrega depois
     do tema Syncfusion em App.razor para isso funcionar). */
  --color-sf-primary: var(--brand);
  --color-sf-primary-text-color: #fff;
  --color-sf-primary-light: #e79490;
  --color-sf-primary-lighter: var(--brand-soft);
  --color-sf-primary-dark: var(--brand-2);
  --color-sf-primary-darker: #4a0906;
  --color-sf-primary-shadow: 226, 59, 50;
  --color-sf-primary-bg-color-hover: var(--brand-2);
  --color-sf-primary-border-color-hover: var(--brand-2);
  --color-sf-primary-bg-color-pressed: var(--brand-2);
  --color-sf-primary-border-color-pressed: var(--brand-2);
  --color-sf-primary-bg-color-disabled: rgba(226, 59, 50, .5);
  --color-sf-content-bg-color-selected: var(--brand);
  --color-sf-flyout-bg-color-pressed: var(--brand);
}

body {
  background: var(--mx-page-bg);
}

/* Bootstrap fixa a border-color E o box-shadow de :focus num azul hardcoded (#86b7fe e
   rgba(13,110,253,.25) — nenhum dos dois lê --bs-*; --bs-focus-ring-color só é consumida pelas
   classes utilitárias .focus-ring, não por este seletor). Sem isso, todo <select>/<input>
   Bootstrap comum (fora dos componentes Syncfusion) mostra borda E anel de foco azuis, quebrando
   o tema. */
.form-control:focus,
.form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

/* ===== Shell: topbar + sidebar + conteúdo ===== */
.mx-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.mx-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.mx-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 28px 32px;
}

.mx-shell.mx-sidebar-collapsed .mx-sidebar {
  display: none;
}

/* ===== Topbar ===== */
.mx-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--mx-topbar-height);
  flex: 0 0 auto;
  background: #ffffff;
  border-bottom: 1px solid #E2E5E9;
  padding: 0 18px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.mx-topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mx-topbar-logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: block;
}

.mx-topbar-name {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .6px;
  color: #2A2E35;
}

.mx-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid #E2E5E9;
  background: #fff;
  cursor: pointer;
  color: #2A2E35;
  font-size: 17px;
  line-height: 1;
}

.mx-icon-btn:hover {
  background: #F7F8F9;
  border-color: var(--mx-border);
}

/* ===== Sidebar (escura) ===== */
.mx-sidebar {
  width: var(--mx-sidebar-width);
  flex: 0 0 auto;
  background: var(--mx-sidebar-bg);
  overflow-y: auto;
  padding: 10px 0 20px;
}

.mx-nav-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 18px;
  background: none;
  border: 0;
  cursor: pointer;
  color: #e7e9ec;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.mx-nav-group-toggle--static {
  cursor: default;
  opacity: .5;
}

.mx-nav-group-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mx-nav-chev {
  font-size: 11px;
  color: var(--mx-sidebar-text-muted);
  transition: transform .15s ease;
}

.mx-nav-group-toggle[aria-expanded="false"] .mx-nav-chev {
  transform: rotate(-90deg);
}

.mx-nav-child {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 32px;
  margin: 1px 8px;
  border-radius: 6px;
  border-left: 3px solid transparent;
  color: var(--mx-sidebar-text);
  font-size: 13.5px;
  text-decoration: none;
}

.mx-nav-child:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  text-decoration: none;
}

.mx-nav-child.active {
  background: rgba(226, 59, 50, .20);
  border-left-color: var(--brand);
  color: #fff;
  font-weight: 600;
}

/* ===== Cabeçalho de página / cards de conteúdo ===== */
.mx-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.mx-page-head-main {
  display: flex;
  align-items: center;
  gap: 14px;
  /* Força o bloco de título a ocupar a linha inteira, empurrando .actions para a linha de
     baixo sempre — sem isso, .mx-page-head (flex-wrap) só quebra linha quando título+subtítulo+
     botões juntos não cabem na largura da janela, então a mesma página vira uma linha só ou duas
     dependendo do comprimento do Subtitulo e da largura da tela, ficando inconsistente entre
     páginas com Subtitulo mais curto/longo (ex.: as três páginas de Resumo de Locação). */
  flex: 1 1 100%;
}

.title-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--brand-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  font-size: 18px;
  flex-shrink: 0;
}

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wine-mid);
  margin-bottom: 3px;
}

.mx-page-head h1 {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  color: var(--wine-dark);
  letter-spacing: -.1px;
}

.mx-page-head .sub {
  font-size: 12.5px;
  color: var(--mx-muted);
  margin-top: 3px;
}

.mx-page-head .actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ===== Título de seção secundária (dentro de página/card/formulário, ex.: "Itens do
   contrato", "Ordem de cadastro", título de card de módulo) — deliberadamente menor que o
   título de modal (.mx-modal-head h2, 16px) para não competir com ele quando aparece dentro
   de um modal. ===== */
.mx-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #2A2E35;
}

/* ===== Filtros rápidos ===== */
.mx-filters-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 14px;
  align-items: end;
}

/* Syncfusion (SfComboBox, SfMultiSelect) renderiza e-input-group com altura própria, diferente
   entre os dois componentes — sem isso, colunas Syncfusion ficam desalinhadas verticalmente no
   mesmo .mx-filters-row (align-items: end evidencia a diferença). Mesmo ajuste já existe para
   dentro de .mx-modal-body, mais abaixo neste arquivo. */
.mx-filters-row .e-input-group,
.mx-filters-row .e-input-group.e-control-wrapper {
  min-height: 34px;
  font-size: 13px;
}

.mx-icon-input-wrap {
  position: relative;
}

.mx-icon-input-wrap i {
  position: absolute;
  left: 10px;
  top: 38px;
  color: var(--mx-muted);
  font-size: 13px;
}

.mx-icon-input-wrap input {
  padding-left: 32px;
}

.mx-link-btn {
  background: none;
  border: none;
  color: var(--mx-text-2);
  font-size: 13px;
  height: 34px;
  cursor: pointer;
  padding: 0 4px;
}

/* ===== Ações de linha (lupa / editar / excluir) ===== */
.mx-row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.mx-icon-btn-sm {
  width: 27px;
  height: 27px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  cursor: pointer;
  background: #fff;
  font-size: 12.5px;
}

.mx-icon-btn-view {
  border-color: var(--mx-border);
  color: var(--mx-muted);
}

.mx-icon-btn-edit {
  border-color: var(--mx-border);
  color: var(--mx-text-2);
}

.mx-icon-btn-del {
  border-color: var(--wine-border-soft);
  color: var(--wine-dark);
}

.mx-icon-btn-star {
  border-color: var(--mx-border);
  color: var(--mx-border);
}

.mx-icon-btn-star.is-active {
  border-color: var(--brand);
  color: var(--brand);
}

.mx-icon-btn-sm:disabled {
  opacity: .35;
  cursor: default;
}

/* ===== Etiquetas (Perfil) e status (Ativo/Inativo) ===== */
.mx-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  margin-right: 4px;
  white-space: nowrap;
}

.mx-tag-cliente {
  background: #E8F0FA;
  color: #2E5A88;
}

.mx-tag-fornecedor {
  background: #FFF3E6;
  color: #B45309;
}

.mx-tag-neutral {
  background: #F0F1F3;
  color: var(--mx-text-2);
}

.mx-tag-novo {
  background: #E4F3E9;
  color: #1F7A5A;
}

.mx-tag-remessa {
  background: #E4F3F0;
  color: var(--mx-teal);
}

.mx-tag-devolucao {
  background: #F3EAF7;
  color: var(--wine-mid);
}

/* ===== Cores por Contexto (Obra/Contrato) nos Resumos de Locação — ver ResumoContextoCores.cs.
   Paleta categórica de 7 tons, ordem fixa (nunca reciclada), validada para separação sob daltonismo
   e piso de contraste (mesmo protocolo do canvas de design aprovado para esta tela) — a 8ª cor da
   família (vermelho) foi descartada de propósito por coincidir com --brand (ações destrutivas).
   mx-ctx-outros cobre o 8º valor distinto em diante, com cor neutra em vez de reciclar uma cor já
   usada por outro contexto. */
.mx-ctx-1 { background: #E1ECF9; color: #2A78D6; }
.mx-ctx-2 { background: #FCEAE3; color: #C24E1D; }
.mx-ctx-3 { background: #DFF4EC; color: #158F63; }
.mx-ctx-4 { background: #FCF2DB; color: #A67200; }
.mx-ctx-5 { background: #FCECF2; color: #C2467A; }
.mx-ctx-6 { background: #DBEEDB; color: #006B00; }
.mx-ctx-7 { background: #E6E3F3; color: #4A3AA7; }
.mx-ctx-outros { background: #EDEEF0; color: var(--mx-text-2); }

.mx-cond-b {
  background: #E4F3E9;
  color: var(--mx-teal);
}

.mx-cond-al {
  background: #FFF3E6;
  color: #B45309;
}

.mx-cond-am {
  background: #FDEAD9;
  color: #C2410C;
}

.mx-cond-s {
  background: #FBEAEA;
  color: var(--wine-dark);
}

.mx-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
}

.mx-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

.mx-status-badge.on {
  color: #2A2E35;
}

.mx-status-badge.on .mx-status-dot {
  background: #2E7D46;
}

.mx-status-badge.off {
  color: var(--mx-muted);
}

.mx-status-badge.off .mx-status-dot {
  background: var(--mx-border);
}

/* ===== Ícone de status MFA (grade de Usuários) — mesma paleta semântica de .mx-status-badge
   (on/warn/off/danger) acima e abaixo, só aplicada à cor de um ícone de shield em vez de um dot. */
.mx-mfa-ok {
  color: #2E7D46;
}

.mx-mfa-warn {
  color: #E0A02B;
}

.mx-mfa-off {
  color: var(--mx-muted);
}

.mx-mfa-danger {
  color: var(--wine-dark);
}

/* ===== Popup (ModalShell) ===== */
.mx-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 26, .55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 70px 16px;
  overflow-y: auto;
  z-index: 1050;
}

.mx-modal-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
  width: 100%;
  margin-bottom: 40px;
}

.mx-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #EDEEF0;
}

.mx-modal-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #2A2E35;
}

.mx-modal-head .modal-meta {
  font-size: 12.5px;
  color: var(--mx-muted);
  margin-top: 3px;
}

.mx-modal-close {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mx-muted);
  flex-shrink: 0;
  cursor: pointer;
}

.mx-modal-body {
  padding: 20px 22px;
}

/* ===== Campos mais compactos dentro de modais (form-control/form-select "grandes"
   demais para caber várias linhas de campo sem rolagem) — .mx-form-page aplica o mesmo
   padrão em formulários de página inteira (sem popup), ex.: Novo/Editar Romaneio. ===== */
.mx-modal-body .form-label,
.mx-form-page .form-label {
  margin-bottom: 3px;
  font-size: 12px;
}

.mx-modal-body .form-control,
.mx-modal-body .form-select,
.mx-form-page .form-control,
.mx-form-page .form-select {
  min-height: 34px;
  padding: .3rem .65rem;
  font-size: 13px;
}

.mx-modal-body textarea.form-control,
.mx-form-page textarea.form-control {
  min-height: 0;
  resize: vertical;
}

.mx-modal-body .e-input-group,
.mx-modal-body .e-input-group.e-control-wrapper,
.mx-form-page .e-input-group,
.mx-form-page .e-input-group.e-control-wrapper {
  min-height: 34px;
  font-size: 13px;
}

.mx-modal-body .form-check-input,
.mx-form-page .form-check-input {
  margin-top: .2rem;
}

.mx-modal-body .form-control-plaintext,
.mx-form-page .form-control-plaintext {
  padding-top: .3rem;
  padding-bottom: .3rem;
  font-size: 13px;
}

.mx-form-page {
  padding: 18px 20px;
}

.mx-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid #EDEEF0;
}

/* Bootstrap .btn não tem white-space:nowrap; dentro de um flex container, um botão sem
   flex-shrink:0 pode ser espremido abaixo da largura do seu ícone+texto e o texto quebra
   em duas linhas dentro do próprio botão (em vez de o botão inteiro passar para a linha
   de baixo). Nunca deve encolher — ou fica com a largura natural, ou (se o pai tiver
   flex-wrap) o botão inteiro desce de linha. */
.mx-modal-foot .btn {
  flex-shrink: 0;
}

.mx-alert-danger {
  background: #FBEAEA;
  border: 1px solid var(--wine-border-soft);
  color: var(--wine-mid);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 13px;
}

.mx-alert-danger .ttl {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  margin-bottom: 6px;
}

.mx-alert-danger ul {
  margin: 0;
  padding-left: 20px;
}

.mx-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}

.mx-span2 {
  grid-column: 1 / -1;
}

.mx-field-err .form-control,
.mx-field-err .form-select {
  border-color: var(--wine-dark);
  background: #FFF9F9;
}

.mx-err-text {
  color: var(--wine-dark);
  font-size: 11.5px;
  margin-top: 5px;
}

.mx-req-note {
  font-size: 12px;
  color: var(--mx-muted);
}

/* ===== Ver detalhes (somente leitura) ===== */
.mx-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}

.mx-detail-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mx-muted);
  font-weight: 700;
  margin-bottom: 5px;
}

.mx-detail-val {
  font-size: 14px;
  color: #2A2E35;
}

.mx-detail-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: #EDEEF0;
  margin: 2px 0;
}

/* ===== Galeria de fotos do equipamento ===== */
.mx-foto-upload {
  border: 1px dashed var(--mx-border);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  background: #FAFAFB;
}

.mx-foto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}

.mx-foto-card {
  border: 1px solid #EDEEF0;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: #fff;
}

.mx-foto-card img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
  background: #F0F1F3;
}

.mx-foto-badge-capa {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--brand);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.mx-foto-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 6px;
  border-top: 1px solid #EDEEF0;
}

.mx-foto-actions .mx-icon-btn-sm {
  width: 24px;
  height: 24px;
  font-size: 11.5px;
}

.mx-card {
  background: #fff;
  border-radius: 8px;
  border-top: 4px solid var(--brand);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  overflow: hidden;
}

/* EnableStickyHeader do SfTreeGrid usa position:sticky relativo ao scroll da página;
   o overflow:hidden do .mx-card (usado para arredondar os cantos) quebra esse contexto
   e o cabeçalho "gruda" no card em vez da viewport. Este modificador troca para
   overflow:visible e arredonda só o primeiro/último filho, preservando a aparência. */
.mx-card-sticky {
  overflow: visible;
}

.mx-card-sticky > :first-child {
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.mx-card-sticky > :last-child {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

.mx-card .table {
  width: 100%;
  margin-bottom: 0;
  font-size: 13.5px;
}

.mx-card thead th {
  background: #F7F8F9;
  color: var(--mx-text-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid #E7E9EC;
}

/* ===== Menu principal (Home): cards de módulo ===== */
.mx-module-card {
  height: 100%;
}

.mx-module-card-body {
  padding: 16px 18px;
  min-height: 270px;
}

.mx-module-card-title {
  margin-bottom: 8px;
}

.mx-module-item-disabled {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--mx-muted);
  cursor: default;
}

.mx-badge-em-breve {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* ===== Status extra (Suspenso / Cancelado) ===== */
.mx-status-badge.warn {
  color: #2A2E35;
}

.mx-status-badge.warn .mx-status-dot {
  background: #E0A02B;
}

.mx-status-badge.danger {
  color: #2A2E35;
}

.mx-status-badge.danger .mx-status-dot {
  background: var(--wine-dark);
}

/* ===== Mini add-row (linha de adicionar item dentro de um popup ou de página de formulário) ===== */
.mx-mini-add-row {
  display: grid;
  gap: 10px;
  align-items: end;
  background: #F7F8F9;
  border: 1px solid #EDEEF0;
  border-radius: 8px;
  padding: 14px;
  margin: 14px 0;
}

.mx-mini-add-row label {
  display: block;
  font-size: 11.5px;
  color: var(--mx-text-2);
  margin-bottom: 4px;
}

/* Escopado a "select/input filho direto" (não "select, input" solto) para não pegar o <input>
   interno que o Syncfusion (SfComboBox, SfNumericTextBox) renderiza dentro do próprio e-input-group
   — senão o input nativo do Syncfusion herdava borda/padding duplicados por cima dos dele. */
.mx-mini-add-row > div > select,
.mx-mini-add-row > div > input {
  width: 100%;
  height: 33px;
  border: 1px solid #CED4DA;
  border-radius: 6px;
  padding: 0 9px;
  font-size: 13px;
}

/* Mesmo ajuste de altura/fonte já usado em .mx-filters-row/.mx-modal-body/.mx-form-page para
   alinhar o e-input-group do Syncfusion com os campos nativos da mesma linha. */
.mx-mini-add-row .e-input-group,
.mx-mini-add-row .e-input-group.e-control-wrapper {
  min-height: 33px;
  font-size: 13px;
}

/* ===== Toggle de visão (segmented control) ===== */
.mx-view-toggle {
  display: inline-flex;
  background: #F0F1F3;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.mx-view-btn {
  border: none;
  background: none;
  padding: 6px 13px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mx-text-2);
  cursor: pointer;
}

.mx-view-btn.active {
  background: #fff;
  color: var(--wine-dark);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

/* ===== Tabela de itens dentro de popups ou de páginas de formulário ===== */
.mx-items-table {
  border: 1px solid #EDEEF0;
  border-radius: 8px;
  overflow: hidden;
}

.mx-items-table .table {
  font-size: 13px;
  margin-bottom: 0;
}

.mx-items-table thead th {
  background: #FAFBFC;
}

.mx-hint-inline {
  font-size: 11.5px;
  color: var(--mx-muted);
  font-style: italic;
}

/* ===== Telas de Resumo de Locação (Cliente / Obra / Contrato) ===== */
.mx-ctx-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  font-size: 12.5px;
  color: var(--mx-text-2);
  padding: 12px 16px;
  border-top: 1px solid #E7E9EC;
}

.mx-ctx-line b {
  color: #2A2E35;
}

.mx-ctx-sep {
  color: var(--mx-border);
}

.mx-saldo-neg {
  color: var(--wine-mid);
  font-weight: 700;
}

/* ===== Aviso de filtro ativo (ex.: Romaneios chegando via link "Ver Romaneios" do Contrato) ===== */
.mx-filtro-ativo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--brand-soft);
  border: 1px solid var(--wine-border-soft);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--wine-dark);
}

.mx-filtro-ativo b {
  font-weight: 700;
}

.mx-filtro-ativo button {
  border: none;
  background: #fff;
  color: var(--wine-dark);
  border-radius: 6px;
  width: 24px;
  height: 24px;
  font-size: 11px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

/* ===== Botão primário (marca) =====
   Bootstrap define --bs-btn-disabled-bg/-border-color à parte das variáveis "normais" acima
   (com os tons azul/vermelho padrão dele, não os da marca) — sem sobrescrever aqui também, um
   botão primary/danger desabilitado (ex.: "Importar" antes de selecionar itens) volta a aparecer
   azul/vermelho-Bootstrap em vez da cor da marca. */
.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-2);
  --bs-btn-hover-border-color: var(--brand-2);
  --bs-btn-active-bg: var(--brand-2);
  --bs-btn-active-border-color: var(--brand-2);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
}

/* Excluir/ações destrutivas — mesma família de vermelho/vinho da marca, tom mais escuro
   para se distinguir da ação primária (--brand). */
.btn-danger {
  --bs-btn-bg: var(--wine-dark);
  --bs-btn-border-color: var(--wine-dark);
  --bs-btn-hover-bg: #430b0f;
  --bs-btn-hover-border-color: #430b0f;
  --bs-btn-active-bg: #430b0f;
  --bs-btn-active-border-color: #430b0f;
  --bs-btn-disabled-bg: var(--wine-dark);
  --bs-btn-disabled-border-color: var(--wine-dark);
}

.btn-outline-danger {
  --bs-btn-color: var(--wine-dark);
  --bs-btn-border-color: var(--wine-dark);
  --bs-btn-hover-bg: var(--wine-dark);
  --bs-btn-hover-border-color: var(--wine-dark);
  --bs-btn-active-bg: var(--wine-dark);
  --bs-btn-active-border-color: var(--wine-dark);
  --bs-btn-disabled-color: var(--wine-dark);
  --bs-btn-disabled-border-color: var(--wine-dark);
}

/* ===== Telas de autenticação (login, convite, redefinir senha, MFA) — sem topbar/sidebar ===== */
.mx-auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

.mx-auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}

.mx-auth-logo {
  width: 48px;
  height: 48px;
  border-radius: 10px;
}

.mx-auth-brand-name {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .6px;
  color: #2A2E35;
}

.mx-auth-card {
  width: 100%;
  max-width: 420px;
  padding: 28px 26px;
}

.mx-auth-card h1 {
  font-size: 18px;
  font-weight: 700;
  color: var(--wine-dark);
  margin-bottom: 4px;
}

.mx-auth-card .sub {
  font-size: 12.5px;
  color: var(--mx-muted);
  margin-bottom: 20px;
}

.mx-auth-links {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 12.5px;
}

.mx-auth-qr {
  display: flex;
  justify-content: center;
  padding: 14px;
  background: #fff;
  border: 1px solid #EDEEF0;
  border-radius: 8px;
  margin: 14px 0;
}

.mx-auth-qr img {
  width: 200px;
  height: 200px;
}

.mx-recovery-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  background: #F7F8F9;
  border: 1px solid #EDEEF0;
  border-radius: 8px;
  padding: 14px 18px;
  margin: 14px 0;
  font-family: "Courier New", monospace;
  font-size: 13.5px;
}

/* ===== SfTreeGrid (Resumos de Locação — modos Lista e Resumo, únicas telas com .e-treegrid) =====
   O padrão do tema Syncfusion (bootstrap5.3.css) reserva um "e-treecell-child" (10px) por nível de
   ancestral mais um ícone de 18px para o próprio nó — numa árvore de 3 níveis (Categoria > Equipamento
   > movimento-folha) isso empilha até 4 espaços reservados antes do texto da folha, que já é vazio de
   propósito (ResumoTreeBuilder não repete Categoria/Equipamento em cada folha) — o resultado é uma
   primeira coluna claramente maior que o necessário nas folhas. Aperta os espaços reservados e o
   ícone de expandir/recolher para o recuo ficar compacto e consistente entre os níveis. */
.e-treegrid .e-treecolumn-container .e-treecell-child {
  width: 6px;
}
.e-treegrid .e-treecolumn-container .e-treecell-icon {
  width: 2px;
}
.e-treegrid .e-treegridexpand,
.e-treegrid .e-treegridcollapse {
  width: 14px;
  height: 14px;
  font-size: 14px;
}

/* Linha-folha do modo Resumo (Obra em Resumo Cliente, Contrato em Resumo Obra/Contrato) — fonte
   menor e cor secundária, marcada via RowDataBound (ver OnResumoRowDataBound), para o subtotal da
   linha de Equipamento (grupo) acima se destacar por contraste, sem precisar negritar nada a mais. */
/* ===== KPI strip (Operações Confirmadas, Posição de Estoque, Consulta de Equipamento — "Rota e
   Razão", 31/08/2026) — mesma linguagem visual de .mx-card (fundo branco, borda superior de marca,
   sombra leve), sem componente Blazor dedicado: cada página monta o grid inline. ===== */
.mx-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.mx-kpi {
  background: #fff;
  border-radius: 8px;
  border-top: 4px solid var(--brand);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  padding: 14px 16px;
}
.mx-kpi .lbl {
  font-size: 10.5px;
  color: var(--mx-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.mx-kpi .num {
  font-family: "Consolas", "SFMono-Regular", monospace;
  font-size: 24px;
  font-weight: 600;
  color: #2A2E35;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.mx-kpi .num.warn { color: #B45309; }
.mx-kpi .num.danger { color: var(--wine-dark); }
.mx-kpi .sub {
  font-size: 10.5px;
  color: var(--mx-muted);
  margin-top: 2px;
}

/* ===== Rota (origem → destino), usada em Operações Confirmadas e Posição de Estoque ===== */
.mx-route {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  flex-wrap: wrap;
}
.mx-route .node {
  color: var(--wine-dark);
}
.mx-route .arw {
  color: var(--mx-border);
}

/* ===== Hub "Movimentar Estoque" ===== */
.mx-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.mx-hub-card {
  display: block;
  background: #fff;
  border-radius: 8px;
  border-top: 4px solid var(--brand);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  padding: 18px 16px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s ease, transform .15s ease;
}
.mx-hub-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  transform: translateY(-1px);
}
.mx-hub-card .ico {
  font-size: 22px;
  margin-bottom: 8px;
}
.mx-hub-card .ttl {
  font-weight: 700;
  font-size: 14px;
  color: #2A2E35;
}
.mx-hub-card .sub {
  font-size: 12px;
  color: var(--mx-text-2);
  margin: 4px 0 10px;
}
.mx-hub-card .dest {
  font-size: 10.5px;
  color: var(--mx-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.mx-hub-card-avancado {
  opacity: .85;
}

.mx-resumo-linha-folha .e-rowcell {
  font-size: 12px;
  color: var(--mx-text-2);
}