/* Operações, custos, equipa e configuração operacional. */

/* CONFIGURAÇÃO DA IMPORTAÇÃO DOCUMENTAL.
   Estava presa a 700px numa página que passou a usar a janela toda: sobravam
   dois terços do ecrã vazios enquanto a consequência da escolha caía para
   baixo da dobra. Duas colunas - a escolha à esquerda, o que dela resulta à
   direita - e quem mexe num limiar vê o efeito ao lado, sem rolar. */
.operationalConfig {
  max-width: none;
}

/* O cabeçalho vive DENTRO da coluna da esquerda, e não por cima das duas. Por
   cima, a sua metade direita ficava em branco e a coluna da explicação só
   começava à altura do primeiro seletor: um retângulo vazio do tamanho de meio
   ecrã. Dentro, as duas colunas arrancam da mesma linha e a prosa fica com uma
   medida que se lê. */
.configHead {
  margin-bottom: 4px;
}

.configHead h2 {
  margin: 2px 0 8px;
}

.configHead p {
  margin: 0 0 8px;
  line-height: 1.6;
}

.configColumns {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: start;
  gap: 14px 26px;
}

.configChoices,
.configEffects {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

/* Os seletores desta página são frases inteiras ("Média ou alta - Aceita o que
   foi lido com clareza razoável"): sem um teto, esticavam-se por metade do
   monitor e ficavam com o texto solto no meio de espaço vazio. */
.configChoices .formRow > label {
  max-width: 640px;
}

.configSafety {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
  color: var(--ink);
}

.configSafety .gcIcon { flex: 0 0 20px; margin-top: 2px; color: var(--accent); }
.configSafety span { display: grid; gap: 2px; }
.configSafety small { color: var(--muted); }

.configOutcome {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 9px;
  background: var(--bg);
  color: var(--muted);
  font-size: var(--txt-sm);
}

.configOutcome p { margin: 0; }
.configOutcome b { color: var(--ink); }
.configCriticalFields ul { display: grid; gap: 4px; margin: 8px 0; font-size: var(--txt-sm); }
.configCriticalFields p { margin: 0; font-size: var(--txt-xs); }

/* Numa janela estreita as duas colunas não têm largura para existir: volta a
   ser a coluna única, pela ordem de leitura de sempre. */
@media (max-width: 1080px) {
  .configColumns {
    grid-template-columns: minmax(0, 1fr);
  }
}

.userForm,
.userCard {
  display: grid;
  gap: 12px;
}

.userFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.userFormGrid.userEdit {
  grid-template-columns: minmax(0, 1.4fr) minmax(90px, .7fr) minmax(130px, .7fr);
  /* O rótulo do limite ocupa duas linhas. Alinhar cada bloco pela base mantém
     os três inputs na mesma linha independentemente da altura do rótulo. */
  align-items: end;
}

/* Nome, posto e perfil enchem a primeira linha; o limite fica sozinho na
   segunda e deixava as duas colunas à direita vazias, enquanto os botões
   ocupavam uma linha inteira mais abaixo. Sobem para esse vazio, encostados à
   direita e alinhados pela base do campo do limite: cada cartão da equipa
   poupa uma linha de altura, e são dezenas de cartões numa página. */
.userEdit .userActions {
  grid-column: 2 / -1;
  justify-content: flex-end;
}

/* Um separador por secção, sempre na mesma linha. Em grelha, o rótulo mais
   longo obrigava a colunas largas de mais para a página e o último separador
   caía sozinho para uma segunda linha. Em flex cada um pede a largura do seu
   texto, reparte o resto, e quando não cabem o cinto rola na horizontal. */
.operationsNav {
  position: sticky;
  top: 64px;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin: -4px 0 14px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(10px);
}

.operationsNav::-webkit-scrollbar {
  display: none;
}

.operationsNav button {
  flex: 1 0 auto;
  min-height: 38px;
  padding: 7px 14px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font-size: var(--txt-md);
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.operationsNav button:hover {
  color: var(--ink);
}

.operationsNav button.on {
  background: var(--panel);
  color: var(--accent);
  box-shadow: 0 1px 5px rgba(20, 32, 50, .12);
}

/* Operações: a informação de decisão fica visível; o histórico e os dados
   técnicos expandem sem fazer a gaveta crescer por dezenas de ecrãs. */
.operationOverview,
.operationJobs,
.operationCosts {
  padding: 16px 17px;
}

.operationSectionHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.operationSectionHead h2 {
  margin: 0;
}

.operationSectionHead .eyebrow {
  display: block;
  margin-bottom: 3px;
}

.operationSectionHead p,
.operationSectionHint {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: var(--txt-sm);
}

.operationSectionHint {
  margin: 9px 0 12px;
  line-height: 1.45;
}

.operationSectionActions {
  display: flex;
  flex: none;
  gap: 6px;
}

.operationKpis {
  display: grid;
  grid-template-columns: 1.3fr repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}

.operationKpi {
  min-width: 0;
  padding: 11px 12px;
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--subtle);
}

.operationKpi span {
  color: var(--muted);
  font-size: var(--txt-xs);
}

.operationKpi strong {
  overflow: hidden;
  color: var(--ink);
  font-size: var(--txt-lg);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operationKpiPrimary {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}

.operationKpiPrimary strong {
  color: var(--accent);
}

.operationTechnicalDetails {
  margin-top: 11px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.operationTechnicalDetails > summary {
  min-height: 48px;
  padding: 8px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
}

.operationTechnicalDetails > summary::-webkit-details-marker,
.operationMoreSummary::-webkit-details-marker {
  display: none;
}

.operationTechnicalDetails > summary:hover,
.operationMoreSummary:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.operationTechnicalDetails > summary:focus-visible,
.operationMoreSummary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 72%, transparent);
  outline-offset: -3px;
}

.operationTechnicalDetails > summary span:first-child {
  display: grid;
}

.operationTechnicalDetails > summary small {
  color: var(--muted);
  font-size: var(--txt-xs);
  font-weight: 400;
}

.operationTechnicalDetails > summary > span:last-child,
.operationMoreChevron {
  color: var(--muted);
  font-size: var(--txt-lg);
  transition: transform .15s ease;
}

.operationTechnicalDetails[open] > summary > span:last-child,
.operationMore[open] .operationMoreChevron {
  transform: rotate(180deg);
}

.operationTechnicalBody {
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.operationTechnicalBody p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: var(--txt-xs);
  line-height: 1.5;
}

.operationTechnicalBody > p:first-child { margin-top: 0; }

.operationTypeCost {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.operationTaskRow {
  min-width: 0;
  padding: 10px 0;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
}

.operationTaskMarker {
  width: 8px;
  height: 8px;
  align-self: start;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--cinza);
}

.operationTaskRow.isActive .operationTaskMarker {
  background: var(--amarelo);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--amarelo) 13%, transparent);
}

.operationTaskRow.isFailed .operationTaskMarker {
  background: var(--vermelho);
}

.operationTaskContent {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.operationTaskTitle {
  display: flex;
  align-items: center;
  gap: 7px;
}

.operationTaskTitle b {
  font-size: var(--txt-sm);
}

.operationTaskTitle span {
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--subtle);
  color: var(--muted);
  font-size: var(--txt-xs);
  text-transform: capitalize;
}

.operationTaskRow.isFailed .operationTaskTitle span {
  background: color-mix(in srgb, var(--vermelho) 9%, transparent);
  color: var(--vermelho);
}

.operationTaskRef {
  overflow: hidden;
  color: var(--ink);
  font-size: var(--txt-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operationTaskContent small {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: var(--txt-xs);
  line-height: 1.4;
}

.operationTaskError {
  display: -webkit-box;
  overflow: hidden;
  color: var(--vermelho) !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.operationTaskAction {
  align-self: center;
  color: var(--muted);
}

.operationMore {
  border-top: 1px solid var(--line);
}

.operationMoreSummary {
  min-height: 54px;
  padding: 8px 4px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 8px;
  list-style: none;
  border-radius: var(--r-sm);
  cursor: pointer;
}

.operationMoreDots {
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 1px;
}

.operationMoreText {
  min-width: 0;
  display: grid;
}

.operationMoreText b {
  color: var(--accent);
  font-size: var(--txt-sm);
}

.operationMoreText small {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--txt-xs);
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operationMore .whenOpen {
  display: none;
}

.operationMore[open] .whenClosed {
  display: none;
}

.operationMore[open] .whenOpen {
  display: block;
}

.operationMoreBody {
  border-top: 1px dashed var(--line);
}

.operationCostRow {
  min-width: 0;
  padding: 10px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--line);
}

.operationCostIdentity,
.operationCostValue {
  min-width: 0;
  display: grid;
}

.operationCostIdentity b,
.operationCostValue strong {
  overflow: hidden;
  font-size: var(--txt-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operationCostIdentity small,
.operationCostValue small {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--txt-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operationCostValue {
  justify-items: end;
  text-align: right;
}

.operationCostValue strong {
  color: var(--ink);
}

@media (max-width: 560px) {
  .operationSectionHead {
    display: grid;
  }

  .operationSectionActions {
    flex-wrap: wrap;
  }

  .operationKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operationKpiPrimary {
    grid-column: 1 / -1;
  }

  /* O botão fica na coluna dele, ao lado do texto. Mandado para baixo da
     linha - que é o que acontecia quando a grelha caía para duas colunas -,
     cada tarefa ocupava o dobro da altura, e cinco tarefas enchiam o ecrã do
     telemóvel sem se ver mais nada da secção. O texto encolhe em vez de
     empurrar: a referência já corta com reticências. */
  .operationTaskRow {
    gap: 8px;
  }

  .operationCostRow {
    gap: 8px;
  }
}

.teamCostIntro {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--line));
}

/* Cartões da equipa colapsados. A grelha de `.userCard` passava a valer para o
   par summary/conteúdo do <details>; o conteúdo tem a sua própria grelha e o
   cartão volta a ser um bloco simples. */
.userCard,
.userCreate {
  display: block;
}

.userCardBody {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.userCardSummary,
.userCreateSummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}

.userCardSummary::-webkit-details-marker,
.userCreateSummary::-webkit-details-marker { display: none; }

.userCardSummary::before,
.userCreateSummary::before {
  content: "›";
  flex: 0 0 14px;
  color: var(--muted);
  font-size: var(--txt-xl);
  line-height: 1;
  transition: transform .12s ease;
}

.userCard[open] > .userCardSummary::before,
.userCreate[open] > .userCreateSummary::before { transform: rotate(90deg); }

.userCardIdent,
.userCreateSummary > span {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.userCardIdent strong,
.userCreateSummary strong {
  font-size: var(--txt-md);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.userCardIdent small,
.userCreateSummary small {
  color: var(--muted);
  font-size: var(--txt-sm);
}

.userCardPending {
  flex: none;
  display: grid;
  justify-items: end;
  gap: 1px;
  text-align: right;
}

.userCardPending small { color: var(--muted); font-size: var(--txt-sm); }
.userCardPending b { color: var(--accent); white-space: nowrap; }

/* Já expandido, o bloco "Por cobrar" do corpo repete o que a linha fechada
   mostra. Só lá está pelo botão e pela data do último reset. */
.userCard[open] > .userCardSummary .userCardPending { visibility: hidden; }

.userBillingTotal {
  display: grid;
  justify-items: end;
  gap: 2px;
  text-align: right;
}

.userBillingTotal span,
.userBillingTotal small {
  color: var(--muted);
  font-size: var(--txt-sm);
}

.userBillingTotal strong {
  white-space: nowrap;
  color: var(--accent);
  font-size: var(--txt-xl);
}

.userBillingTotal button {
  margin-top: 5px;
}

.userMonthlyCost {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: var(--txt-sm);
}

.userMonthlyCost b {
  color: var(--ink);
  white-space: nowrap;
}

.userCostBar {
  height: 8px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--subtle);
}

.userCostBar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3b82d0, #27a26b);
}

.userInactive {
  opacity: .7;
}

.userPassword input {
  flex: 1 1 250px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--ink);
}

@media (max-width: 560px) {
  .userFormGrid,
  .userFormGrid.userEdit {
    grid-template-columns: 1fr;
  }

  /* Numa só coluna não há vazio à direita onde encaixar: os botões voltam a ser
     uma linha própria, a começar pela esquerda como o resto do cartão. */
  .userEdit .userActions {
    grid-column: 1;
    justify-content: flex-start;
  }

  .userBillingTotal {
    justify-items: start;
    text-align: left;
  }

  /* Num ecrã estreito o "Por cobrar" da linha fechada roubava largura ao nome.
     Fica só o valor, sem o rótulo. */
  .userCardPending small { display: none; }
}

@media (max-width: 620px) {
  .operationsNav button { padding: 7px 10px; font-size: var(--txt-sm); }
}