/* =========================================================
   CONFIGURAÇÕES DAS REUNIÕES · PRÓXIMA REUNIÃO · ACESSO AO ZOOM
   Reaproveita as classes .set-group / .set-title / .set-row /
   .set-help de css/settings.css, para a tela ter a mesma cara das
   outras configurações do aplicativo.
========================================================= */

/* Links que são botões não devem vir sublinhados */
.nm-actions a.btn, .zoom-actions a.btn, .ms-rota a.btn{ text-decoration: none; }

/* ---------- Formulário ---------- */
.ms-label{
  display: block; margin-bottom: 12px;
  font-size: 13px; font-weight: 700; color: var(--ink, #0f1b33);
}
.ms-input{
  display: block; width: 100%; margin-top: 6px; min-height: 48px;
  border: 1.5px solid var(--line, #d9e0ea); border-radius: 12px; padding: 10px 14px;
  font: inherit; font-size: 16px; font-weight: 400; color: var(--ink, #0f1b33);
  background: var(--card, #fff);
}
.ms-input:focus{
  outline: none; border-color: var(--brand, #0b2a63);
  box-shadow: 0 0 0 3px rgba(23, 134, 252, .18);
}
.ms-two{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px){ .ms-two{ grid-template-columns: 1fr; gap: 0; } }

.ms-fs{
  border: 1px solid var(--line, #e3e9f2); border-radius: 14px;
  padding: 14px 15px 4px; margin: 0 0 14px;
}
.ms-fs legend{
  padding: 0 7px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft, #51607a);
}
.ms-rota{ margin: 2px 0 0; }
.ms-actions{ display: flex; gap: 10px; margin-top: 4px; }
.ms-actions .btn{ min-height: 50px; }
@media (max-width: 560px){ .ms-actions .btn{ flex: 1 1 0; } }

.ms-warn{
  margin: 0 0 14px; padding: 11px 13px; border-radius: 12px;
  background: #FDECEA; border: 1px solid #F3C4BD; color: #8C1D16;
  font-size: 13.5px; font-weight: 600;
}

/* ---------- Cartão da próxima reunião ---------- */
.nm-card{
  border-radius: 16px; padding: 16px 18px; color: #fff;
  background: linear-gradient(140deg, #0B2A63 0%, #123C86 60%, #1668C9 100%);
  box-shadow: 0 14px 30px -18px rgba(11, 42, 99, .7);
}
.nm-card.is-soon{
  background: linear-gradient(140deg, #14532D 0%, #15803D 60%, #16A34A 100%);
  box-shadow: 0 14px 30px -18px rgba(21, 128, 61, .7);
}
.nm-top{ display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.nm-kind{
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255, 255, 255, .78);
}
.nm-count{
  font-size: 13px; font-weight: 800; padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .2); color: #fff; white-space: nowrap;
}
.nm-when{ margin: 8px 0 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.nm-where{ margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .85); }
.nm-actions{ display: flex; gap: 9px; margin-top: 14px; flex-wrap: wrap; }

/* Os botões ficam sobre o cartão azul-escuro. O tema base (premium.css) pinta
   .btn-primary com um gradiente azul-escuro através de "#appRoot .btn-primary",
   que é mais específico do que ".nm-actions .btn-primary" — por isso o texto
   sumia no fundo. Repetimos #appRoot aqui para vencer a especificidade. */
#appRoot .nm-actions .btn{
  min-height: 44px;                 /* alvo de toque confortável no celular */
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;            /* "Entrar pelo Zoom" é um <a> */
  box-shadow: none;
  flex: 1 1 0; min-width: 132px;    /* dividem a linha; empilham só se não couber */
}
#appRoot .nm-actions .btn-ghost{
  background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .42); color: #fff;
}
#appRoot .nm-actions .btn-ghost:hover{ background: rgba(255, 255, 255, .28); }
#appRoot .nm-actions .btn-primary{
  background: #fff; border-color: #fff; color: #0B2A63;
}
#appRoot .nm-actions .btn-primary:hover{ background: #EAF1FF; border-color: #EAF1FF; color: #0B2A63; }
#appRoot .nm-actions .btn:focus-visible{
  outline: 3px solid #fff; outline-offset: 2px; box-shadow: none;
}
/* O cartão fica verde quando a reunião é hoje/amanhã: o texto do botão
   acompanha, senão fica azul sobre verde. */
#appRoot .nm-card.is-soon .nm-actions .btn-primary{ color: #14532D; }
#appRoot .nm-card.is-soon .nm-actions .btn-primary:hover{ background: #E7F7EC; border-color: #E7F7EC; color: #14532D; }

@media (min-width: 560px){
  #appRoot .nm-actions .btn{ flex: 0 0 auto; min-width: 0; }
}

.nm-empty{
  border: 1px dashed var(--line, #d9e0ea); border-radius: 14px;
  padding: 15px 17px; background: var(--paper, #f6f8fc);
}
.nm-empty b{ display: block; font-size: 15px; color: var(--ink, #0f1b33); }
.nm-empty p{ margin: 4px 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft, #51607a); }

/* ---------- Bloco de acesso ao Zoom ---------- */
.zoom-card{
  margin-top: 18px; background: var(--card, #fff);
  border: 1px solid var(--line, #e3e9f2); border-radius: 16px; padding: 16px 18px;
}
.zoom-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.zoom-head h3{ margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--ink, #0f1b33); }
.zoom-head-meta{ font-size: 12.5px; color: var(--text-muted, #667085); }
.zoom-empty{ margin: 8px 0 0; font-size: 13.5px; color: var(--ink-soft, #51607a); }

.zoom-item{ padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line-soft, #eef1f6); }
.zoom-item:first-of-type{ border-top: 0; margin-top: 8px; }
.zoom-item-title{
  margin: 0 0 9px; font-size: 12px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft, #51607a);
}
.zoom-fields{ display: flex; gap: 10px; flex-wrap: wrap; }
.zoom-field{
  flex: 1 1 150px; min-width: 0; padding: 10px 12px; border-radius: 12px;
  background: var(--paper, #f4f7fb); border: 1px solid var(--line-soft, #e8edf4);
}
.zoom-field span{
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted, #667085);
}
.zoom-field b{
  display: block; margin-top: 2px; font-size: 16px; font-weight: 800;
  color: var(--brand, #0b2a63); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/* o link fica visível como texto: se o navegador recusar a cópia
   automática, dá para copiar à mão */
.zoom-link-txt{
  margin: 9px 0 0; font-size: 12.5px; color: var(--text-muted, #667085);
  overflow-wrap: anywhere; -webkit-user-select: all; user-select: all;
}
.zoom-actions{ display: flex; gap: 9px; margin-top: 12px; flex-wrap: wrap; }
/* <a> e <button> lado a lado: sem o inline-flex o texto do link fica
   desalinhado em relação ao do botão, e a altura de toque não bate. */
#appRoot .zoom-actions .btn{
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; text-align: center; line-height: 1.2;
}
@media (max-width: 560px){
  #appRoot .zoom-actions .btn{ flex: 1 1 100%; }
}