/* public/css/theme.css
   Componentes repetidos do painel. Existem como CSS, e não como cadeias de
   classes Tailwind copiadas em cada arquivo, para que ajustar o visual seja
   editar um lugar só. */

/* O fundo era cinza-claro (#F4F5F9) e tudo por cima dele era branco: página,
   cartão e campo caíam quase no mesmo tom, e num formulário longo o olho não
   separava um bloco do outro. O fundo agora é creme, os cartões seguem brancos,
   e é essa distância entre os dois que desenha cada elemento.

   Creme e não cinza porque o laranja da marca é quente: sobre cinza azulado ele
   destoava, sobre creme ele pertence à mesma família. */
:root {
    --primary: #F97316;
    --primary-dark: #EA580C;
    --primary-soft: #FFF0E3;
    --canvas: #F8F2E9;         /* creme: fundo da página */
    --card: #FFFFFF;           /* cartões e campos em foco */
    --line: #E7DBC9;           /* contorno que se enxerga sobre branco e creme */
    --line-strong: #D6C3A6;    /* borda de campo e divisória que precisa pesar */
    --ink: #1F2433;
    --ink-muted: #6E6759;      /* era #8A90A2: 3,4:1 sobre branco, abaixo do mínimo legível */
    --sidebar: #191C27;
    --sidebar-hover: #252A38;
    --sidebar-muted: #8B92A5;
}

/* No escuro o creme não cabe — o que falta ali é separação, então as linhas
   sobem de tom e o cartão se afasta mais do fundo. */
.dark {
    --canvas: #0E1118;
    --card: #191E2B;
    --line: #303648;
    --line-strong: #3E4659;
    --ink: #F1F3F7;
    --ink-muted: #A2A9BC;
    --primary-soft: #33220F;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--canvas);
    color: var(--ink);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Cartão ─────────────────────────────────────────────────────────────── */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--sombra-cartao);
}

/* Sombra amarronzada, não cinza: sombra cinza sobre fundo creme fica com uma
   borda suja em volta do cartão. */
:root { --sombra-cartao: 0 1px 2px rgba(120, 82, 40, .06), 0 6px 18px rgba(120, 82, 40, .07); }
.dark { --sombra-cartao: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .30); }

/* ── Blocos de conteúdo do painel ───────────────────────────────────────── */
/* As seções são marcadas direto na página com utilitários do Tailwind
   (`bg-surface rounded-2xl border`). Em vez de reescrever a classe em cada uma
   das oito seções de Configurações, o realce entra por aqui — e vale também
   para o cadastro e a edição de imóvel, que usam a mesma marcação. */
section.bg-surface,
.bg-surface.rounded-2xl {
    border-color: var(--line);
    box-shadow: var(--sombra-cartao);
}

/* Fio laranja no topo: diz onde um bloco começa sem precisar de mais texto,
   e é o que amarra o painel à cor da marca. Vale para os dois seletores
   acima porque Configurações usa <section> e as outras telas usam <div>. */
section.bg-surface,
.bg-surface.rounded-2xl { border-top: 2px solid var(--primary); }


.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}

.card-body { padding: 20px; }

/* A barrinha laranja antes do título é a assinatura visual do layout. */
.card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}
.card-title::before {
    content: '';
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: var(--primary);
    flex-shrink: 0;
}

.card-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    transition: color .15s;
}
.card-link:hover { color: var(--primary); }

/* ── Indicadores ────────────────────────────────────────────────────────── */
.kpi-icon {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary);
    flex-shrink: 0;
}

.kpi-value {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
    line-height: 1.15;
}

.kpi-label { font-size: 12.5px; font-weight: 500; color: var(--ink-muted); }

.chip {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}
.chip-up   { color: #12B76A; background: rgba(18, 183, 106, .10); }
.chip-down { color: #F04438; background: rgba(240, 68, 56, .10); }
.chip-flat { color: var(--ink-muted); background: rgba(138, 144, 162, .12); }

/* ── Barra lateral ──────────────────────────────────────────────────────── */
.side-section {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #5A6076;
    padding: 18px 20px 8px;
}

.side-link {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sidebar-muted);
    transition: background .15s, color .15s;
}
.side-link:hover { background: var(--sidebar-hover); color: #FFFFFF; }
.side-link .material-symbols-outlined { font-size: 20px; }

.side-link.active {
    background: var(--primary);
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(249, 115, 22, .35);
}
.side-link.active:hover { background: var(--primary-dark); }

.side-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(249, 115, 22, .18);
    color: var(--primary);
}
.side-link.active .side-badge { background: rgba(255, 255, 255, .25); color: #FFFFFF; }

/* Módulo ainda não lançado: visível, mas apagado e sem clique. */
.side-link-off { opacity: .45; cursor: not-allowed; }
.side-link-off:hover { background: transparent; color: var(--sidebar-muted); }
.side-soon {
    margin-left: auto;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid currentColor;
}

/* ── Barra superior ─────────────────────────────────────────────────────── */
.top-icon {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-muted);
    transition: background .15s, color .15s;
}
.top-icon:hover { background: var(--primary-soft); color: var(--primary); }

.top-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Tabela ─────────────────────────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-muted);
    padding: 10px 20px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.tbl td {
    padding: 12px 20px;
    font-size: 13px;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: rgba(249, 115, 22, .035); }

.pill {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

/* ── Avatar com iniciais ────────────────────────────────────────────────── */
.avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

/* ── Barras de rolagem discretas ────────────────────────────────────────── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD1DD; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #A9B1C2; }
.dark ::-webkit-scrollbar-thumb { background: #363C4D; }

/* Conteúdo largo (tabela, gráfico) rola dentro do próprio cartão em telas
   estreitas — a página nunca rola na horizontal. */
.scroll-x { overflow-x: auto; }

/* ── Kanban do CRM ──────────────────────────────────────────────────────── */
/* Vinha do <style> de crm.html. A largura fixa da coluna é o que faz o
   quadro rolar na horizontal em vez de espremer as etapas. */
.kanban-column { min-width: 340px; width: 340px; }
.lead-list     { min-height: 100px; }
.sortable-ghost {
    opacity: .45;
    background: var(--primary-soft) !important;
    border-radius: 12px;
}

#kanban-wrapper {
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--line);
    padding-bottom: 12px;
}
#kanban-wrapper::-webkit-scrollbar,
#top-scroll-wrapper::-webkit-scrollbar { height: 8px; }
#kanban-wrapper::-webkit-scrollbar-track,
#top-scroll-wrapper::-webkit-scrollbar-track { background: var(--line); border-radius: 10px; }
#kanban-wrapper::-webkit-scrollbar-thumb,
#top-scroll-wrapper::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; }
#kanban-wrapper::-webkit-scrollbar-thumb:hover,
#top-scroll-wrapper::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); }

/* ── Comodidades (cadastro e edição de imóvel) ──────────────────────────── */
/* Vinha do <style> de add-property.html e edit-property.html. */
.amenity-btn {
    /* O checkbox de dentro é .sr-only, ou seja, position:absolute. Sem este
       relative o bloco de contenção dele passa a ser o viewport: ele escapa do
       overflow:hidden da casca e estica o documento até a altura da lista de
       comodidades, deixando uma faixa vazia depois do formulário. */
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 2px solid var(--line);
    background: var(--card);
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-muted);
    transition: border-color .15s, background .15s, color .15s;
}
.amenity-btn:hover { border-color: var(--primary); color: var(--ink); }
.amenity-btn .material-symbols-outlined { font-size: 18px; }

/* Selecionada: o input fica escondido, então o estado vem do :checked. */
input[type="checkbox"]:checked + .amenity-btn,
.amenity-btn.selecionada {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
}

/* ── Formulários ────────────────────────────────────────────────────────── */
/* Esta regra não define fundo, e isso é proposital. Ela definia (`background:
   var(--card)`) e vencia o `bg-canvas` que as páginas pedem em cada campo — era
   por isso que todo campo saía branco dentro de cartão branco, sem contorno,
   e o formulário virava uma mancha só. Quem decide o fundo é a página; aqui
   entra só o que vale para todos: contorno, cor do texto e foco.

   1,5px vira 1px em tela comum (o navegador arredonda para pixel inteiro) e
   1,5px de verdade em tela retina — o fio acompanha a densidade em vez de
   afinar. Quem faz o contorno aparecer é a cor, --line-strong, escolhida para
   ter peso tanto sobre creme quanto sobre branco. */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="url"],
input[type="date"], input[type="search"], select, textarea {
    border: 1.5px solid var(--line-strong);
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
input::placeholder, textarea::placeholder { color: var(--ink-muted); }

input:hover, select:hover, textarea:hover { border-color: #E9A96B; }

/* No foco o campo fica branco e a borda acende: o que está sendo digitado
   passa a ser o ponto mais claro da tela. */
input:focus, select:focus, textarea:focus {
    background-color: var(--card);
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .18);
}

/* A busca do topo mora dentro de uma cápsula que já tem contorno próprio: um
   segundo contorno aqui seria caixa dentro de caixa. */
input.bg-transparent,
input.bg-transparent:hover,
input.bg-transparent:focus {
    border: none;
    background-color: transparent;
    box-shadow: none;
}