/*
 * Padrão visual do Sistema de Gestão CPL.
 *
 * Camada carregada por último: define uma medida única para botões, campos, rótulos, títulos e janelas
 * em todos os módulos (Almoxarifado, TorQ, Transporte...). Mexe só na aparência. Para voltar ao visual
 * anterior, basta retirar o <link> deste arquivo do index.html.
 *
 * Referência: o botão amarelo principal do TorQ ("Adicionar equipamento"). Em cada grupo de ações,
 * os botões têm a mesma altura e largura do botão principal.
 */
:root {
  --cpl-navy: #18243b;
  --cpl-text: #172033;
  --cpl-muted: #667085;
  --cpl-label: #43505f;
  --cpl-line: #d5dce6;
  --cpl-field-line: #ced5df;
  --cpl-gold: #e7ad32;
  --cpl-gold-hover: #d99c1f;
  --cpl-danger: #b42318;
  --cpl-danger-line: #f3c5c0;
  --cpl-danger-soft: #fff5f4;

  --cpl-radius: 8px;
  --cpl-radius-dialog: 14px;

  --cpl-btn-h: 44px;
  --cpl-btn-pad: 0 18px;
  --cpl-btn-font: 14px;
  --cpl-btn-weight: 700;
  --cpl-btn-min-w: 150px;

  --cpl-btn-sm-h: 32px;
  --cpl-btn-sm-pad: 0 10px;
  --cpl-btn-sm-font: 12px;

  --cpl-field-h: 44px;
  --cpl-field-font: 14px;
  --cpl-label-font: 13px;

  --cpl-title: 24px;
  --cpl-dialog-title: 20px;
}

/* ---------- Botões padrão ---------- */
.app-shell :is(.primary, .secondary, .ghost, .transport-button, .refresh-system-btn),
dialog :is(.primary, .secondary, .ghost, .transport-button),
.app-shell :is(.fleet-heading, .fleet-detail-actions, .transport-detail-actions) button,
dialog .dialog-actions button {
  min-height: var(--cpl-btn-h) !important;
  height: auto !important;
  padding: var(--cpl-btn-pad) !important;
  border-radius: var(--cpl-radius) !important;
  font-size: var(--cpl-btn-font) !important;
  font-weight: var(--cpl-btn-weight) !important;
  line-height: 1.2 !important;
  width: auto !important;
  margin-top: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
}
.login-card .primary {
  width: 100% !important;
  margin-top: 12px !important;
  min-height: var(--cpl-btn-h) !important;
  font-size: var(--cpl-btn-font) !important;
}

/* Principal: amarelo do TorQ. */
.app-shell .primary,
dialog .primary,
.app-shell .transport-button-primary,
.app-shell #fleetNewEquipmentBtn {
  background: var(--cpl-gold) !important;
  border: 1px solid var(--cpl-gold) !important;
  color: var(--cpl-text) !important;
  box-shadow: none !important;
}
.app-shell .primary:hover,
dialog .primary:hover,
.app-shell .transport-button-primary:hover {
  background: var(--cpl-gold-hover) !important;
  border-color: var(--cpl-gold-hover) !important;
}

/* Secundário: branco com borda. */
.app-shell :is(.secondary, .ghost, .transport-button-secondary, .refresh-system-btn),
dialog :is(.secondary, .ghost, .transport-button-secondary),
dialog .dialog-actions button:not(.primary):not(.danger):not(.transport-button-danger) {
  background: #fff !important;
  border: 1px solid var(--cpl-line) !important;
  color: var(--cpl-text) !important;
  box-shadow: none !important;
}
.app-shell :is(.secondary, .ghost, .transport-button-secondary, .refresh-system-btn):hover,
dialog :is(.secondary, .ghost, .transport-button-secondary):hover,
dialog .dialog-actions button:not(.primary):not(.danger):not(.transport-button-danger):hover {
  background: #f4f6fa !important;
  border-color: #c2cad6 !important;
}

/* Ação de risco (excluir, demitir, baixar). */
.app-shell :is(.transport-button-danger, .danger:not(.table-action)),
dialog :is(.transport-button-danger, .danger) {
  background: var(--cpl-danger-soft) !important;
  border: 1px solid var(--cpl-danger-line) !important;
  color: var(--cpl-danger) !important;
}

/* Botões que abrem a visão do motorista no TorQ mantêm a cor verde de destaque, no mesmo tamanho. */
.app-shell .fleet-tablet-reading-button {
  border: 1px solid transparent !important;
}

/* ---------- Grupos de ações no topo das telas ----------
 * Todos com a altura e a largura do botão principal (o mais largo do grupo dita a largura). */
.page-heading > div:last-child:not(:first-child):has(> button),
.patrimony-heading-actions,
.transport-heading-actions,
.fleet-heading > div:last-child,
.fleet-detail-actions,
.transport-detail-actions {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--cpl-btn-min-w), 1fr);
  gap: 8px !important;
  align-items: stretch;
  justify-content: end;
  flex-wrap: nowrap;
}
.page-heading > div:last-child:not(:first-child):has(> button) > button,
.patrimony-heading-actions > button,
.transport-heading-actions > button,
.fleet-heading > div:last-child > button,
.fleet-detail-actions > button,
.transport-detail-actions > button {
  width: 100% !important;
  margin: 0 !important;
}
.page-heading > button {
  min-width: var(--cpl-btn-min-w);
}
/* Muitos botões (TorQ): quebra em linhas mantendo todos do mesmo tamanho. */
.fleet-heading > div:last-child,
.fleet-detail-actions {
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  grid-auto-columns: auto;
}
.fleet-heading > div:last-child {
  width: min(100%, 700px);
}
.fleet-detail-actions {
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
}
:is(.fleet-heading > div:last-child, .fleet-detail-actions) > button {
  min-width: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Linha de filtros (computador): a busca ocupa o espaço, as listas têm largura fixa ---------- */
@media (min-width: 761px) {
  .app-shell .filter-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
  }
  .app-shell .filter-row > input {
    flex: 1 1 320px;
    width: auto !important;
    min-width: 0;
  }
  .app-shell .filter-row > select {
    flex: 0 1 260px;
    width: auto !important;
    min-width: 180px;
  }
}
.fleet-detail-actions > button[hidden] {
  display: none !important;
}

/* ---------- Ações dentro de tabelas e listas (tamanho compacto) ---------- */
.app-shell .table-action,
.app-shell .transport-fleet-delete,
.app-shell #fleetUpdateTachographBtn {
  min-height: var(--cpl-btn-sm-h) !important;
  padding: var(--cpl-btn-sm-pad) !important;
  border-radius: 7px !important;
  font-size: var(--cpl-btn-sm-font) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}
.app-shell .table-action {
  margin: 2px 4px 2px 0;
}

.app-shell [data-complete-plan],
.app-shell .fleet-alert-strip button {
  min-height: var(--cpl-btn-sm-h) !important;
  padding: var(--cpl-btn-sm-pad) !important;
  border-radius: 7px !important;
  font-size: var(--cpl-btn-sm-font) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* ---------- Abas (Almoxarifado, Importação, TorQ, Transporte) ---------- */
.app-shell .import-type,
.app-shell .fleet-tabs button,
.app-shell .transport-tabs button {
  min-height: 40px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* ---------- Barra superior (alertas, tablet, atualizar sistema) ---------- */
.app-shell .header-actions :is(button, .session-chip) {
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: var(--cpl-radius) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  box-sizing: border-box;
}

/* Botão só com ícone (atualizar lista do Transporte, sair). */
.app-shell .transport-icon-button {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: var(--cpl-radius) !important;
  font-size: 16px !important;
}

/* ---------- Botão fechar (×) das janelas ---------- */
#closeDeveloperDialog,
dialog .dialog-head > button:not(.primary):not(.secondary):not(.ghost):not(.transport-button) {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--cpl-radius) !important;
  background: transparent !important;
  color: var(--cpl-muted) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
dialog .dialog-head > button:not(.primary):not(.secondary):not(.ghost):not(.transport-button):hover {
  background: #eef1f6 !important;
  color: var(--cpl-text) !important;
}

/* ---------- Campos ---------- */
.app-shell :is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='color']), select),
dialog :is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='color']), select),
.login-card input {
  min-height: var(--cpl-field-h);
  border: 1px solid var(--cpl-field-line);
  border-radius: var(--cpl-radius);
  background-color: #fff;
  color: var(--cpl-text);
  font-size: var(--cpl-field-font) !important;
  font-weight: 400 !important;
  font-family: inherit;
  box-sizing: border-box;
}
.app-shell :is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='color'])),
dialog :is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='color'])),
.login-card input {
  padding: 0 12px !important;
}
.app-shell select,
dialog select {
  padding: 0 34px 0 12px !important;
}
.app-shell textarea,
dialog textarea {
  min-height: 88px;
  padding: 10px 12px !important;
  border: 1px solid var(--cpl-field-line);
  border-radius: var(--cpl-radius);
  background: #fff;
  color: var(--cpl-text);
  font-size: var(--cpl-field-font) !important;
  font-weight: 400 !important;
  font-family: inherit;
  line-height: 1.4;
  box-sizing: border-box;
}
.app-shell ::placeholder,
dialog ::placeholder {
  color: #98a2b3;
  font-weight: 400;
  opacity: 1;
}
/* Busca com lupa embutida (TorQ e Transporte): o campo fica sem borda dentro da caixa. */
.app-shell :is(.fleet-search, .transport-search) {
  min-height: var(--cpl-field-h);
  border: 1px solid var(--cpl-field-line) !important;
  border-radius: var(--cpl-radius) !important;
  background: #fff !important;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 0 12px !important;
  font-size: 16px !important;
  color: #98a2b3 !important;
}
.app-shell :is(.fleet-search, .transport-search) input {
  border: 0 !important;
  min-height: calc(var(--cpl-field-h) - 2px) !important;
  height: auto !important;
  flex: 1;
  background: transparent !important;
  outline: none;
  padding-left: 0 !important;
}

/* ---------- Rótulos ---------- */
.app-shell label:not(.permission-option):not(:has(> input[type='checkbox'])):not(:has(> input[type='radio'])):not(.fleet-search):not(.transport-search):not(.import-drop):not(.fleet-import-drop),
dialog label:not(:has(> input[type='checkbox'])):not(:has(> input[type='radio'])):not(.fleet-import-drop):not(.fleet-tablet-search) {
  font-size: var(--cpl-label-font) !important;
  font-weight: 700 !important;
  color: var(--cpl-label) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* ---------- Títulos ---------- */
.app-shell .page-heading h2,
.app-shell .transport-page-heading h2,
.app-shell .fleet-heading h2 {
  font-size: var(--cpl-title) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--cpl-text) !important;
  margin: 0 0 4px !important;
}
.app-shell .page-heading p,
.app-shell .transport-page-heading > div > p,
.app-shell .fleet-heading > div:first-child > span {
  font-size: 15px !important;
  color: var(--cpl-muted) !important;
}
.app-shell .panel h3,
.app-shell .transport-panel-title h3,
.app-shell .fleet-panel-title h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--cpl-text) !important;
}
dialog .dialog-head h2 {
  font-size: var(--cpl-dialog-title) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--cpl-text) !important;
  margin: 0 !important;
}
dialog .dialog-head .eyebrow,
.app-shell .transport-breadcrumb,
.app-shell .fleet-heading > div:first-child > p {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}

/* ---------- Janelas ---------- */
dialog {
  border-radius: var(--cpl-radius-dialog) !important;
  color: var(--cpl-text);
}
dialog .dialog-actions {
  gap: 8px !important;
}
dialog .dialog-actions > button {
  min-width: 120px;
}

/* ---------- Menu lateral ---------- */
.app-shell .sidebar .nav-item {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 10px;
  min-height: 40px;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: inherit;
  text-align: left;
}

/* ---------- Celular e tablet: toque confortável ---------- */
@media (max-width: 760px) {
  :root {
    --cpl-btn-h: 46px;
    --cpl-field-h: 46px;
    --cpl-btn-min-w: 0px;
    --cpl-title: 22px;
  }
  .page-heading > div:last-child:not(:first-child):has(> button),
  .patrimony-heading-actions,
  .transport-heading-actions,
  .fleet-heading > div:last-child,
  .fleet-detail-actions,
  .transport-detail-actions {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  /* No celular o botão principal ocupa a linha inteira, abaixo dos demais. */
  :is(.page-heading > div:last-child, .patrimony-heading-actions, .transport-heading-actions, .fleet-heading > div:last-child, .fleet-detail-actions, .transport-detail-actions) > :is(.primary, .transport-button-primary, #fleetNewEquipmentBtn, #fleetGenericMaintenanceBtn) {
    grid-column: 1 / -1;
  }
  .app-shell .page-heading > button {
    width: 100% !important;
  }
}

/* ---------- Segurança visual ----------
 * O sistema esconde menus, botões e telas que a pessoa não pode usar com o atributo "hidden".
 * Esta regra vem por último e é mais forte que todas as acima, para que nenhum ajuste de aparência
 * volte a mostrar algo escondido. Não remover. */
[hidden][hidden][hidden][hidden][hidden][hidden][hidden] {
  display: none !important;
}