/* theme.css — Design tokens do painel LDNASA.
   Fonte única das cores/medidas do shell do admin (sidebar, topbar, marca).
   Padrão portado do painel milanoengenharia.com.br: NENHUMA cor chumbada no markup —
   trocar de projeto/cliente = trocar estas variáveis, sem caçar classe nas views.
   Carregado DEPOIS de styles.css/tailwind.css no _Layout para vencer o build do KTUI. */

:root {
    /* ─── Marca — identidade LDNA S/A (revisada em 2026-07-27) ───────────────────────
       Valores AMOSTRADOS do logo oficial atualizado (Logos/svg): "LDNA" é AZUL
       (#447bbd) e "S/A" é LARANJA (#e74725). O AZUL é a cor primária do painel
       (botões, links, item ativo); o laranja é ACCENT pontual. A rodada anterior
       tinha posto coral #df4b4b como primária → o painel ficou "muito vermelho".
       Corrigido: primária = azul, fiel à logo. */
    --ldna-brand: #447bbd;
    --ldna-brand-hover: #3a6ba3;
    --ldna-brand-soft: rgba(68, 123, 189, 0.12);
    --ldna-brand-focus: rgba(68, 123, 189, 0.5); /* outline de foco (precisa de alpha alto) */
    --ldna-brand-contrast: #ffffff;

    /* Accent laranja (o "S/A" da logo). Uso pontual — realce, selo, detalhe.
       Nunca vira cor de botão primário nem de texto corrido. */
    --ldna-accent: #e74725;
    --ldna-accent-soft: rgba(231, 71, 37, 0.12);

    /* Gradiente da identidade (azul → roxo → laranja) — o gradiente oficial da marca.
       Reservado para superfícies de MARCA (login, cabeçalho de destaque) — nunca para
       texto ou controle de formulário. */
    --ldna-brand-grad-1: #447bbd; /* azul    */
    --ldna-brand-grad-2: #74439d; /* roxo    */
    --ldna-brand-grad-3: #e74725; /* laranja */
    --ldna-brand-gradient: linear-gradient(135deg, var(--ldna-brand-grad-1) 0%, var(--ldna-brand-grad-2) 50%, var(--ldna-brand-grad-3) 100%);

    /* Sidebar — agora sobre o GRADIENTE da marca (ver regra .sidebar). Tudo branco:
       texto, ícones e logo. Ativo/hover = véu branco translúcido (cor sólida sumiria
       no gradiente). */
    --ldna-sidebar-bg: #13172d; /* fallback caso o gradiente não carregue */
    --ldna-sidebar-text: rgba(255, 255, 255, 0.92);
    --ldna-sidebar-text-active: #ffffff;
    --ldna-sidebar-hover-bg: rgba(255, 255, 255, 0.12);
    --ldna-sidebar-active-bg: rgba(255, 255, 255, 0.22);
    --ldna-sidebar-border: rgba(255, 255, 255, 0.18);
    --ldna-sidebar-width: 250px;
    --ldna-sidebar-width-collapsed: 72px;

    /* Shell */
    --ldna-topbar-height: 70px;
    --ldna-topbar-bg: #ffffff;
    --ldna-topbar-border: #e5e7eb;
    --ldna-bg: #f8fafc;
    --ldna-text: #13182c; /* navy da identidade — texto forte */

    /* ─── Estado ─────────────────────────────────────────────────────────────────────
       Perigo em vinho escuro. Agora a primária é AZUL, então não há mais risco de
       confundir salvar com excluir; o vinho fica pela consistência e porque todo
       botão destrutivo leva ícone de lixeira. O laranja de accent (#e74725) é quente
       mas é usado só como realce, nunca como botão de ação. */
    --ldna-danger: #991b1b;
    --ldna-danger-hover: #7f1d1d;
}

/* ---------- Marca ---------- */

/* Usada no _Layout (ícones e item ativo da sidebar). Antes NÃO existia em CSS nenhum
   → os ícones herdavam a cor do body. Agora é o azul da marca. */
.primary-text {
    color: var(--ldna-brand);
}

/* ---------- Sidebar ---------- */

/* Fundo da sidebar = GRADIENTE oficial da marca (azul → roxo → laranja), na vertical
   por ser uma coluna alta. Um véu escuro por cima (primeira camada) segura o contraste
   do texto branco nas pontas mais claras do gradiente. */
.sidebar {
    background:
        linear-gradient(180deg, rgba(13, 15, 30, 0.30) 0%, rgba(13, 15, 30, 0.12) 50%, rgba(13, 15, 30, 0.34) 100%),
        linear-gradient(168deg, var(--ldna-brand-grad-1) 0%, var(--ldna-brand-grad-2) 50%, var(--ldna-brand-grad-3) 100%);
    background-color: var(--ldna-sidebar-bg);
    transition: width 0.25s ease;
}

/* Sobre o gradiente, ícones e rótulos são BRANCOS. .primary-text (ícones e rótulo do
   item ativo) herdaria o azul da marca — aqui vira branco. */
.sidebar .primary-text,
.sidebar__link {
    color: #fff;
}

/* Logo da marca no topo da sidebar. Altura explícita AQUI, não via classe Tailwind:
   o styles.css do KTUI é pré-compilado e não traz valores arbitrários (max-h-[34px]);
   sem altura, o SVG (que não tem width/height próprios) colapsa a 0×0 dentro do flex. */
.sidebar__brand-logo {
    height: 26px;
    width: auto;
    display: block;
}

/* ---------- Sidebar retrátil (padrão milanoengenharia) ----------
   TRUQUE: o estado recolhido só REDEFINE a variável de largura. Como a sidebar
   (style inline), o .kt-wrapper (media query) e o toggleSidebar() (JS) já leem
   var(--ldna-sidebar-width), todos se ajustam sozinhos — inclusive os estilos inline,
   porque var() é resolvido no valor computado. `html.sidebar-collapsed` (0,1,1) vence
   o `:root` (0,1,0). Sem isso, seria preciso caçar cada ponto que usa a largura. */
html.sidebar-collapsed {
    --ldna-sidebar-width: var(--ldna-sidebar-width-collapsed);
}

    /* Recolhido = só ícones: some o texto, o logo e as setas de submenu. */
    html.sidebar-collapsed .sidebar__label,
    html.sidebar-collapsed .sidebar__brand-logo,
    html.sidebar-collapsed .submenu-arrow {
        display: none;
    }

    html.sidebar-collapsed .sidebar__link,
    html.sidebar-collapsed .sidebar__logout,
    html.sidebar-collapsed .sidebar__brand {
        justify-content: center;
    }

    /* A seta do botão vira "expandir". */
    html.sidebar-collapsed .sidebar__collapse i {
        transform: rotate(180deg);
    }

/* Botão de recolher — só no desktop (no mobile a sidebar é escondida inteira). */
.sidebar__collapse {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
    transition: background 0.15s, color 0.15s;
}

    .sidebar__collapse i {
        transition: transform 0.25s ease;
    }

    .sidebar__collapse:hover {
        background: var(--ldna-brand-soft);
        color: #fff;
    }

@media (min-width: 1024px) {
    .sidebar__collapse {
        display: inline-flex;
    }
}

/* Tooltip no hover quando recolhido (o rótulo sumiu — o title vira a dica). */
html.sidebar-collapsed .sidebar__link,
html.sidebar-collapsed .sidebar__logout {
    position: relative;
}

    html.sidebar-collapsed .sidebar__link::after,
    html.sidebar-collapsed .sidebar__logout::after {
        content: attr(title);
        position: absolute;
        left: calc(100% + 8px);
        top: 50%;
        transform: translateY(-50%);
        background: #0f172a;
        color: #fff;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 12px;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.15s ease;
        z-index: 200;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    html.sidebar-collapsed .sidebar__link:hover::after,
    html.sidebar-collapsed .sidebar__logout:hover::after {
        opacity: 1;
    }

.sidebar__link {
    color: var(--ldna-sidebar-text);
}

    .sidebar__link:hover {
        background-color: var(--ldna-sidebar-hover-bg);
    }

    .sidebar__link.is--active {
        background-color: var(--ldna-sidebar-active-bg);
        color: var(--ldna-sidebar-text-active);
    }

.sidebar__footer {
    border-top: 1px solid var(--ldna-sidebar-border);
}

/* "Sair" do rodapé da sidebar. Como a sidebar agora é o gradiente, um botão gradiente
   sumiria; então é um botão de vidro (branco translúcido) que se destaca no gradiente. */
.sidebar__logout {
    background-color: rgba(255, 255, 255, 0.16);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.30);
}

    .sidebar__logout:hover {
        background-color: rgba(255, 255, 255, 0.26);
    }

/* ---------- Botões primários = GRADIENTE da marca ----------
   .kt-btn-primary vem do styles.css (KTUI pré-compilado); este arquivo carrega depois
   e sobrescreve. O gradiente é o mesmo da identidade (azul → roxo → laranja). */
.kt-btn-primary,
.kt-btn.kt-btn-primary {
    background-image: var(--ldna-brand-gradient);
    background-color: transparent;
    border-color: transparent;
    color: #fff;
}

    .kt-btn-primary:hover,
    .kt-btn.kt-btn-primary:hover {
        background-image: var(--ldna-brand-gradient);
        filter: brightness(1.08);
        color: #fff;
    }

/* ---------- Topbar ---------- */

.topbar {
    background-color: var(--ldna-topbar-bg);
    border-bottom: 1px solid var(--ldna-topbar-border);
    height: var(--ldna-topbar-height);
}

.topbar__logout {
    color: var(--ldna-danger);
}

    .topbar__logout:hover {
        color: var(--ldna-danger-hover);
        background-color: rgba(220, 38, 38, 0.08);
    }

/* ---------- Grid / listagem ---------- */

/* Título da listagem clicável (padrão Milano) — abre a edição sem depender do botão. */
/* ---------- Título da listagem: a CÉLULA INTEIRA é o link ----------
   O <a> nasce inline e cobria só as letras — 5% da área da célula (86x19 num
   espaço de 436x81). Quem mirava o nome errava o alvo e acabava indo no lápis.

   A área de clique vem de um `::after` posicionado sobre a célula inteira, não de
   esticar o próprio <a>. Motivo: `height:100%` num filho de <td> só resolve se a
   célula tiver altura DECLARADA, e a de tabela é calculada. Tentar forçar com o
   truque do `height:1px` na célula sai pela culatra — o 100% passa a resolver
   contra 1px e o alvo ENCOLHE (medido: 44px viraram 28px).
   O ::after é transparente: cobre o clique sem cobrir nada da vista. */

td:has(> .table__title-link) {
    position: relative;
}

    /* Realce no hover fica na CÉLULA, não no <a>: assim ele acompanha a área que
       de fato responde ao clique, inclusive o padding. */
    td:has(> .table__title-link):hover {
        background-color: rgb(0 0 0 / 3.5%);
    }

    /* Foco de teclado: o contorno tem de circundar a célula, que é o alvo real. */
    td:has(> .table__title-link:focus-visible) {
        outline: 2px solid var(--ldna-brand);
        outline-offset: -2px;
        border-radius: 6px;
    }

.table__title-link {
    display: block; /* já ganha a largura toda da célula */
    color: inherit;
    text-decoration: none;
}

    .table__title-link::after {
        content: "";
        position: absolute;
        inset: 0;
    }

    .table__title-link:hover {
        color: var(--ldna-brand);
    }

        /* Sublinhado só no NOME: com o link ocupando a célula, sublinhar tudo
           riscaria junto o slug/endereço da linha de apoio. */
        .table__title-link:hover .table__title-link-nome {
            text-decoration: underline;
        }

    .table__title-link:focus-visible {
        outline: none; /* o contorno é o da célula, acima */
    }

/* ---------- Empilhamento (z-index) — quem fica na frente de quem ----------
   🐛 Bug que isto conserta: com o editor em TELA CHEIA (z-index 1100), os modais de
   vídeo/PDF/imagem sumiam — o SweetAlert2 usa **z-index 1060 por padrão** e ficava ATRÁS.
   Ordem oficial do painel (mexeu num, confira os outros):
       sidebar 20  <  editor expandido 1100  <  barra da imagem 1200  <  SweetAlert 2000
   O SweetAlert é sempre o último: é ele que pede a decisão do usuário. */
.swal2-container {
    z-index: 2000 !important;
}

/* ---------- Editor em tela cheia (modo "expandir", estilo YouTube) ----------
   NÃO é modal: sem fundo escuro e sem "saltar" para frente. O próprio editor cresce
   até ocupar a tela, animando top/left/width/height a partir do lugar onde ele está
   (o JS fixa a posição atual e só então liga o .is--expandido — ver js/widgets/editor-expandir.js). */

.quill-wrapper {
    position: relative;
    transition: top .28s cubic-bezier(.4, 0, .2, 1),
                left .28s cubic-bezier(.4, 0, .2, 1),
                width .28s cubic-bezier(.4, 0, .2, 1),
                height .28s cubic-bezier(.4, 0, .2, 1),
                border-radius .28s ease;
}

    .quill-wrapper.is--expandido {
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 1100;
        border-radius: 0;
        background: #fff;
        display: flex;
        flex-direction: column;
    }

        /* Em tela cheia a área de escrita ocupa o que sobra (fora isso, o _Layout limita a 400px).
           O fundo é CINZA de propósito: com tudo branco, a tela inteira parecia editável e o
           usuário não achava a área de escrita (era uma coluna invisível no meio do branco). */
        .quill-wrapper.is--expandido .ql-container {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            background: var(--ldna-bg);
            cursor: text; /* clicar no cinza também leva o cursor p/ o texto (ver editor-expandir.js) */
        }

        /* A FOLHA: coluna branca com sombra, como Docs/Notion — deixa claro onde se escreve. */
        .quill-wrapper.is--expandido .ql-editor {
            max-height: none;
            height: auto;
            /* quem rola é o .ql-container (o fundo cinza); sem isto o _Layout deixa
               overflow-y:auto aqui e dá rolagem DENTRO da folha (duas barras) */
            overflow: visible;
            min-height: calc(100% - 64px);
            box-sizing: border-box;
            width: 100%;
            max-width: 860px;
            margin: 32px auto;
            padding: 56px 64px;
            background: #fff;
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .06);
        }

        /* Barra fica presa no topo enquanto o texto rola. */
        .quill-wrapper.is--expandido .ql-toolbar {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #fff;
            border-bottom: 1px solid var(--ldna-topbar-border);
        }

/* Dica do ESC — só aparece em tela cheia, ao lado do botão de voltar. */
.editor-dica-esc {
    display: none;
    position: absolute;
    top: 14px;
    right: 48px;
    z-index: 6;
    font-size: 11px;
    color: #9ca3af;
    pointer-events: none;
}

.is--expandido .editor-dica-esc {
    display: block;
}

@media (max-width: 900px) {
    .quill-wrapper.is--expandido .ql-editor {
        margin: 12px;
        padding: 24px 20px;
    }
}

/* Botão de expandir — canto superior direito, sobre a barra do Quill (que sobra vazia ali). */
.editor-expandir {
    position: absolute;
    top: 5px;
    right: 6px;
    z-index: 6;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    color: #9ca3af;
    transition: background .15s, color .15s;
}

    .editor-expandir:hover {
        background: var(--ldna-brand-soft);
        color: var(--ldna-brand);
    }

.is--expandido .editor-expandir {
    top: 8px;
    right: 12px;
}

/* ---------- Editor: menu "caixa do texto" (MAIÚSCULAS / minúsculas / ...) ----------
   É um picker CUSTOMIZADO do Quill: ele monta o <select> mas não sabe o rótulo de cada
   opção — os textos vêm daqui, por ::before (é assim que o próprio Quill faz com o header). */

.ql-snow .ql-picker.ql-caixa {
    width: 60px;
}

    .ql-snow .ql-picker.ql-caixa .ql-picker-label::before {
        content: 'Aa';
        font-weight: 600;
    }

    .ql-snow .ql-picker.ql-caixa .ql-picker-options {
        width: 210px;
    }

    .ql-snow .ql-picker.ql-caixa .ql-picker-item[data-value="maiusculas"]::before {
        content: 'MAIÚSCULAS';
    }

    .ql-snow .ql-picker.ql-caixa .ql-picker-item[data-value="minusculas"]::before {
        content: 'minúsculas';
    }

    .ql-snow .ql-picker.ql-caixa .ql-picker-item[data-value="titulo"]::before {
        content: 'Primeira Letra De Cada Palavra';
    }

    .ql-snow .ql-picker.ql-caixa .ql-picker-item[data-value="frase"]::before {
        content: 'Primeira letra da frase';
    }

/* Contador de palavras/caracteres, abaixo do editor. */
.editor-contador {
    margin-top: 4px;
    font-size: 11px;
    color: #9ca3af;
    text-align: right;
}

/* Citação no editor — espelha o CSS do SITE (Web/wwwroot/assets/css/conteudo.css),
   senão o editor mostra uma coisa e a página publicada mostra outra.
   Precisa do `.ql-snow` junto: o CSS do tema Snow usa `.ql-snow .ql-editor blockquote`
   (2 classes) e vencia a regra com 1 classe — a borda saía cinza. */
.ql-snow .ql-editor blockquote {
    margin: 16px 0;
    padding: 8px 0 8px 20px;
    border-left: 4px solid var(--ldna-brand);
    color: #374151;
    font-style: italic;
}

/* ---------- Bloco recolhível (SEO) ---------- */

/* Esconde o triângulo nativo do <summary> — a seta é o chevron do FontAwesome. */
.seo-block > summary::-webkit-details-marker {
    display: none;
}

.seo-block > summary::marker {
    content: "";
}

.seo-block[open] > summary .seo-block__arrow {
    transform: rotate(180deg);
}

.seo-block > summary:hover {
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 0.5rem;
}

/* ---------- Dashboard ---------- */

.stat-card__add {
    color: var(--ldna-brand);
    background-color: var(--ldna-brand-soft);
}

    .stat-card__add:hover {
        background-color: var(--ldna-brand);
        color: var(--ldna-brand-contrast);
    }