/* ==========================================================================
   mktdoimovel — Design System compartilhado
   Ver docs/design-system.md para o catálogo completo e o racional de cada
   token/componente. Incluir este arquivo em telas NOVAS, depois do CSS core
   do Vuexy e antes de qualquer <style> específico da página.

   Tokens e padrões extraídos das páginas de referência:
   clientes-v3.php, cliente-detalhe-v3.php, crm-imoveis-v2.php,
   crm-editar-imovel-v2.php, funil-v3.php — não altera nenhuma delas.
   ========================================================================== */

:root {
    /* Cores — mesmas cores padrão do tema Vuexy, reexpostas como variáveis */
    --c-primary:      #696cff;
    --c-primary-lt:   rgba(105, 108, 255, .10);
    --c-primary-md:   rgba(105, 108, 255, .20);
    --c-primary-hover:#585bff;
    --c-success:      #71dd37;
    --c-success-lt:   rgba(113, 221, 55, .12);
    --c-warning:      #ffab00;
    --c-warning-lt:   rgba(255, 171, 0, .12);
    --c-danger:       #ff3e1d;
    --c-danger-lt:    rgba(255, 62, 29, .10);
    --c-info:         #03c3ec;
    --c-info-lt:      rgba(3, 195, 236, .10);
    --c-muted:        #a1acb8;
    --c-border:       #e9e9ec;
    --c-bg:           #f5f5f9;
    --c-card:         #ffffff;
    --c-card-header:  #fafbff;
    --c-text:         #566a7f;
    --c-text-strong:  #32475c;

    /* Navbar — o gradiente que o tema aplica via .bg-gradient-warning.
       Tokenizado em 08/08/2026 para o wizard de onboarding poder pintar o
       navbar sem depender da classe do Vuexy. ⚠️ core.css:7272 renderiza
       #ffcfa1 no segundo stop; o valor canônico do design system é #fece9f. */
    --c-navbar-from:  #ffa045;
    --c-navbar-to:    #fece9f;

    /* Formas e elevação */
    --c-radius:       10px;
    --c-radius-sm:    6px;
    --c-radius-btn:   7px;
    --c-radius-pill:  20px;
    --c-radius-modal: 14px;
    --c-border-w:     1.5px;
    --c-shadow:       0 2px 12px rgba(50, 71, 92, .07);
    --c-shadow-md:    0 4px 20px rgba(50, 71, 92, .12);
    --c-focus-ring:   0 0 0 3px var(--c-primary-lt);
    --c-glow-primary: 0 4px 16px rgba(105, 108, 255, .25);

    /* Tipografia — a escala já praticada nas telas de referência.
       Convenção do projeto: px com incrementos de meio pixel, não rem. */
    --font-core:      "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --lh-body:        1.4;
    --lh-tight:       1.15;
    --ls-label:       .4px;
}

/* ── Card ──────────────────────────────────────────────────────────────── */
.ds-card {
    background: var(--c-card);
    border-radius: var(--c-radius);
    box-shadow: var(--c-shadow);
    overflow: hidden;
}
.ds-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--c-border);
    background: #fafbff;
}
.ds-card-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--c-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    background: rgba(161, 172, 184, .12);
    color: var(--c-muted);
}
.ds-card-icon--primary { background: var(--c-primary-lt); color: var(--c-primary); }
.ds-card-icon--success { background: var(--c-success-lt); color: var(--c-success); }
.ds-card-icon--warning { background: var(--c-warning-lt); color: var(--c-warning); }
.ds-card-icon--danger  { background: var(--c-danger-lt);  color: var(--c-danger); }
.ds-card-icon--info     { background: var(--c-info-lt);    color: var(--c-info); }
.ds-card-title { font-size: 13px; font-weight: 700; color: var(--c-text-strong); }
.ds-card-sub   { font-size: 11px; color: var(--c-muted); margin: 0; }
.ds-card-body  { padding: 16px 18px; }

/* ── Stat / KPI tile ───────────────────────────────────────────────────── */
.ds-stat { text-align: center; height: 100%; }
.ds-stat .ds-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ds-stat-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--c-muted);
    margin: 0 0 6px;
}
.ds-stat-value {
    font-size: 27px;
    font-weight: 800;
    color: var(--c-text-strong);
    line-height: 1.15;
}
.ds-stat-sub {
    font-size: 11.5px;
    color: var(--c-text);
    margin-top: 4px;
}

/* ── Badge / chip ──────────────────────────────────────────────────────── */
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.ds-badge--primary { background: var(--c-primary-lt); color: var(--c-primary); }
.ds-badge--success  { background: var(--c-success-lt);  color: #2d6a08; }
.ds-badge--warning  { background: var(--c-warning-lt);  color: #8a5d00; }
.ds-badge--danger   { background: var(--c-danger-lt);   color: #c0321a; }
.ds-badge--info     { background: var(--c-info-lt);     color: #0b7285; }
.ds-badge--muted    { background: #f0efea; color: #666; }

.ds-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 4px 6px 4px 12px;
    border-radius: 20px;
    background: var(--c-primary-lt);
    border: 1px solid rgba(105, 108, 255, .2);
    color: var(--c-text-strong);
}
.ds-chip-remove {
    border: none;
    background: transparent;
    color: var(--c-muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 50%;
}
.ds-chip-remove:hover { color: var(--c-danger); background: var(--c-danger-lt); }

/* Chip usado como filtro clicável (sem botão de remover): padding simétrico e
   estado neutro por padrão — o .ds-chip base já vem com fundo primary-lt, que
   faria todos os filtros parecerem selecionados. */
.ds-chip--filtro {
    padding: 4px 12px;
    background: transparent;
    border-color: var(--c-border);
    color: var(--c-muted);
    font-weight: 600;
    cursor: pointer;
}
.ds-chip--filtro:hover { border-color: var(--c-primary); color: var(--c-text-strong); }
.ds-chip--active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}

/* ── Botão de ação ─────────────────────────────────────────────────────── */
.ds-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 13px;
    border-radius: 7px;
    border: 1.5px solid var(--c-border);
    background: var(--c-card);
    color: var(--c-text);
    cursor: pointer;
    transition: all .13s;
}
.ds-btn:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-lt); }
.ds-btn--primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.ds-btn--primary:hover { background: #585bff; border-color: #585bff; color: #fff; }
.ds-btn--sm { padding: 4px 9px; font-size: 11.5px; }
.ds-btn--full { width: 100%; justify-content: center; }

/* ── Campo de formulário ───────────────────────────────────────────────── */
.ds-field { margin-bottom: 12px; }
.ds-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--c-muted);
    margin-bottom: 4px;
}
.ds-input {
    width: 100%;
    font-size: 13px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--c-radius-sm);
    padding: 7px 10px;
    color: var(--c-text-strong);
    background: var(--c-card);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.ds-input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-lt); }

/* ── Campo obrigatório (convenção legada ".ob"/".obg", reaproveitada aqui) ──
   ".ob" já existe em vários formulários do CRM (ex.: crm-editar-imovel-v2.php),
   mas só tinha efeito visual onde o <style> local a definia. Centralizado aqui
   para funcionar em qualquer tela que inclua este arquivo. */
.form-control.ob, select.ob { border-left: 3px solid #ffc107 !important; }
.obg { color: #f75676; }

/* ── Painel de filtro colapsável ───────────────────────────────────────── */
.ds-filter-panel { margin-bottom: 16px; }
.ds-filter-panel-header { cursor: pointer; }
.ds-filter-panel-body.is-collapsed { display: none; }
.ds-filter-toggle-ico { transition: transform .2s; }
.ds-filter-panel.is-open .ds-filter-toggle-ico { transform: rotate(180deg); }

/* ── Seletor de visualização (lista / grid / tabela) ──────────────────── */
.ds-view-switch {
    display: inline-flex;
    border: 1.5px solid var(--c-border);
    border-radius: 8px;
    overflow: hidden;
}
.ds-view-switch button {
    border: none;
    background: var(--c-card);
    color: var(--c-muted);
    padding: 6px 11px;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
    border-right: 1.5px solid var(--c-border);
    transition: all .13s;
}
.ds-view-switch button:last-child { border-right: none; }
.ds-view-switch button:hover { color: var(--c-primary); background: var(--c-primary-lt); }
.ds-view-switch button.active { background: var(--c-primary); color: #fff; }

/* ── Kanban (card de funil) ────────────────────────────────────────────── */
.ds-kanban-col {
    min-width: 280px;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ds-kanban-col-header {
    background: var(--c-card);
    border-radius: var(--c-radius);
    box-shadow: var(--c-shadow);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 3px solid var(--accent-color, var(--c-primary));
}
.ds-kanban-card {
    background: var(--c-card);
    border-radius: var(--c-radius);
    box-shadow: var(--c-shadow);
    padding: 14px;
    border-left: 3px solid var(--accent-color, var(--c-primary));
    transition: box-shadow .15s, transform .15s;
}
.ds-kanban-card:hover { box-shadow: var(--c-shadow-md); transform: translateY(-2px); }

/* ── Estado vazio / texto muted ────────────────────────────────────────── */
.ds-text-muted { color: var(--c-muted); }
.ds-text-strong { color: var(--c-text-strong); font-weight: 700; }
.ds-label-inline {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--c-muted);
}

/* ── Sidebar de configurações ─────────────────────────────────────────── */
.ds-sidebar-config {
    position: sticky;
    top: 10px;
}
.ds-sidebar-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--c-radius-sm);
    font-size: 13px;
    color: var(--c-text);
    text-decoration: none;
    transition: background-color .13s, color .13s;
}
.ds-sidebar-link i { font-size: 15px; flex-shrink: 0; }
.ds-sidebar-link:hover { background: var(--c-primary-lt); color: var(--c-primary); text-decoration: none; }
.ds-sidebar-link.active { background: var(--c-primary-lt); color: var(--c-primary); font-weight: 600; }

.ds-sidebar-section-title {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--c-muted);
    padding: 14px 10px 6px;
    margin-top: 4px;
    border-top: 1px solid var(--c-border);
}
.ds-sidebar-section:first-child .ds-sidebar-section-title {
    border-top: none;
    padding-top: 4px;
    margin-top: 0;
}
.ds-sidebar-link--label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--c-text);
}
.ds-sidebar-link--label i { font-size: 15px; flex-shrink: 0; }
.ds-sidebar-sublist {
    list-style: none;
    margin: 0;
    padding-left: 20px;
}
.ds-sidebar-sublist .ds-sidebar-link { font-size: 12px; padding: 6px 10px; }