/**
 * Montagem da página do site.
 *
 * O desenho da grade (áreas, módulos arrastáveis, alças) continua vindo de
 * customize/css/theme-customize.css, que é do builder e não do painel. Aqui
 * fica o que virou novo: a coluna da esquerda, o modal e a camada mínima de
 * compatibilidade para os formulários dos módulos, que foram escritos com
 * classes do bootstrap.
 */

/**
 * O css do builder foi escrito para a tela antiga, onde a coluna da esquerda
 * era solta sobre a pagina e o conteudo compensava com padding. Aqui a pagina
 * e uma grade, entao as regras de posicao precisam ser desfeitas pelo mesmo
 * peso de seletor: id contra id.
 */
#theme-container { overflow: visible; }

#theme-control-bar,
#theme-control-bar.fixed {
    position: sticky;
    top: 16px;
    left: auto;
    width: auto;
    z-index: 5;
}

#theme-styles .form-group label { float: none; margin-top: 0; }
#theme-styles .form-group .color-input { float: none; }
#theme-styles .form-group .color-input i { width: auto; box-shadow: none; }

.tcwrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }

/* ---------- coluna da esquerda ---------- */
.tcrail { display: flex; flex-direction: column; gap: 14px; }

.tccard {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
}

.tccard__head {
    margin: 0;
    padding: 12px 14px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-2);
}

.tccard__body { display: flex; flex-direction: column; gap: 12px; padding: 12px; }

/* as três cores em linha: o cartão fica baixo e o salvar continua na tela */
.tccolors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

#theme-styles .form-group { display: flex; flex-direction: column; gap: 6px; margin: 0; }

#theme-styles .form-group label {
    margin: 0;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--text-muted);
}

#theme-styles .form-group .color-input {
    height: 34px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
}

#theme-styles .form-group .color-input i { display: block; height: 100%; border-radius: 5px; }

.tcfont { padding-top: 12px; border-top: 1px solid var(--border-soft); }
.tcfont label { margin-bottom: 2px; }

.tcinput {
    width: 100%;
    padding: 9px 11px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.tchint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 11px 14px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-soft);
}

.tchint i { margin-top: 2px; color: var(--text-soft); }

/**
 * A coluna toda cabe na tela: a lista de módulos rola por dentro e o que sobra
 * de altura é dela, para o salvar nunca sair de vista.
 */
.tcrail { max-height: calc(100vh - 32px); }
#theme-modules { flex: 1 1 auto; min-height: 120px; display: flex; flex-direction: column; }
.tcpalette { flex: 1 1 auto; overflow-y: auto; }
.tcpalette .nav { list-style: none; margin: 0; padding: 0; }

.tcpalette .module-item + .module-item { border-top: 1px solid var(--border-soft); }

.tcpalette .module-item .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--text);
    text-decoration: none;
    cursor: grab;
}

.tcpalette .module-item .nav-link i { width: 17px; text-align: center; color: var(--text-soft); }
.tcpalette .module-item:hover .nav-link { color: var(--brand-700); background: var(--brand-50); }
.tcpalette .module-item:hover .nav-link i { color: var(--brand); }

/* módulo que atingiu o limite do tema não pode mais ser arrastado */
.tcpalette .module-item.disabled .nav-link { color: var(--text-soft); cursor: not-allowed; background: var(--surface-2); }
.tcpalette .module-item.disabled:hover .nav-link { color: var(--text-soft); background: var(--surface-2); }

/* fora da rolagem da lista, entao esta sempre visivel no pe da coluna */
.tcsave { justify-content: center; width: 100%; flex-shrink: 0; }

/* ---------- área de montagem ---------- */
.tcstage {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}

.theme-container-group { display: flex; gap: 8px; margin-bottom: 8px; }
.tccol { min-width: 0; }

#theme-container-overlay .inner-content .loading-message { display: flex; flex-direction: column; align-items: center; gap: 12px; }
#theme-container-overlay .inner-content .success-message i { font-size: 30px; }

/* ---------- modal ---------- */
.tcmodal .modal__card--wide { max-width: 720px; padding: 0; }
.tcmodal[hidden] { display: none; }

.tcmodal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-soft);
}

.tcmodal__head .modal__title { margin: 0; }

.tcmodal__x {
    width: 32px;
    height: 32px;
    font-size: 15px;
    color: var(--text-soft);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
}

.tcmodal__x:hover { color: var(--text); background: var(--surface-2); }

.tcmodal__body { max-height: min(60vh, 520px); overflow-y: auto; padding: 20px 22px; }
.tcmodal .modal__foot { margin: 0; padding: 16px 22px; border-top: 1px solid var(--border-soft); }

.tcmodal .modal-loading,
.tcmodal .loading { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 0; }

.tcmodal .modal-loading { display: none; }
.tcmodal.loading .modal-loading { display: flex; }

/**
 * Compatibilidade dos formulários de módulo.
 *
 * As 108 views de edição foram escritas com classes do bootstrap. Em vez de
 * carregar o bootstrap inteiro nesta página, que redesenharia o cabeçalho do
 * painel, aqui ficam apenas as poucas classes que elas usam, restritas ao
 * corpo do modal.
 */
.tcmodal__body .form-group,
.tcmodal__body .mb-2,
.tcmodal__body .mb-3 { margin-bottom: 16px; }

.tcmodal__body .mt-3 { margin-top: 16px; }
.tcmodal__body .mb-0 { margin-bottom: 0; }

.tcmodal__body label {
    display: block;
    margin-bottom: 6px;
    font-size: 13.5px;
    font-weight: 650;
    color: var(--text-muted);
}

.tcmodal__body .form-control,
.tcmodal__body .form-select,
.tcmodal__body select,
.tcmodal__body input[type="text"],
.tcmodal__body input[type="number"],
.tcmodal__body input[type="url"],
.tcmodal__body textarea {
    width: 100%;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.tcmodal__body .form-control:focus,
.tcmodal__body .form-select:focus,
.tcmodal__body select:focus,
.tcmodal__body input:focus,
.tcmodal__body textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-100);
}

.tcmodal__body .form-control[disabled],
.tcmodal__body input[disabled] { color: var(--text-soft); background: var(--surface-2); cursor: not-allowed; }

/* o "esconder título" é um checkbox com o rótulo ao lado, não em cima */
.tcmodal__body .checkbox label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
}

.tcmodal__body .checkbox input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--brand); }

.tcmodal__body .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 650;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
}

.tcmodal__body .btn:hover { border-color: var(--brand-300); background: var(--brand-50); }
.tcmodal__body .btn.disabled { color: var(--text-soft); background: var(--surface-2); cursor: not-allowed; }
.tcmodal__body .btn-sm { padding: 6px 11px; font-size: 13.5px; }
.tcmodal__body .text-center { text-align: center; }
.tcmodal__body .me-1 { margin-right: 4px; }
.tcmodal__body .rounded-pill { border-radius: var(--radius-pill); }

.tcmodal__body .text-overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1000px) {
    .tcwrap { grid-template-columns: 1fr; }
    .tcrail { position: static; }
    .tcpalette { max-height: 300px; }
}

/**
 * Enquanto as prévias chegam.
 *
 * Cada módulo pede a própria prévia ao servidor, então uma página cheia leva
 * alguns segundos até estar montada. No lugar do relógio girando dentro de
 * cada caixa vai um esqueleto do tamanho do módulo, e a montagem fica travada
 * até a última resposta: arrastar no meio do caminho salvaria uma grade que
 * ainda não terminou de carregar.
 */
#theme-container.is-loading .tcpalette,
#theme-container.is-loading .tcsave { pointer-events: none; opacity: .5; }

#theme-container.is-loading .tcstage { position: relative; }

.tcloading {
    display: none;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 11px 14px;
    font-size: 14px;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

#theme-container.is-loading .tcloading { display: flex; }

/* o relógio girando de cada módulo dá lugar ao esqueleto */
.theme-container .module.loading .module-loading { display: none !important; }

.theme-container .module.loading .module-content {
    min-height: 92px;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, rgba(255, 255, 255, .06) 25%, rgba(255, 255, 255, .14) 37%, rgba(255, 255, 255, .06) 63%);
    background-size: 400% 100%;
    animation: tcshimmer 1.3s ease-in-out infinite;
}

.theme-container .module.loading .module-content > * { visibility: hidden; }

@keyframes tcshimmer {
    to { background-position: -135% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .theme-container .module.loading .module-content { animation: none; }
}

/* com a grade do tema aplicada, o espaçamento do painel faria a coluna quebrar */
.theme-container-group.is-theme-grid { gap: 0; }

/**
 * O cartão de estilo nunca encolhe: a coluna tem altura limitada e, podendo
 * encolher, ele cortava a última linha, que é o tamanho da fonte. Quem cede
 * espaço é a lista de módulos, que rola por dentro.
 */
#theme-styles { flex: 0 0 auto; }

/* o salvar é a ação principal da tela: precisa de corpo, não de um fio */
.tcsave {
    padding: 10px;
    font-size: 16.5px;
    font-weight: 700;
}

/* módulo ainda sem conteúdo escolhido: some da grade se não tiver um aviso */
.preview-empty {
    padding: 14px;
    font-size: 13.5px;
    line-height: 1.45;
    text-align: center;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

/* a configuração serializada do módulo vive no html, mas não é para ser vista */
.theme-container .module .data { display: none; }

/**
 * A prévia é demonstração: nada dentro dela responde ao clique.
 *
 * Sem isto, clicar num link de módulo (o menu, uma notícia) tirava a pessoa do
 * painel no meio da montagem, levando junto o que ainda não foi salvo. Com
 * pointer-events none o evento atravessa para o próprio módulo, então arrastar
 * continua funcionando e os botões de editar e remover, que ficam fora do
 * conteúdo, também.
 */
#theme-container .module .module-content { pointer-events: none; }

/**
 * Alças do módulo dentro da grade.
 *
 * O desenho vinha do builder antigo: caixas flutuadas, alturas diferentes e o
 * texto "Editar" espremido contra o X. Aqui elas viram uma barra única, com a
 * mesma altura e o mesmo respiro dos botões do painel, e um fundo próprio para
 * ficarem legíveis por cima de qualquer módulo.
 */
#theme-container .module .module-actions {
    display: none;
    top: 6px;
    right: 6px;
    gap: 4px;
    padding: 4px;
    border-radius: var(--radius-sm);
    background: rgba(15, 30, 27, .82);
    box-shadow: 0 6px 18px rgba(15, 30, 27, .28);
    overflow: visible;
}

#theme-container .module:hover .module-actions { display: flex; }

#theme-container .module .module-actions > div {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    float: none;
    height: 30px;
    min-width: 30px;
    padding: 0 10px;
    font-size: 13.5px;
    font-weight: 650;
    color: #fff;
    border: 0;
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, .14);
    cursor: pointer;
    transition: background .15s ease;
}

#theme-container .module .module-actions > div:hover { background: rgba(255, 255, 255, .26); }
#theme-container .module .edit-module { background: var(--brand); }
#theme-container .module .edit-module:hover { background: var(--brand-700); }
#theme-container .module .remove-module { background: var(--danger); }
#theme-container .module .remove-module:hover { background: #c0392b; }

/* a alça de mover cobre o módulo inteiro, então não pode roubar o clique das alças */
#theme-container .module .module-move { z-index: 1; }
#theme-container .module .module-actions { z-index: 4; }

/**
 * A alça de largura só aparece em módulo que muda de largura.
 *
 * O builder já marca com .resizable quem aceita; mostrar o botão nos outros
 * era oferecer uma ação que não faz nada, e isso confunde mais do que ajuda.
 */
#theme-container .module .edit-size-module { display: none; }
#theme-container .module.resizable .edit-size-module { display: inline-flex; }