/* ============================================================
 * Coachecom Bootstrap 3 Modal — tema V3 (Marco 4C.2)
 * ------------------------------------------------------------
 * Override CSS-only que repinta os modais BS3 (.modal/
 * .modal-dialog/.modal-content/.modal-header/.modal-body/
 * .modal-footer/.close/.modal-backdrop) pro design system V3
 * — sem tocar em markup nem em JS legacy.
 *
 * Por que CSS-only: dezenas de controllers + scripts jQuery abrem
 * esses modais via $('#x').modal('show') e injetam HTML no body
 * via AJAX. Trocar markup quebraria centenas de call sites. Aqui
 * forçamos o visual V3 mantendo 100% da compatibilidade BS3.
 *
 * Cobertura: TODOS os modais BS3 do sistema (shell + páginas
 * internas) ganham visual V3 automaticamente — modal-edit-profile,
 * modal-seleciona-idioma, modal-mudanca-sistema, modal-contatos,
 * modal-usuarios, modal-termo-politica, fullscreen-midia, switch
 * accounts, e todos os ~30 modais de páginas internas (coach,
 * empresa, administrator, generic_link, etc.).
 *
 * Carregamento: template_sistema.php inclui DEPOIS do
 * sweetalert-v3.css. Tokens herdados de auth.css + overlay.css.
 *
 * Uso de !important: BS3 usa especificidade alta (.modal.fade .modal-
 * dialog, .modal-content border-radius com prefixos vendor) e alguns
 * modais do shell têm inline style="z-index: 10001!important". !important
 * mínimo onde necessário pra vencer o BS3 base, mantendo a inline
 * z-index dos call sites.
 * ============================================================ */


/* ─────────────────────────────────────────────
   Backdrop — match V3 .modal-backdrop
   BS3 default: bg #000 com .in { opacity: .5 }
   V3:          rgba(11,18,32,0.5) + blur(2px)
   ───────────────────────────────────────────── */

/* Marco 4G review v7: regras escopadas pra body > .modal-backdrop
   (BS3 anexa o backdrop direto no body via $.modal('show')).
   Importante NÃO usar seletor genérico .modal-backdrop porque o
   V3 CoacheConfirm também usa .modal-backdrop dentro de .modal-root,
   e o !important daqui sobrescreveria a cor translúcida do V3. */
body > .modal-backdrop,
body > .modal-backdrop.fade,
body > .modal-backdrop.in {
  /* alpha no BACKGROUND (translúcido) + opacity:1 no elemento → o blur fica
     pleno (frosted glass). Antes: #0b1220 sólido + opacity:0.5, e o opacity no
     elemento reduzia o blur pela metade (o fundo só escurecia, não borrava). */
  background-color: var(--overlay-backdrop) !important;
}
body > .modal-backdrop.in {
  opacity: 1 !important;
}
@supports (backdrop-filter: blur(8px)) {
  body > .modal-backdrop.in {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* Marco 4G review v5: quando um CoacheConfirm V3 (adhoc) abre por
   cima de um modal BS3, o backdrop preto 50% opacity do BS3 fica
   ENTRE a página real e o backdrop translucido + blur do
   CoacheConfirm. Resultado: blur borra apenas a camada preta do BS3
   = visual fica preto sólido. Solução: esconder completamente o
   backdrop BS3 enquanto o adhoc está aberto, pra que o blur do
   CoacheConfirm consiga borrar o conteúdo real (modal BS3 + página)
   produzindo o efeito frosted-glass do Figma. A flag .coache-adhoc-
   open é setada via JS em overlay.js (openModal/closeModal). */
body.coache-adhoc-open > .modal-backdrop.in {
  opacity: 0 !important;
}


/* ─────────────────────────────────────────────
   Modal positioning + entrance animation
   BS3 anima translateY(-25%) → 0. V3 escala 0.96 → 1
   ───────────────────────────────────────────── */

.modal {
  /* preserve BS3 z-index 1050 padrão; inline style z-index dos shell
     modais (10000+) continua vencendo */
  padding: 24px !important;
}

.modal.fade .modal-dialog {
  transform: scale(0.96) !important;
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease !important;
}
.modal.in .modal-dialog {
  transform: scale(1) !important;
  opacity: 1;
}


/* ─────────────────────────────────────────────
   Dialog — centralizar + sizes match V3
   BS3 default: width auto, margin 10px (mobile) / 600px+30px (sm+)
   V3: 520px md (default), 380 sm, 760 lg, 1100 xl
   ───────────────────────────────────────────── */

.modal-dialog {
  margin: 0 auto !important;
  max-width: 520px;
  width: 100%;
  max-height: calc(100vh - 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 48px);
}

@media (min-width: 768px) {
  .modal-dialog { width: 100%; }
  .modal-sm     { max-width: 380px; }
  .modal-lg     { max-width: 760px; }
  /* xl: próximo tamanho do design system (alinha com `.modal-root .modal-xl`
     do overlay.css). Os modais BS3 (.modal-dialog) não tinham essa faixa. */
  .modal-xl     { max-width: 1100px; }
}


/* ─────────────────────────────────────────────
   Variante "visualizar resultado" (report viewer)
   ─────
   Modal largo pro relatório de pesquisa (DISC, perfil, etc.) injetado
   via AJAX em #modal-generic/#modal-visualizar-pesquisa pelos handlers
   .view-answer (js_function_pesquisas.js, turmas/js_pesquisas.js,
   processo_seletivo.js).

   Esses handlers SETAVAM inline `width: <window>px; position: absolute;
   left: 0` no .modal-dialog — hack BS3 pra ocupar a viewport inteira. No
   tema V3 o .modal-dialog ganhou `max-width: 520px` + flex-centering, então
   o width inline era CAPADO em 520px e o position:absolute/left:0 arrancava
   o dialog do centro, prendendo-o no canto superior esquerdo (modal quebrado).

   A classe substitui o hack: dialog largo, centralizado, body com scroll
   próprio. O conteúdo (.report-page-v3) já se auto-limita/centraliza, então
   o relatório respira em 2 colunas (.result-grid-v3) sem esticar. */
.modal-report-view .modal-dialog {
  max-width: 1280px;
}


/* ─────────────────────────────────────────────
   Content — match V3 .modal card
   BS3: border 1px rgba(0,0,0,.2), radius 6px, shadow 0 5px 15px rgba(0,0,0,.5)
   V3:  no border, radius xl (18px), V3 shadow elevada
   ───────────────────────────────────────────── */

.modal-content {
  background-color: var(--bg) !important;
  border: none !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--overlay-shadow) !important;
  -webkit-box-shadow: var(--overlay-shadow) !important;
  outline: none;
  background-clip: padding-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
  overflow: hidden;
}

@media (max-width: 600px) {
  .modal-content { border-radius: var(--radius-lg) !important; }
  .modal-dialog { padding: 0; }
}


/* ─────────────────────────────────────────────
   Header — V3 padding + typography
   BS3: padding 15px, border-bottom 1px #e5e5e5
   V3:  padding 18px 22px, border-bottom 1px var(--border)
   ───────────────────────────────────────────── */

.modal-header {
  padding: 18px 22px !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: auto !important;
  flex-shrink: 0;
}

/* Modal sem border de header (compacto) */
.modal-confirm .modal-header,
.modal-flush .modal-header { border-bottom: none !important; }


/* ─────────────────────────────────────────────
   Title — match V3 .modal-title
   BS3: line-height 1.42857143, herda font do body
   V3:  font-display, 19px/700, letter-spacing -0.02em, color ink
   ───────────────────────────────────────────── */

/* Marco 4G review v3: regra escopada APENAS ao .modal-header BS3.
   Antes a regra global vazava propriedades (text-align: left,
   order: 1, flex: 1) pro .modal-title de outros modais V3 — em
   particular o CoacheConfirm que precisa do título centered e na
   ordem natural do flex column. */
.modal-header .modal-title,
.modal-header h4.modal-title,
.modal-header h3,
.modal-header h4,
.modal-header h5 {
  font-family: var(--font-display) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: var(--ink) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  flex: 1;
  text-align: left;
  order: 1;
}

/* Subtitle BS3 .heading (modal-mudanca-sistema usa <p class="heading">) */
.modal-header .heading {
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin: 0 !important;
  line-height: 1.4;
}
.modal-header .heading strong { color: var(--danger); }


/* ─────────────────────────────────────────────
   Close button (X) — match V3 .modal-close
   BS3: float right, font 21px, opacity .2 + bold + text-shadow
   V3:  32x32 square, hover bg-soft, sem float, sem opacity
   ───────────────────────────────────────────── */

.modal-header .close,
.modal-header button.close {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: var(--ink-2) !important;
  cursor: pointer;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  float: none !important;
  margin: 0 !important;
  margin-left: auto !important; /* empurra pra direita mesmo se vier antes do título no DOM */
  order: 2;                      /* sempre depois do título */
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .12s, color .12s;
  font-family: inherit;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
}
.modal-header .close:hover,
.modal-header .close:focus,
.modal-header button.close:hover,
.modal-header button.close:focus {
  background: var(--bg-soft) !important;
  color: var(--ink) !important;
  outline: none !important;
}
.modal-header .close .sr-only { display: none; }


/* ─────────────────────────────────────────────
   Body — match V3 .modal-body
   BS3: padding 15px
   V3:  padding 4px 22px 20px (header sticky), 14px font, ink, line-height 1.55
   ───────────────────────────────────────────── */

.modal-body {
  padding: 18px 22px !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  line-height: 1.55 !important;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.modal-body > p:first-child { margin-top: 0; }
.modal-body > *:last-child  { margin-bottom: 0; }


/* ─────────────────────────────────────────────
   Footer — match V3 .modal-footer
   BS3: padding 15px, text-align right, border-top 1px #e5e5e5
   V3:  padding 14px 22px 18px, justify-content flex-end, gap 8px,
        border-top opcional via .bordered (mantemos borda BS3)
   ───────────────────────────────────────────── */

.modal-footer {
  padding: 14px 22px 18px !important;
  border-top: 1px solid var(--border) !important;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.modal-footer:empty {
  padding: 0 !important;
  border-top: none !important;
  display: none;
}

/* Botões inline-block antigos do BS3 que estão lado-a-lado dentro
   do footer ganham gap automático via flex; remove margin-left BS3 */
.modal-footer .btn + .btn,
.modal-footer button + button,
.modal-footer button + .btn,
.modal-footer .btn + button {
  margin-left: 0 !important;
}


/* ─────────────────────────────────────────────
   Buttons inside modal-footer
   ─────
   Override de CONTEXTO apenas — variantes (.btn-primary, .btn-default,
   .btn-danger, .btn-ghost, etc.) e tamanhos vêm do buttons-v3.css
   (Marco 4D, source-of-truth do design system de botões). Aqui só
   ajustamos o border-radius pra um valor mais discreto (7px vs.
   default V3 10px) porque modal-footer fica num contexto compacto.

   Histórico (Bloco 1.2): este bloco antes redefinia background, color,
   border de cada variante (.btn-primary, .btn-default, .btn-danger)
   com !important — quebrava a cascade do design system. Junto com
   isso vinha um reset `width: auto !important` em .modal .btn pra
   desfazer o vazamento global do auth.css `.btn { width: 100% }`.
   Ambos foram removidos: o vazamento foi escopado em body.auth-page
   no Bloco 1.1, e as variantes agora vêm do buttons-v3.css direto.
   ───────────────────────────────────────────── */

.modal-footer .btn {
  border-radius: 7px !important;
}


/* ─────────────────────────────────────────────
   Mobile — modal centralizado (igual V3)
   ─────
   Antes era bottom-sheet (align-items: flex-end). Agora o dialog ancora
   no centro vertical da viewport, mesmo comportamento do desktop e do
   .modal-root do overlay.css — só o padding encolhe pra ganhar largura.
   ───────────────────────────────────────────── */

@media (max-width: 600px) {
  .modal { padding: 12px !important; }
  .modal-dialog {
    margin: 0 !important;
    align-items: center;
    min-height: calc(100vh - 24px);
  }
  .modal-content {
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-lg) !important;
  }
  .modal-header  { padding: 16px 18px !important; }
  .modal-body    { padding: 14px 18px !important; }
  .modal-footer  { padding: 12px 18px 14px !important; }
}