:root {
  --idw-primary: #0e9fba;
  --idw-sidebar-bg: #0f172a;
  --idw-sidebar-fg: #cbd5e1;
  --idw-bg: #f8fafc;
}

/* Nossos modais colocam um <form> como filho direto de .modal-content (envolvendo
   .modal-body + .modal-footer) para que um único form cubra tudo. Isso quebra o
   layout flex que o Bootstrap usa para fazer .modal-body rolar internamente em
   .modal-dialog-scrollable (o <form> vira o flex-item, sem altura restringida, e
   .modal-body cresce livre em vez de ficar limitado/rolável). display:contents faz
   o <form> "desaparecer" do layout, devolvendo .modal-body/.modal-footer como
   flex-items diretos de .modal-content, sem perder o comportamento de formulário. */
.modal-content > form {
  display: contents;
}

body {
  background: var(--idw-bg);
  color: #1e293b;
  overflow-x: hidden;
}

.btn-primary, .bg-primary {
  background-color: var(--idw-primary) !important;
  border-color: var(--idw-primary) !important;
}
a { color: var(--idw-primary); }

/* ---- Login ---- */
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: linear-gradient(rgba(8, 15, 40, .55), rgba(8, 15, 40, .55)), url('../img/login-bg.jpg') center/cover no-repeat;
}
.auth-card { max-width: 420px; width: 100%; }

/* ---- App shell ---- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--idw-sidebar-bg);
  color: var(--idw-sidebar-fg);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  transition: width .18s ease;
  overflow: hidden;
}
.sidebar-header { padding: 1.25rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-header .brand { font-weight: 700; font-size: 1.1rem; color: #fff; display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.sidebar-header .user-box { margin-top: .9rem; display: flex; flex-direction: column; gap: .35rem; }
.sidebar-header .user-name { font-size: .9rem; font-weight: 600; color: #fff; white-space: nowrap; }

.sidebar-nav { flex: 1; padding: .75rem .5rem; overflow-y: auto; }
.sidebar-nav .nav-link {
  color: var(--idw-sidebar-fg);
  padding: .55rem .75rem;
  border-radius: .5rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .9rem;
  margin-bottom: .15rem;
  white-space: nowrap;
}
.sidebar-nav .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-nav .nav-link.active { background: var(--idw-primary); color: #fff; }

.sidebar-footer { padding: .75rem .5rem; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-footer .nav-link { padding: .55rem .75rem; border-radius: .5rem; display: flex; align-items: center; gap: .6rem; white-space: nowrap; }

.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.app-topbar { padding: .5rem 1rem; background: #fff; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; gap: .5rem; }
.app-content { padding: 1.5rem; flex: 1; min-width: 0; }

/* ---- Sidebar recolhido (desktop) ---- */
html.sidebar-collapsed .sidebar { width: 72px; }
html.sidebar-collapsed .sidebar-header { padding: 1.25rem .5rem; }
html.sidebar-collapsed .sidebar-header .brand { justify-content: center; }
html.sidebar-collapsed .sidebar-header .brand span,
html.sidebar-collapsed .sidebar-header .user-box,
html.sidebar-collapsed .sidebar-nav .nav-link span,
html.sidebar-collapsed .sidebar-footer .nav-link span { display: none; }
html.sidebar-collapsed .sidebar-nav .nav-link,
html.sidebar-collapsed .sidebar-footer .nav-link { justify-content: center; }
#sidebarCollapseToggle.active { background-color: var(--idw-primary); color: #fff; border-color: var(--idw-primary); }

@media (max-width: 768px) {
  .sidebar { position: fixed; left: -260px; z-index: 1050; transition: left .2s ease; width: 250px !important; }
  .sidebar.open { left: 0; }
  html.sidebar-collapsed .sidebar-header .brand span,
  html.sidebar-collapsed .sidebar-nav .nav-link span,
  html.sidebar-collapsed .sidebar-footer .nav-link span { display: inline; }
  html.sidebar-collapsed .sidebar-header .user-box { display: flex; }
}

/* ---- Status badges ---- */
.badge-status-pendente { background: #fef9c3; color: #a16207; border: 1px solid #fde68a; }
.badge-status-em_analise { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
.badge-status-aprovado { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.badge-status-recusado { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.badge-status-finalizado { background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; }
.badge-status-cancelado { background: #fecaca; color: #7f1d1d; border: 1px solid #f87171; }

/* ---- Acompanhamento simplificado do cliente (client-stage-tracker) ---- */
.client-stage-tracker { display: flex; align-items: flex-start; padding: .5rem 0 .25rem; }
.client-stage-step { display: flex; flex-direction: column; align-items: center; text-align: center; width: 8rem; flex-shrink: 0; }
.client-stage-icon {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #e2e8f0; color: #94a3b8; font-size: 1.1rem; border: 2px solid #e2e8f0; transition: all .2s ease;
}
.client-stage-step.done .client-stage-icon { background: #22c55e; border-color: #22c55e; color: #fff; }
.client-stage-step.current .client-stage-icon { background: #eff6ff; border-color: var(--idw-primary); color: var(--idw-primary); box-shadow: 0 0 0 4px rgba(37,99,235,.12); }
.client-stage-label { font-size: .78rem; margin-top: .4rem; color: #64748b; }
.client-stage-step.done .client-stage-label,
.client-stage-step.current .client-stage-label { color: #1e293b; font-weight: 600; }
.client-stage-line { flex: 1; height: 2px; background: #e2e8f0; margin-top: 1.25rem; min-width: 1.5rem; }
.client-stage-line.done { background: #22c55e; }

.table-hover > tbody > tr.row-cancelado:hover > *,
.table-hover > tbody > tr.row-recusado:hover > *,
tr.row-cancelado > *,
tr.row-recusado > * { background-color: #fef2f2; }
tr.row-cancelado > td:first-child,
tr.row-recusado > td:first-child { box-shadow: inset 3px 0 0 #ef4444; }

/* ---- Kanban ----
   O quadro fica com altura travada na tela (calc a partir da viewport) para que só as
   colunas rolem internamente — sem isso, a lista de cards empurra a página inteira pra
   baixo e o cabeçalho/filtros somem ao rolar. */
.kanban-board { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; align-items: stretch; height: calc(100vh - 230px); min-height: 320px; }
/* flex:1 1 0 faz as colunas se dividirem igualmente pelo espaço disponível — com largura
   fixa (280px cada) o board de 6 colunas (visão da gestão) não cabia na tela em várias
   resoluções comuns e sempre precisava da rolagem horizontal interna. min/max-width dão um
   piso de legibilidade e um teto pra não esticar demais em monitores bem largos; só quando
   nem o mínimo cabe (poucas colunas + tela muito estreita) a rolagem interna volta a entrar. */
.kanban-column {
  flex: 1 1 0; min-width: 220px; max-width: 340px;
  background: var(--kanban-col-bg, #f1f5f9); border-radius: .75rem; padding: .75rem; min-height: 200px;
  display: flex; flex-direction: column;
}
.kanban-column.drag-over { background: #e0f2fe; outline: 2px dashed var(--idw-primary); }
.kanban-column-header { font-weight: 600; font-size: .85rem; margin-bottom: .6rem; display: flex; align-items: center; justify-content: space-between; gap: .4rem; flex: 0 0 auto; }
.kanban-column-header .kanban-column-header-right { display: flex; align-items: center; gap: .35rem; }
.kanban-color-input {
  width: 18px; height: 18px; padding: 0; border: none; border-radius: 50%; cursor: pointer;
  background: none; flex: 0 0 auto;
}
.kanban-color-input::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
.kanban-color-input::-webkit-color-swatch { border: 1px solid rgba(0,0,0,.15); border-radius: 50%; }
.kanban-color-input::-moz-color-swatch { border: 1px solid rgba(0,0,0,.15); border-radius: 50%; }
.kanban-color-reset { border: none; background: none; padding: 0; font-size: .8rem; line-height: 1; color: #94a3b8; }
.kanban-color-reset:hover { color: var(--idw-primary); }
.kanban-column-body { flex: 1; min-height: 0; overflow-y: auto; padding-right: 2px; }
.kanban-card {
  background: #fff; border-radius: .6rem; padding: .7rem; margin-bottom: .6rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); cursor: grab; border: 1px solid #e2e8f0;
}
.kanban-card:active { cursor: grabbing; }
/* Trava a tela inteira enquanto o claim + a troca de status ainda estão em voo (2 requisições
   sequenciais seguidas de location.reload()) — evita o "salto" visual de um card aparecer no
   fim da coluna e só depois pular pra posição real (ordenação do servidor) quando a página
   recarrega sozinha. */
.kanban-full-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(255,255,255,.6);
  display: flex; align-items: center; justify-content: center;
}
.kanban-card .protocolo { font-weight: 600; font-size: .85rem; margin-bottom: .2rem; }
.kanban-card .cliente { font-size: .78rem; color: #64748b; }
.kanban-card .meta { font-size: .72rem; color: #94a3b8; margin-top: .3rem; }
.kanban-card .meta.cell-truncate { max-width: 100%; }
.kanban-card select { font-size: .75rem; margin-top: .4rem; }

/* ---- Timeline ---- */
.status-steps { display: flex; align-items: center; margin-bottom: 1rem; }
.status-step { flex: 1; text-align: center; position: relative; }
.status-step .dot {
  width: 28px; height: 28px; border-radius: 50%; background: #e2e8f0; color: #64748b;
  display: flex; align-items: center; justify-content: center; margin: 0 auto .35rem; font-size: .8rem; font-weight: 600;
}
.status-step.completed .dot { background: var(--idw-primary); color: #fff; }
.status-step.current .dot { background: #fff; border: 2px solid var(--idw-primary); color: var(--idw-primary); }
.status-step .line { position: absolute; top: 14px; left: -50%; width: 100%; height: 2px; background: #e2e8f0; z-index: -1; }
.status-step:first-child .line { display: none; }
.status-step.completed .line { background: var(--idw-primary); }
.status-step .label { font-size: .72rem; color: #64748b; }

.log-timeline { border-left: 2px solid #e2e8f0; padding-left: 1rem; }
.log-item { position: relative; padding-bottom: 1rem; }
.log-item::before { content: ''; position: absolute; left: -1.35rem; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--idw-primary); }
.log-item .log-time { font-size: .72rem; color: #94a3b8; }
.log-item .log-text { font-size: .85rem; }

.field-missing { background: #fffbeb; border-color: #fde68a !important; }
.has-divergencia { background: #fef2f2; border-color: #ef4444 !important; color: #b91c1c; font-weight: 600; }

.comment-thread { max-height: 260px; overflow-y: auto; padding: .5rem; background: #f8fafc; border-radius: .375rem; }
.comment-item { max-width: 80%; margin-bottom: .5rem; padding: .4rem .6rem; border-radius: .5rem; background: #fff; border: 1px solid #e2e8f0; }
.comment-item.comment-mine { margin-left: auto; background: #eef2ff; border-color: #c7d2fe; }
.comment-item.comment-interno { max-width: 100%; background: #fffbeb; border-color: #fde68a; border-style: dashed; }
.comment-item.comment-interno.comment-mine { margin-left: 0; }
.comment-item .comment-meta { font-size: .7rem; color: #94a3b8; margin-bottom: .15rem; }
.comment-item .comment-text { font-size: .85rem; white-space: pre-wrap; }
.comment-item .comment-anexo { font-size: .8rem; margin-top: .25rem; }
.comment-item .comment-anexo a { text-decoration: none; }

.table-responsive { background: #fff; border-radius: .5rem; }
.table-responsive .table { font-size: .875rem; }

/* ---- Truncamento de texto em células de tabela ----
   Linhas com listas longas (ex.: NF Ref. com dezenas de números) ou nomes/razões
   sociais grandes quebravam em várias linhas e distorciam a altura das linhas da
   tabela. Trunca em uma linha com "..." e mostra o texto completo via title (tooltip)
   nativo — o detalhe completo já fica disponível no modal de detalhe (botão "olho").
   Valores confortáveis por padrão — as tabelas com poucas colunas (usuários, empresas,
   perfis) já cabem na tela sem precisar truncar tanto. */
.cell-truncate, .cell-truncate-sm, .cell-truncate-lg {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.cell-truncate { max-width: 200px; }
.cell-truncate-sm { max-width: 130px; }
.cell-truncate-lg { max-width: 260px; }

/* .table-dense: tabelas com muitas colunas (ex.: Minhas Devoluções, 11 colunas) —
   aqui o truncamento precisa ser mais agressivo e acompanhar a largura da tela (vw)
   pra tabela inteira caber sem rolagem horizontal, o que o valor fixo acima não resolve. */
.table-dense .cell-truncate { max-width: clamp(70px, 6vw, 150px); }
.table-dense .cell-truncate-sm { max-width: clamp(55px, 4.5vw, 110px); }
.table-dense .cell-truncate-lg { max-width: clamp(85px, 8vw, 170px); }

.table > tbody > tr > td { vertical-align: middle; }
.row-clickable { cursor: pointer; }

/* ---- Dashboard KPI cards ---- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; align-items: start; }
.kpi-card {
  display: flex; align-items: center; gap: .75rem;
  background: #fff; border: 1px solid #e2e8f0; border-radius: .625rem;
  padding: .9rem 1rem;
  transition: box-shadow .15s, transform .15s;
}
.kpi-card:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, .07); transform: translateY(-1px); }
.kpi-card.kpi-card-block { flex-direction: column; align-items: stretch; }
.kpi-card-link { text-decoration: none; color: inherit; cursor: pointer; }
.kpi-card-link:hover { border-color: var(--idw-primary); }
.kpi-icon {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: .625rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.kpi-value { font-size: 1.4rem; font-weight: 700; line-height: 1.1; color: #0f172a; }
.kpi-label { font-size: .74rem; color: #64748b; margin-top: .15rem; }
.kpi-breakdown { margin-top: .65rem; padding-top: .6rem; border-top: 1px solid #f1f5f9; display: flex; flex-wrap: wrap; gap: .3rem .6rem; }
.kpi-breakdown-item { font-size: .72rem; color: #64748b; }
.kpi-breakdown-item strong { color: #0f172a; }

.setor-row { margin-bottom: .55rem; }
.setor-bar { height: 6px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.setor-bar-fill { height: 100%; background: var(--idw-primary); border-radius: 999px; }

/* Campos "de setor" no modal de detalhe (ex.: Tipo do Frete do Adm Importway, Validação do
   Fiscal) — cada setor com campos próprios ganha um card destas, empilhados, só visíveis pra
   quem tem acesso. Cor por setor via [data-setor] — próximos setores entram aqui também. */
.setor-fields-card { background: #f5f3ff; border: 1px solid #ddd6fe; border-left: 4px solid #7c3aed; border-radius: .5rem; padding: .85rem 1rem; }
.setor-fields-header {
  font-size: .78rem; font-weight: 600; color: #6d28d9; text-transform: uppercase; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  cursor: pointer; user-select: none;
}
.setor-fields-card.is-expanded .setor-fields-header { margin-bottom: .65rem; }
.setor-fields-toggle { background: none; border: none; padding: .1rem .3rem; color: inherit; font-size: 1rem; line-height: 1; }
.setor-fields-toggle:hover { opacity: .7; }
.setor-fields-body { display: none; }
.setor-fields-card.is-expanded .setor-fields-body { display: block; }
.setor-fields-card[data-setor="fiscal"] { background: #eff6ff; border-color: #bfdbfe; border-left-color: #2563eb; }
.setor-fields-card[data-setor="fiscal"] .setor-fields-header { color: #1d4ed8; }
.setor-fields-card[data-setor="logistica"] { background: #ecfdf5; border-color: #a7f3d0; border-left-color: #059669; }
.setor-fields-card[data-setor="logistica"] .setor-fields-header { color: #047857; }
.setor-fields-card[data-setor="aprovacao_de_frete"] { background: #fff7ed; border-color: #fed7aa; border-left-color: #ea580c; }
.setor-fields-card[data-setor="aprovacao_de_frete"] .setor-fields-header { color: #c2410c; }
.setor-fields-card[data-setor="armazem"] { background: #fdf2f8; border-color: #fbcfe8; border-left-color: #db2777; }
.setor-fields-card[data-setor="armazem"] .setor-fields-header { color: #be185d; }
.ddm-item-conferencia-row { transition: background-color .15s ease, box-shadow .3s ease; border-radius: .35rem; }
.ddm-item-conferencia-row.is-conferido { background-color: #dcfce7; }
.ddm-item-conferencia-row.is-saving { opacity: .6; }
.ddm-item-conferencia-row.just-saved { box-shadow: inset 0 0 0 2px #22c55e; }
.ddm-item-conferido { cursor: pointer; }
.setor-fields-card[data-setor="memorando_de_credito"] { background: #f0fdfa; border-color: #99f6e4; border-left-color: #0d9488; }
.setor-fields-card[data-setor="memorando_de_credito"] .setor-fields-header { color: #0f766e; }
.setor-fields-card[data-setor="nfe_de_remessa"] { background: #fefce8; border-color: #fef08a; border-left-color: #ca8a04; }
.setor-fields-card[data-setor="nfe_de_remessa"] .setor-fields-header { color: #a16207; }