/* 99_mobile_overrides.css
   Forçar modais quase full width no telemóvel
*/

@media (max-width: 768px){

  /* overlay mais largo */
  .modal{
    padding: 6px 0 !important;
  }

  /* ✅ força largura e remove limites */
  .modal .modal-content{
    width: calc(100vw - 12px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* alguns modals usam classes próprias com max-width baixo */
  .modal .modal-content[class*="modal-"]{
    max-width: none !important;
    width: calc(100vw - 12px) !important;
  }

  /* QA reauth (tens max-width:520) */
  .modal-qa-reauth-content{
    width: calc(100vw - 12px) !important;
    max-width: none !important;
  }

}

/* =========================================================
   ALERTAS (mobile) — tabela vira "cartões" em 2 linhas
   ========================================================= */
@media (max-width: 768px){

  /* deixa a tabela “normal” no desktop */
  #modalAlertas .eventos-table,
  #modalAlertas .eventos-table thead,
  #modalAlertas .eventos-table tbody,
  #modalAlertas .eventos-table tr,
  #modalAlertas .eventos-table th,
  #modalAlertas .eventos-table td{
    box-sizing: border-box;
  }

  /* esconder header */
  #modalAlertas .eventos-table thead{
    display: none !important;
  }

  /* cada row vira cartão */
  #modalAlertas .eventos-table tbody tr{
    display: grid !important;
    grid-template-columns: 1fr 120px;   /* coluna direita curta */
    grid-template-areas:
      "evento evento"
      "proc fim"
      "sit apagar";
    gap: 8px 10px;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid rgba(0,0,0,.20);
    border-radius: 12px;
    background: #f7f7f7;
  }

  /* todas as células viram blocos */
  #modalAlertas .eventos-table tbody td{
    display: block !important;
    border: 1px solid rgba(0,0,0,.16);
    border-radius: 10px;
    background: #fff;
    padding: 8px 10px !important;
    margin: 0 !important;
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }

  /* mapear colunas para áreas
     ordem original: 1 Processo | 2 Evento | 3 Fim | 4 Situação | 5 Apagar */
  #modalAlertas .eventos-table tbody td:nth-child(1){ grid-area: proc; }
  #modalAlertas .eventos-table tbody td:nth-child(2){ grid-area: evento; }
  #modalAlertas .eventos-table tbody td:nth-child(3){ grid-area: fim; text-align: center; }
  #modalAlertas .eventos-table tbody td:nth-child(4){ grid-area: sit; text-align: center; }
  #modalAlertas .eventos-table tbody td:nth-child(5){ grid-area: apagar; text-align: center; }

  /* opcional: tornar o checkbox maior/mais fácil */
  #modalAlertas .eventos-table tbody td:nth-child(5) input[type="checkbox"]{
    transform: scale(1.35);
    transform-origin: center;
  }

  /* pequenos “labels” antes do valor (ajuda a entender) */
  #modalAlertas .eventos-table tbody td:nth-child(1)::before{ content: "Processo"; }
  #modalAlertas .eventos-table tbody td:nth-child(2)::before{ content: "Evento"; }
  #modalAlertas .eventos-table tbody td:nth-child(3)::before{ content: "Fim"; }
  #modalAlertas .eventos-table tbody td:nth-child(4)::before{ content: "Situação"; }
  #modalAlertas .eventos-table tbody td:nth-child(5)::before{ content: "Apagar"; }

  #modalAlertas .eventos-table tbody td::before{
    display:block;
    font-size: 12px;
    font-weight: 600;
    opacity: .70;
    margin-bottom: 4px;
  }
}


/* =========================================================
   FIX mobile — modais do Cliente (login + ficha)
   ========================================================= */
@media (max-width: 900px){

  /* Forçar caixas a caber no ecrã */
  #modal-login-cliente .modal-box,
  #modal-ficha-cliente .modal-box{
    width: 96vw !important;
    max-width: 96vw !important;
    box-sizing: border-box !important;
  }

  /* --- LOGIN CLIENTE --- */
  #modal-login-cliente .lc-grid{
    grid-template-columns: 1fr !important;
    gap: 8px 8px !important;
  }

  /* Isto evita “cortes” em grid (muito importante) */
  #modal-login-cliente .lc-grid > *{
    min-width: 0 !important;
  }

  #modal-login-cliente .lc-input{
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Password: botão Mostrar passa para baixo */
  #modal-login-cliente .lc-pass-row{
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #modal-login-cliente .lc-btn-mostrar{
    width: 100% !important;
    height: 40px !important;
  }

  #modal-login-cliente .lc-actions .btn{
    width: 100% !important;
    max-width: 320px !important;
  }

  /* --- FICHA CLIENTE --- */
  #modal-ficha-cliente .fc-grid{
    grid-template-columns: 1fr !important;
    gap: 6px 6px !important;
  }

  #modal-ficha-cliente .fc-grid > *{
    min-width: 0 !important;
  }

  #modal-ficha-cliente .fc-value{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  #modal-ficha-cliente .fc-actions{
    flex-direction: column !important;
    align-items: center !important;
  }

  #modal-ficha-cliente .fc-actions .btn2{
    width: 100% !important;
    max-width: 320px !important;
  }
}

/* =========================================================
   MOBILE: modal-profile (A minha ficha)
   ========================================================= */
@media (max-width: 900px){

  /* Evitar scroll horizontal no modal */
  #modal-profile .modal-content{
    width: 96vw !important;
    max-width: 96vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Regra essencial p/ CSS Grid não “rebentar” colunas */
  #modal-profile *{
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Os 4 blocos “28px 1fr 320px” passam a 1 coluna */
  #modal-profile div[style*="grid-template-columns: 28px 1fr 320px"]{
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  /* Checkbox fica no topo/à esquerda */
  #modal-profile div[style*="grid-template-columns: 28px 1fr 320px"] > input[type="checkbox"]{
    justify-self: start !important;
    width: 22px !important;
    height: 22px !important;
  }

  /* Inputs ocupam o ecrã */
  #modal-profile input[type="text"],
  #modal-profile input[type="password"],
  #modal-profile input[type="email"]{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Alertas por email: 1 coluna */
  #modal-profile div[style*="grid-template-columns: 1fr 120px"]{
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   Perguntas como texto corrido (PC + mobile)
   ========================================================= */
#modal-forgot .fg-question.fg-question-text{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-weight: 600;
  line-height: 1.25;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* =========================================================
   MOBILE: modal-forgot (Recuperar dados esquecidos)
   - só a linha do Utilizador: botão passa para baixo
   - header quebra linha (título/Utilizador não sai do ecrã)
   - respostas (R1/R2) não ficam altas demais
   ========================================================= */
@media (max-width: 900px){

  #modal-forgot .modal-content{
    width: 96vw !important;
    max-width: 96vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  #modal-forgot *{
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Header do modal: permitir quebra */
  #modal-forgot .modal-header{
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  #modal-forgot .modal-title{
    width: 100% !important;
    flex: 0 0 100% !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* só a linha do Utilizador */
  #modal-forgot .fg-user-row{
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  #modal-forgot .fg-user-row #fg-user{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* se ainda existir este botão, também vai para a linha de baixo */
  #modal-forgot .fg-user-row #btnLoadQuestions{
    width: 100% !important;
    white-space: normal !important;
    line-height: 1.15 !important;
    padding: 10px 12px !important;
  }

  /* Respostas: altura normal (não gigante) */
  #modal-forgot textarea#fg-r1,
  #modal-forgot textarea#fg-r2{
    font-size: 16px !important;
    padding: 8px 12px !important;
    height: 40px !important;
    min-height: 40px !important;
    resize: none !important;
    overflow: hidden !important;
  }
}

@media (max-width: 576px){
  /* um pouco mais compacto em ecrãs muito pequenos */
  #modal-forgot textarea#fg-r1,
  #modal-forgot textarea#fg-r2{
    height: 38px !important;
    min-height: 38px !important;
  }
}
/* =========================================================
   FORÇAR 2 LINHAS no header do modal-forgot (mobile)
   Título em cima, botões (lixeira/fechar) em baixo
   ========================================================= */
@media (max-width: 900px){

  /* Em vez de tentar só 'wrap', forçamos layout em coluna */
  #modal-forgot .modal-header{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* Título ocupa a linha toda */
  #modal-forgot .modal-header .modal-title{
    width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* “Linha dos botões”: apanha quaisquer botões/links que estejam no header */
  #modal-forgot .modal-header button,
  #modal-forgot .modal-header .btn,
  #modal-forgot .modal-header a.btn,
  #modal-forgot .modal-header .btn2{
    margin-left: 0 !important;     /* evita empurrar para fora */
    max-width: 100% !important;
  }

  /* Se os botões estiverem dentro de algum container, tentamos alinhá-los à esquerda */
  #modal-forgot .modal-header > *:last-child{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }
}
/* =========================================================
   modal-forgot: separar título e botões no topo (mobile)
   Estrutura real: .forgot-top / .forgot-titlebar / botões
   ========================================================= */
@media (max-width: 900px){

  /* A barra do topo passa a coluna: 1º título, 2º botões */
  #modal-forgot .forgot-top{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* Título ocupa a largura toda */
  #modal-forgot .forgot-titlebar{
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Botões do topo (Fechar e outros como lixeira, se existir) */
  #modal-forgot .forgot-top button,
  #modal-forgot .forgot-top .btn-pill,
  #modal-forgot .forgot-top .btn,
  #modal-forgot .forgot-top a.btn{
    width: 100% !important;     /* fica em linha própria e fácil de tocar */
    max-width: 100% !important;
    margin-left: 0 !important;  /* evita empurrar para fora */
  }
}
/* Modal forgot: esconder botão "Carregar perguntas" (não é usado) */
#modal-forgot #btnLoadQuestions{
  display: none !important;
}

/* =========================================================
   modal-forgot: MOBILE — dividir linhas (topo + utilizador)
   ========================================================= */
@media (max-width: 900px){

  /* --- TOPO: título numa linha, botões noutra --- */
  #modal-forgot .forgot-top{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  #modal-forgot .forgot-titlebar{
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #modal-forgot .forgot-top button,
  #modal-forgot .forgot-top .btn,
  #modal-forgot .forgot-top .btn-pill{
    width: 100% !important;
    margin-left: 0 !important;
    max-width: 100% !important;
  }

  /* --- CONTEÚDO: em mobile, a grelha passa a 1 coluna --- */
  #modal-forgot .forgot-grid{
    grid-template-columns: 1fr !important;
  }

  /* Labels (“Utilizador:”, “P1:”, etc.) ficam acima do campo */
  #modal-forgot .fg-lab{
    text-align: left !important;
    margin-top: 6px !important;
  }

  /* A linha do utilizador (input e botões) em coluna */
  #modal-forgot .fg-user-row{
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  #modal-forgot #fg-user{
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* =========================================================
   MOBILE: modalUsersAdmin — separar título e botões
   (Lixeira / Utilizadores / Fechar)
   ========================================================= */
@media (max-width: 900px){

  /* Apanhar o cabeçalho (é o 1º div com display:flex dentro do modal-content) */
  #modalUsersAdmin .modal-content > div[style*="display:flex"]{
    display: flex !important;
    flex-direction: column !important;  /* <-- força 2/3 linhas */
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  /* Botões do topo em linha própria e largura total */
  #modalUsersAdmin #btnUsersTrash,
  #modalUsersAdmin button[data-close="modalUsersAdmin"]{
    width: 100% !important;
    min-width: 0 !important;          /* anula o min-width:120 inline */
  }

  /* O bloco do título (o div do meio) ocupa a linha toda */
  #modalUsersAdmin .modal-content > div[style*="display:flex"] > div[style*="flex:1"]{
    width: 100% !important;
    flex: 0 0 auto !important;
    text-align: left !important;
  }

  /* A “placa verde” do texto Utilizadores: não pode sair do ecrã */
  #modalUsersAdmin .modal-content > div[style*="display:flex"] > div[style*="flex:1"] > div{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 28px !important;       /* 42px é enorme no telemóvel */
    line-height: 1.1 !important;
    padding: 12px 14px !important;
  }
}
/* =========================================================
   modal-forgot (mobile): reduzir espaços verticais entre linhas
   ========================================================= */
@media (max-width: 900px){

  /* Reduz o espaçamento geral entre linhas/colunas do formulário */
  #modal-forgot .forgot-grid{
    row-gap: 8px !important;     /* antes: grande/por defeito */
    column-gap: 10px !important;
  }

  /* Labels (Utilizador, P1, R1, etc.) com menos margem */
  #modal-forgot .fg-lab{
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
  }

  /* Campos: menos “ar” */
  #modal-forgot .fg-field{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Perguntas (texto) menos afastadas */
  #modal-forgot .fg-question-text{
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.15 !important;
  }

  /* Título (placa verde): menos alto */
  #modal-forgot .forgot-titlebar{
    padding: 10px 14px !important;   /* reduz altura */
    line-height: 1.05 !important;
  }

  /* Botão Fechar: menos alto (opcional) */
  #modal-forgot .forgot-top .btn-pill{
    padding: 8px 12px !important;
  }
}
/* =========================================
   modal-forgot: ações separadas (reset PR vs nova password)
   ========================================= */

#modal-forgot .fg-actions-wrap{
  margin-top: 14px;
  display: grid;
  gap: 14px;
}

#modal-forgot .fg-action-box{
  border: 2px solid rgba(0,0,0,.18);
  background: #eee;
  border-radius: 14px;
  padding: 12px;
}

#modal-forgot .fg-action-title{
  font-weight: 800;
  margin-bottom: 10px;
}

#modal-forgot .fg-action-row{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}

#modal-forgot .fg-check{
  width: 22px;
  height: 22px;
}

#modal-forgot .fg-check-label{
  cursor: pointer;
  font-size: 18px;
  line-height: 1.15;
}

#modal-forgot .fg-action-hint{
  margin-top: 8px;
  font-size: 13px;
  opacity: .75;
}

#modal-forgot .fg-newpass-row{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
}

#modal-forgot .fg-btn-action{
  min-width: 120px;
}

/* Mobile: tudo em 1 coluna para não “rebentar” */
@media (max-width: 768px){
  #modal-forgot .fg-action-row{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #modal-forgot .fg-newpass-row{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #modal-forgot .fg-btn-action{
    width: 100% !important;
  }
}

/* =========================================
   modal-forgot (novo layout): 2 ações com botões separados
   ========================================= */

#modal-forgot .forgot-grid{
  grid-template-columns: 140px 1fr;
  gap: 12px 12px;
}

#modal-forgot .fg-actions-wrap{
  margin-top: 14px;
  display: grid;
  gap: 14px;
}

#modal-forgot .fg-action-box{
  border: 2px solid rgba(0,0,0,.18);
  background: #eee;
  border-radius: 16px;
  padding: 12px;
}

#modal-forgot .fg-action-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

#modal-forgot .fg-action-label{
  font-weight: 700;
  font-size: 18px;
  line-height: 1.15;
}

#modal-forgot .fg-action-hint{
  margin-top: 8px;
  font-size: 13px;
  opacity: .75;
}

#modal-forgot .fg-newpass-row{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

#modal-forgot .fg-btn-action{
  min-width: 140px;
}

/* Mobile: 1 coluna, botões largos */
@media (max-width: 768px){
  #modal-forgot .forgot-grid{
    grid-template-columns: 1fr !important;
  }

  #modal-forgot .fg-action-row{
    grid-template-columns: 1fr !important;
  }

  #modal-forgot .fg-btn-action{
    width: 100% !important;
  }

  #modal-forgot .fg-newpass-row{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================
   modal-forgot (novo layout "limpo")
   - sem P/R aqui
   - 2 ações com botões separados
   ========================================= */

#modal-forgot .forgot-grid{
  grid-template-columns: 140px 1fr;
  gap: 12px 12px;
  align-items: center;
}

#modal-forgot .fg-actions-wrap{
  margin-top: 14px;
  display: grid;
  gap: 14px;
}

#modal-forgot .fg-action-box{
  border: 2px solid rgba(0,0,0,.18);
  background: #eee;
  border-radius: 16px;
  padding: 12px;
}

#modal-forgot .fg-action-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

#modal-forgot .fg-action-label{
  font-weight: 700;
  font-size: 18px;
  line-height: 1.15;
}

#modal-forgot .fg-action-hint{
  margin-top: 8px;
  font-size: 13px;
  opacity: .75;
}

#modal-forgot .fg-newpass-row{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

#modal-forgot .fg-btn-action{
  min-width: 140px;
}

/* Mobile */
@media (max-width: 768px){

  #modal-forgot .forgot-grid{
    grid-template-columns: 1fr !important;
  }

  #modal-forgot .fg-action-row{
    grid-template-columns: 1fr !important;
  }

  #modal-forgot .fg-btn-action{
    width: 100% !important;
  }

  #modal-forgot .fg-newpass-row{
    grid-template-columns: 1fr !important;
  }

  #modal-forgot .pwd-toggle{
    width: 100% !important;
  }
}
/* modal-forgot (mobile): na caixa "nova password" -> Input, Mostrar, Entrar */
@media (max-width: 768px){

  /* A caixa da nova password vira grelha para controlar ordem */
  #modal-forgot .fg-action-newpassbox{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Linha do topo (label + botão) passa a coluna, mas só nesta caixa */
  #modal-forgot .fg-action-newpassbox .fg-action-row{
    display: contents; /* deixa os filhos participarem no grid do pai */
  }

  /* Ordem pretendida */
  #modal-forgot .fg-action-newpassbox .fg-action-label{ order: 1; }
  #modal-forgot .fg-action-newpassbox .fg-newpass-wrap{ order: 2; }

  /* Botão Entrar (nova password) por baixo */
  #modal-forgot .fg-action-newpassbox #btnStartForgotReset{
    order: 3;
    width: 100% !important;
  }
}

/* =========================================================
   MOBILE — modal "Alterar Password (Cliente)" (#modal-change-cliente)
   ========================================================= */
@media (max-width: 768px){

  /* garantir que o content cabe no ecrã */
  #modal-change-cliente .modal-content{
    width: calc(100vw - 12px) !important;
    max-width: none !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* regra base p/ não rebentar grelhas/inputs */
  #modal-change-cliente *{
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* topo: título e botão Fechar em 2 linhas */
  #modal-change-cliente .login-top{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #modal-change-cliente .login-titlebar{
    width: 100% !important;
    font-size: 28px !important;
    padding: 10px 12px !important;
  }

  #modal-change-cliente [data-close="modal-change-cliente"]{
    justify-self: start !important;
    width: 100% !important;
  }

  /* grelha dos campos passa a 1 coluna */
  #modal-change-cliente .login-grid{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #modal-change-cliente .login-label{
    text-align: left !important;
    padding-right: 0 !important;
    font-size: 18px !important;
  }

  #modal-change-cliente .login-input{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* password + botão mostrar: 1 coluna */
  #modal-change-cliente .pwd-wrap{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #modal-change-cliente .pwd-toggle{
    width: 100% !important;
  }

  /* botão gravar: largura total */
  #modal-change-cliente .login-actions{
    margin-top: 18px !important;
  }

  #modal-change-cliente #btnChangeClienteSubmit{
    width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;
    font-size: 18px !important;
  }
}