/* ===========================
   LIXEIROS — base (desktop)
   Aplica-se só aos modais com .modal-lixeira
   =========================== */

.modal-content.modal-lixeira{
  max-width: 640px;      /* ~2/3 */
  width: 66vw;
  padding: 16px 16px 18px;
}

/* topo: título + fechar */
.lixeira-top{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.lixeira-titlebar{
  text-align: center;
  background: #4c654f;
  color: #fff;
  padding: 10px 12px;
  font-size: 34px;
  letter-spacing: 1px;
}

/* botões */
.lixeira-actions{
  display: flex;
  gap: 14px;
  justify-content: center;
  margin: 10px 0 14px;
  flex-wrap: wrap;
}

/* ===========================
   Lixeira EVENTOS (tabela)
   =========================== */
.lixeira-table-wrap{
  overflow: auto;
  max-height: 62vh;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 12px;
  background: #fff;
}

.lixeira-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.lixeira-table th,
.lixeira-table td{
  border-bottom: 1px solid rgba(0,0,0,.12);
  padding: 10px 10px;
  vertical-align: middle;
}

.lixeira-table thead th{
  background: #d9d9d9;
  font-weight: 700;
  text-align: center;
}

/* ===========================
   Lixeira PROCESSOS (grelha)
   =========================== */
#modalLixeiraProcessos .lixeira-grid{
  display: grid;
  gap: 10px;
}

#modalLixeiraProcessos .lix-proc-head{
  grid-template-columns: 1.2fr 1fr 1fr;
  margin-top: 8px;
}

#modalLixeiraProcessos .lix-proc-head .lix-h{
  background: #d9d9d9;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  font-weight: 700;
}

#modalLixeiraProcessos .lix-proc-body{
  grid-template-columns: 1.2fr 1fr 1fr;
}

/* cada row ocupa as 3 colunas */
#modalLixeiraProcessos .lix-row{
  display: contents;
}

#modalLixeiraProcessos .lix-cell{
  background: #fff;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 10px;
  padding: 12px 10px;
}

#modalLixeiraProcessos .lix-proc-num{
  display: flex;
  align-items: center;
  gap: 10px;
}

#modalLixeiraProcessos .lix-radio{
  transform: scale(1.1);
}

/* ===========================
   Lixeira ALERTAS (lista)
   =========================== */
.lixeira-list{
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  max-height: 55vh;
  overflow: auto;
}

.lixeira-item{
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 10px;
  background: #f7f7f7;
  margin: 8px 0;
  cursor: pointer;
}

.lixeira-item.selected{
  outline: 2px solid rgba(76,101,79,.55);
  background: #e9efe9;
}

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

  /* largura correta no telemóvel */
  .modal-content.modal-lixeira{
    width: calc(100% - 24px);
    max-width: 520px;
  }

  .lixeira-titlebar{
    font-size: 26px;
    padding: 10px 10px;
  }

  .lixeira-actions{
    gap: 10px;
  }

  .lixeira-table-wrap{
    max-height: 60vh;
  }

  /* ---------
     Lixeira Processos em "cartões" verticais
     --------- */

  /* esconder cabeçalho de colunas */
  #modalLixeiraProcessos .lix-proc-head{
    display: none !important;
  }

  /* a grelha passa a 1 coluna (evita scroll horizontal) */
  #modalLixeiraProcessos .lix-proc-body{
    grid-template-columns: 1fr !important;
  }

  /* cada row vira cartão */
  #modalLixeiraProcessos .lix-proc-body .lix-row{
    display: block !important;
    padding: 10px;
    border: 1px solid rgba(0,0,0,.18);
    border-radius: 12px;
    margin: 10px 0;
    background: #f7f7f7;
  }

  #modalLixeiraProcessos .lix-proc-body .lix-cell{
    display: block !important;
    background: #fff;
    border: 1px solid rgba(0,0,0,.18);
    border-radius: 10px;
    padding: 10px;
    margin: 8px 0;
  }

  /* título acima do valor (vem do data-label no JS) */
  #modalLixeiraProcessos .lix-proc-body .lix-cell::before{
    content: attr(data-label);
    display: block;
    font-size: 13px;
    font-weight: 600;
    opacity: .75;
    margin-bottom: 6px;
  }

  /* primeira célula (numero processo) tem radio + texto */
  #modalLixeiraProcessos .lix-proc-body .lix-proc-num{
    display: flex !important;
    align-items: center;
    gap: 12px;
  }

  #modalLixeiraProcessos .lix-proc-body .lix-radio{
    transform: scale(1.2);
  }
}