/* panels.css — conteúdo comum aos painéis esquerdo/direito.
   Valores copiados diretamente do Nova (css/editor.css). */

.panel-section {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

/* "Conteúdos do Bloco" (aba Media do Configurar Bloco) reaproveita o
   MESMO estilo .panel-section/.collapsible do resto do builder (sem
   fundo/borda arredondada própria — pedido explícito do utilizador: nada
   de "caixa cinzenta" à volta do cartão inteiro), mas vive DENTRO de
   #blockEditorPanel, que já É um .panel-section com padding lateral de
   16px (ver acima) — o padding lateral próprio duplicava-se, estreitando
   todo o conteúdo (lista, botão) face ao resto do painel Bloco. Zera o
   padding lateral aqui, mantém o vertical (14px topo/fundo). A linha
   separadora muda de border-bottom para border-top — pedido explícito do
   utilizador: uma linha a toda a largura ACIMA do título "Conteúdos do
   Bloco" (a fazer par visual com a linha das abas Bloco/Media logo
   acima), não abaixo — este cartão é o ÚNICO conteúdo da aba Media (ao
   contrário da aba Bloco, onde vários .nv-section se seguem uns aos
   outros e um separador A SEGUIR a cada um faz sentido), por isso não
   deve sobrar nenhuma linha depois do botão "Adicionar Media". */
/* margin lateral negativa (-16px, exatamente o padding-left/right de
   #blockEditorPanel, ver .panel-section acima) — não basta zerar o
   padding do PRÓPRIO cartão para o border-top ir de ponta a ponta: uma
   borda desenha-se na largura da caixa do elemento, e essa caixa
   continua limitada pela área de CONTEÚDO do pai (já com os 16px
   cortados dos dois lados) enquanto ficar dentro do fluxo normal dele.
   Só esticando a caixa para fora com margin negativa (compensada por
   padding-left/right igual, para o conteúdo interno — título, lista,
   botão — não encostar às bordas) é que a linha fica REALMENTE a toda a
   largura do painel, como pedido explícito do utilizador. */
.nv-media-panel {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 6px;
    border-bottom: none;
    border-top: 1px solid var(--border);
}

/* A linha a toda a largura por BAIXO deste cartão não é dele — é o
   border-bottom de #blockEditorPanel (o wrapper de TODO o "Configurar
   Bloco", partilhado pelas duas abas, ver .panel-section acima), com o
   seu padding-bottom de 14px a criar um espaço grande antes dela. Mexer
   nesse padding encurtaria também o fundo da aba Bloco — pedido
   explícito do utilizador: só a aba Media deve ficar mais compacta.
   margin-bottom negativo em #tabPaneMedia "puxa" o conteúdo para mais
   perto dessa borda sem tocar em nada partilhado. Valor aumentado (era
   -8px, ainda sobrava espaço visível) para ficar rente à linha. */
#tabPaneMedia {
    margin-bottom: -14px;
}

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 14px 0;
}

.panel-section h3 {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-section h3 i:first-child {
    color: var(--accent);
}

.panel-section h4 {
    font-size: 11px;
    font-variant: jis78;
    margin: 0px 0 8px;
    text-transform: uppercase;
}

.hint {
    font-size: 10px;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 6px;
    margin-bottom: 5px;
}

/* Título de sub-grupo DENTRO de um painel (ex: "Fundo da cápsula",
   "Bolinha selecionada" — ver colorpicker-panel.js) — mais discreto que
   um h4 normal, só para separar visualmente blocos de campos afins sem
   criar uma nova secção colapsável. */
.subsection-title {
    margin: 14px 0 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    /* Texto secundário normal — NÃO a cor de destaque (--accent, verde):
       isto é um sub-título dentro de um painel que já tem o seu próprio
       título a verde; usar a mesma cor aqui confundia os dois níveis. */
    color: var(--text-secondary);
}

small.hint {
    display: block;
    margin-top: 4px;
}

/* Secções colapsáveis */
.collapsible .section-toggle {
    cursor: pointer;
    user-select: none;
}

.collapsible .toggle-icon {
    margin-left: auto;
    transition: transform 0.2s;
    font-size: 10px;
}

.collapsible.collapsed .toggle-icon {
    transform: rotate(-90deg);
}

/* Sub-secção dentro de um painel (ex: "Configurar Bloco" dentro de "Blocos",
   "Media Item" dentro de "Conteúdos do Bloco") — mesmo mecanismo de
   colapsar/expandir do .panel-section, mas um nível mais pequeno (h4). */
.panel-subsection {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.panel-subsection h4.section-toggle {
    text-transform: none;
    margin: 0 0 10px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-subsection h4.section-toggle i:first-child {
    color: var(--accent);
}

.collapsible.collapsed .section-content {
    display: none;
}

/* Controlos */
.control-group {
    margin-bottom: 10px;
}

.control-group label {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.control-group input[type="text"],
.control-group input[type="url"],
.control-group input[type="number"],
.control-group input[type="datetime-local"],
.control-group select {
    width: 100%;
    padding: 7px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
    transition: border-color 0.2s;
}

/* Spinner (setas cima/baixo) de input[type=number] — em TODOS os campos
   numéricos do builder, não só dentro de .control-group (ex: os campos de
   X/Y/Largura/Altura em Configurar Bloco vivem num .field-grid próprio, e
   ficavam de fora do seletor mais específico). color-scheme:dark é o
   único hook que o Chrome/Edge respeitam para tingir o spinner nativo
   para a variante escura (acinzentada, consistente com o resto da UI),
   SEM aplicar filter — um filter (grayscale/brightness) distorcia o
   desenho nativo do botão de forma inconsistente conforme o estado
   (focus/hover), dando um aspeto "mais fino" nalguns campos e "clássico"
   noutros. Sempre visível (nunca só em foco/hover) — o mesmo aspeto em
   qualquer estado do campo, sem nenhuma manipulação extra do desenho
   nativo do browser. O teclado (↑/↓ dentro do campo) já funciona
   nativamente em qualquer input[type=number], sem JS extra. */
input[type="number"] {
    color-scheme: dark;
}

.control-group input:focus,
.control-group select:focus {
    outline: none;
    border-color: var(--accent);
}

/* input[type=datetime-local]: o ícone de calendário do browser é escuro por
   defeito (pensado para fundo claro) e fica invisível no fundo escuro do
   painel — color-scheme:dark troca-o (e o resto do chrome nativo do campo)
   para a variante clara, consistente com o resto da UI. */
.control-group input[type="datetime-local"] {
    color-scheme: dark;
}

.control-group input[type="color"] {
    width: 100%;
    height: 32px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--bg-input);
}

select {
    width: 100%;
    padding: 7px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
}

/* optgroup escuro, replicado do IntraOnline (.template-selector select
   optgroup) — as <option> sem regra própria herdam o fundo do <select>. */
select optgroup {
    background: var(--bg-panel);
    color: var(--text-secondary);
    font-weight: 600;
}

.color-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.color-row input[type="color"] {
    flex: 1 1 50%;
    min-width: 0;
    height: 32px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--bg-input);
}

.color-row input[type="color"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.color-code {
    flex: 1 1 50%;
    min-width: 0;
    padding: 7px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.color-code:focus {
    outline: none;
    border-color: var(--accent);
}

.alpha-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.alpha-label {
    font-size: 11px;
    color: var(--text-secondary);
}

.alpha-controls {
    display: grid;
    grid-template-columns: 1fr 78px;
    gap: 10px;
    align-items: center;
}

.alpha-number {
    width: 100%;
    padding: 7px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
}

.alpha-slider {
    width: 100%;
    height: 32px;
    margin: 0;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background:
        linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%),
        linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,0.12) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.12) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.12) 75%);
    background-size: 100% 100%, 12px 12px, 12px 12px, 12px 12px, 12px 12px;
    background-position: 0 0, 0 0, 0 6px, 6px -6px, -6px 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.alpha-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--accent);
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.alpha-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--accent);
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.alpha-slider:focus {
    outline: none;
    border-color: var(--accent);
}

/* Upload area */
.upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    background: var(--bg-input);
    /* Espaço antes do próximo controlo — sem isto, quando a upload-area já
       tem uma imagem (preview visível dentro dela) e não há nenhum botão
       "Remover imagem" a seguir (ex: overlay-items do Slider), o próximo
       campo ficava colado diretamente ao contorno da imagem. */
    margin-bottom: 10px;
}

.upload-area:hover {
    border-color: var(--accent);
    background: rgba(34, 197, 94, 0.1);
}

.upload-area i {
    font-size: 20px;
    color: var(--accent);
    margin-bottom: 6px;
}

.upload-area span {
    font-size: 11px;
    color: var(--text-secondary);
}

.upload-area.has-image {
    border-style: solid;
    border-color: var(--success);
}

.upload-preview {
    margin-top: 8px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    width: 100%;
}

.upload-preview img,
.upload-preview video {
    width: 100%;
    max-height: 80px;
    object-fit: cover;
    display: block;
}

/* Checkboxes (ex: Autoplay/Muted/Loop/Botão Som do vídeo) */
.checkbox-label {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12px;
}

.checkbox-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 8px 0;
}

.btn-remove {
    width: 100%;
    margin-top: 6px;
    margin-bottom: 10px;
}

/* Orientation tabs (Desktop/Mobile) */
.orientation-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.orientation-tabs.main-tabs {
    margin-bottom: 0;
}

.orientation-tab {
    flex: 1;
    padding: 6px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.orientation-tab:hover {
    background: var(--bg-hover);
}

.orientation-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* Grupos de campos lado a lado (ex: H/V, Largura/Altura, os 4 lados de
   Padding/Margin) — cada filho direto ocupa uma fração igual do espaço. */
.control-group.inline {
    display: flex;
    gap: 10px;
}

.control-group.inline > div {
    flex: 1 1 0;
    min-width: 0;
}

.control-group.inline .sublabel {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

/* Padding com 4 campos (Topo/Direita/Baixo/Esquerda) em vez de um único
   texto shorthand ("20px 20px") — cada campo tem a própria etiqueta por
   extenso, compacto o suficiente para caber os 4 numa linha ao lado uns
   dos outros. Ver block-inner-style-panel.js: os 4 inputs são combinados
   no shorthand CSS "top right bottom left" antes de gravar no state. */
.padding-sides {
    gap: 6px;
}

/* Border (px) + Cor Border na mesma linha — a cor fica mais estreita
   (só precisa de espaço para a amostra + hex), a espessura mais larga. */
.border-with-color > div:first-child {
    flex: 0 0 90px;
}

.border-with-color > div:last-child {
    flex: 1 1 auto;
}

/* Lista de blocos */
.btn-add {
    width: 100%;
    margin-top: 8px;
    margin-bottom: 12px;
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--text-secondary);
}

.btn-add:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.blocks-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 8px;
}

#blockEditorPanel.empty .field-grid {
    opacity: 0.35;
    pointer-events: none;
}

/* Flex Direction/Justify Content/Align Items do Canvas, desativados
   visualmente (mesmo estilo do cartão "Posição" vazio, acima) quando o
   valor já foi travado pelo template escolhido — ver
   block-inner-style-panel.js: renderBlockInnerStylePanel,
   flexFieldsDisabled. */
#blockFlexFieldsGroup.disabled {
    opacity: 0.35;
    pointer-events: none;
}

.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Posição: X/Y (com botão "centrar") numa linha, Largura/Altura/Camada
   noutra por baixo — 3 colunas iguais, em vez do Z solto sozinho. */
.field-grid-3 {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 10px;
}

.field-grid label {
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-grid input {
    width: 100%;
    padding: 7px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
}

/* Campo X/Y + botão "Centrar" na mesma linha (ver block-editor-panel.js,
   colorpicker-panel.js, split-slider-panel.js — todos usam este mesmo
   padrão para blocos/widgets de posicionamento livre). */
.field-with-center {
    display: flex;
    gap: 4px;
}

.field-with-center input {
    flex: 1 1 auto;
    min-width: 0;
}

.field-with-center .btn-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 11px;
}

.field-with-center .btn-icon:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* ============================================================
   Alerta dentro de um painel — destaque visual para informação
   que NÃO pode passar despercebida (ex: o domínio obrigatório ao
   publicar uma intra com Widget de Tempo, ver #weatherArea).
   Mais forte que um .hint normal: fundo, borda lateral e ícone.
   ============================================================ */
.nv-alert {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-sm, 6px);
    padding: 10px 12px;
    margin: 10px 0;
}

.nv-alert__title {
    color: var(--warning);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nv-alert p {
    margin: 4px 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
}

/* Linhas de exemplo (✅ / ❌) — monoespaçado para o URL ficar
   legível e as duas variantes fáceis de comparar. */
.nv-alert__ok,
.nv-alert__ko {
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
    font-size: 11px;
    word-break: break-all;
    padding: 4px 6px;
    border-radius: 4px;
}

.nv-alert__ok {
    background: rgba(40, 172, 89, 0.12);
    color: #7ee2a8;
}

.nv-alert__ko {
    background: rgba(239, 68, 68, 0.12);
    color: #ff9c9c;
}

.nv-alert code {
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 11px;
}