/* =====================================================================
   CRM Prospecção EPTV — Design System (Material Design 3)
   Tokens de cor derivados de uma seed roxa (#6750A4), papel/tom M3.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,300..500,0..1,0&display=swap');

.material-icon {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
}

:root {
    /* Cor — esquema claro (M3 baseline roxo) */
    --md-primary: #6750A4;
    --md-on-primary: #FFFFFF;
    --md-primary-container: #EADDFF;
    --md-on-primary-container: #21005D;

    --md-secondary: #625B71;
    --md-on-secondary: #FFFFFF;
    --md-secondary-container: #E8DEF8;
    --md-on-secondary-container: #1D192B;

    --md-tertiary: #7D5260;
    --md-on-tertiary: #FFFFFF;
    --md-tertiary-container: #FFD8E4;
    --md-on-tertiary-container: #31111D;

    --md-error: #BA1A1A;
    --md-on-error: #FFFFFF;
    --md-error-container: #FFDAD6;
    --md-on-error-container: #410002;

    --md-success: #386A20;
    --md-on-success: #FFFFFF;
    --md-success-container: #B7F397;
    --md-on-success-container: #0A2000;

    --md-warning: #7C5800;
    --md-warning-container: #FFDEA6;
    --md-on-warning-container: #271900;

    --md-background: #FFFBFE;
    --md-on-background: #1C1B1F;
    --md-surface: #FFFBFE;
    --md-on-surface: #1C1B1F;
    --md-surface-variant: #E7E0EC;
    --md-on-surface-variant: #49454F;
    --md-surface-container-lowest: #FFFFFF;
    --md-surface-container-low: #F7F2FA;
    --md-surface-container: #F3EDF7;
    --md-surface-container-high: #ECE6F0;
    --md-surface-container-highest: #E6E0E9;
    --md-outline: #79747E;
    --md-outline-variant: #CAC4D0;
    --md-inverse-surface: #313033;
    --md-inverse-on-surface: #F4EFF4;
    --md-scrim: rgba(0,0,0,0.4);

    /* Temperatura de lead */
    --temp-cliente: #386A20;
    --temp-quente: #BA1A1A;
    --temp-morno: #7C5800;
    --temp-frio: #1967D2;
    --temp-perdido: #79747E;

    /* Forma */
    --shape-xs: 4px;
    --shape-sm: 8px;
    --shape-md: 12px;
    --shape-lg: 16px;
    --shape-xl: 28px;
    --shape-full: 999px;

    /* Elevação */
    --elev-1: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px 1px rgba(0,0,0,0.15);
    --elev-2: 0 1px 2px rgba(0,0,0,0.30), 0 2px 6px 2px rgba(0,0,0,0.15);
    --elev-3: 0 1px 3px rgba(0,0,0,0.30), 0 4px 8px 3px rgba(0,0,0,0.15);

    --font-base: 'Roboto', 'Roboto Flex', system-ui, -apple-system, "Segoe UI", sans-serif;

    --largura-drawer: 280px;
    --altura-topbar: 64px;
    --altura-bottomnav: 72px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --md-primary: #D0BCFF;
        --md-on-primary: #381E72;
        --md-primary-container: #4F378B;
        --md-on-primary-container: #EADDFF;

        --md-secondary: #CCC2DC;
        --md-on-secondary: #332D41;
        --md-secondary-container: #4A4458;
        --md-on-secondary-container: #E8DEF8;

        --md-tertiary: #EFB8C8;
        --md-on-tertiary: #492532;
        --md-tertiary-container: #633B48;
        --md-on-tertiary-container: #FFD8E4;

        --md-error: #FFB4AB;
        --md-on-error: #690005;
        --md-error-container: #93000A;
        --md-on-error-container: #FFDAD6;

        --md-success: #9CD67D;
        --md-on-success: #143B04;
        --md-success-container: #235116;
        --md-on-success-container: #B7F397;

        --md-warning: #F7BD48;
        --md-warning-container: #5F4200;
        --md-on-warning-container: #FFDEA6;

        --md-background: #1C1B1F;
        --md-on-background: #E6E1E5;
        --md-surface: #1C1B1F;
        --md-on-surface: #E6E1E5;
        --md-surface-variant: #49454F;
        --md-on-surface-variant: #CAC4D0;
        --md-surface-container-lowest: #0F0D13;
        --md-surface-container-low: #1D1B20;
        --md-surface-container: #211F26;
        --md-surface-container-high: #2B2930;
        --md-surface-container-highest: #36343B;
        --md-outline: #938F99;
        --md-outline-variant: #49454F;
        --md-inverse-surface: #E6E1E5;
        --md-inverse-on-surface: #313033;

        --temp-cliente: #9CD67D;
        --temp-quente: #FFB4AB;
        --temp-morno: #F7BD48;
        --temp-frio: #9ECAFF;
        --temp-perdido: #938F99;
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--md-background);
    color: var(--md-on-background);
    font-family: var(--font-base);
    -webkit-font-smoothing: antialiased;
}

body { font-size: 1rem; line-height: 1.5; }

a { color: var(--md-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.5em; line-height: 1.25; }
.md-display { font-size: 2rem; font-weight: 400; letter-spacing: -0.25px; }
.md-headline { font-size: 1.5rem; font-weight: 500; }
.md-title { font-size: 1.125rem; font-weight: 500; }
.md-title-sm { font-size: 0.95rem; font-weight: 500; }
.md-body { font-size: 0.95rem; }
.md-label { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.1px; }

/* ---------- Layout raiz: drawer + topbar + conteúdo ---------- */

.app-shell { min-height: 100vh; display: flex; }

.app-drawer {
    width: var(--largura-drawer);
    flex-shrink: 0;
    background: var(--md-surface-container-low);
    border-right: 1px solid var(--md-outline-variant);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 40;
    transition: transform .25s ease;
}

.app-drawer__brand {
    display: flex; align-items: center; gap: 12px;
    padding: 20px 24px 16px;
}
.app-drawer__brand .logo-dot {
    width: 36px; height: 36px; border-radius: var(--shape-md);
    background: var(--md-primary); color: var(--md-on-primary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.1rem;
}
.app-drawer__brand strong { font-size: 1rem; display: block; }
.app-drawer__brand span { font-size: 0.75rem; color: var(--md-on-surface-variant); }

.app-drawer nav { flex: 1; overflow-y: auto; padding: 8px 12px; }

.nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; margin: 2px 0;
    border-radius: var(--shape-full);
    color: var(--md-on-surface-variant);
    font-size: 0.875rem; font-weight: 500;
    cursor: pointer; text-decoration: none;
}
.nav-item .material-icon { font-size: 20px; width: 20px; text-align: center; }
.nav-item:hover { background: var(--md-surface-container-high); text-decoration: none; }
.nav-item.ativo { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

.nav-section-label {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--md-outline); padding: 16px 16px 4px;
}

.app-drawer__footer { padding: 12px; border-top: 1px solid var(--md-outline-variant); }

.app-main {
    flex: 1;
    margin-left: var(--largura-drawer);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    height: var(--altura-topbar);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px;
    background: var(--md-surface);
    border-bottom: 1px solid var(--md-outline-variant);
    position: sticky; top: 0; z-index: 30;
}
.app-topbar__title { font-size: 1.1rem; font-weight: 500; display: flex; align-items: center; gap: 10px; }
.app-topbar__actions { display: flex; align-items: center; gap: 8px; }

.btn-menu-mobile { display: none; }

.app-content { padding: 24px; flex: 1; }

.avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--md-tertiary-container); color: var(--md-on-tertiary-container);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 0.85rem;
}

/* ---------- Bottom nav (mobile) ---------- */

.app-bottomnav {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0;
    height: var(--altura-bottomnav);
    background: var(--md-surface-container);
    border-top: 1px solid var(--md-outline-variant);
    z-index: 40;
    align-items: stretch;
}
.app-bottomnav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; color: var(--md-on-surface-variant); font-size: 0.7rem; text-decoration: none;
}
.app-bottomnav a.ativo { color: var(--md-primary); font-weight: 600; }
.app-bottomnav .material-icon { font-size: 22px; }

.drawer-overlay {
    display: none;
    position: fixed; inset: 0; background: var(--md-scrim); z-index: 39;
}

@media (max-width: 1023px) {
    .app-drawer { transform: translateX(-100%); box-shadow: var(--elev-3); }
    .app-drawer.aberto { transform: translateX(0); }
    .app-main { margin-left: 0; }
    .btn-menu-mobile { display: inline-flex; }
    .drawer-overlay.ativo { display: block; }
}

@media (max-width: 767px) {
    .app-bottomnav { display: flex; }
    .app-content { padding: 16px 16px calc(var(--altura-bottomnav) + 16px); }
}

/* ---------- Componentes ---------- */

.md-card {
    background: var(--md-surface-container-low);
    border-radius: var(--shape-lg);
    padding: 20px;
    border: 1px solid var(--md-outline-variant);
}
.md-card.elevado { box-shadow: var(--elev-1); border: none; }

.grid { display: grid; gap: 16px; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) { .grid-cols-4 { grid-template-columns: repeat(2, 1fr); } .grid-cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .grid-cols-4, .grid-cols-3, .grid-cols-2 { grid-template-columns: 1fr; } }

.stat-card { display: flex; flex-direction: column; gap: 4px; }
.stat-card .valor { font-size: 1.75rem; font-weight: 600; }
.stat-card .rotulo { font-size: 0.8rem; color: var(--md-on-surface-variant); }
.stat-card .material-icon { color: var(--md-primary); font-size: 22px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 20px; border-radius: var(--shape-full);
    font-size: 0.875rem; font-weight: 500; border: none; cursor: pointer;
    font-family: var(--font-base);
    transition: box-shadow .15s ease, background .15s ease;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-filled { background: var(--md-primary); color: var(--md-on-primary); }
.btn-filled:hover { box-shadow: var(--elev-1); }
.btn-tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.btn-outlined { background: transparent; border: 1px solid var(--md-outline); color: var(--md-primary); }
.btn-text { background: transparent; color: var(--md-primary); padding: 0 12px; }
.btn-error { background: var(--md-error); color: var(--md-on-error); }
.btn-sm { height: 32px; padding: 0 14px; font-size: 0.8rem; }
.btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; background: transparent; color: var(--md-on-surface-variant); border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.btn-icon:hover { background: var(--md-surface-container-high); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.fab {
    position: fixed; right: 24px; bottom: 24px;
    width: 56px; height: 56px; border-radius: var(--shape-lg);
    background: var(--md-primary-container); color: var(--md-on-primary-container);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--elev-3); border: none; cursor: pointer; z-index: 35;
    font-size: 24px;
}
@media (max-width: 767px) { .fab { bottom: calc(var(--altura-bottomnav) + 16px); } }

.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: var(--shape-full);
    font-size: 0.75rem; font-weight: 500;
    border: 1px solid var(--md-outline-variant);
    background: var(--md-surface-container);
    color: var(--md-on-surface-variant);
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; }

.chip-temp-cliente { background: color-mix(in srgb, var(--temp-cliente) 16%, transparent); color: var(--temp-cliente); border-color: transparent; }
.chip-temp-quente { background: color-mix(in srgb, var(--temp-quente) 16%, transparent); color: var(--temp-quente); border-color: transparent; }
.chip-temp-morno { background: color-mix(in srgb, var(--temp-morno) 18%, transparent); color: var(--temp-morno); border-color: transparent; }
.chip-temp-frio { background: color-mix(in srgb, var(--temp-frio) 16%, transparent); color: var(--temp-frio); border-color: transparent; }
.chip-temp-perdido { background: color-mix(in srgb, var(--temp-perdido) 16%, transparent); color: var(--temp-perdido); border-color: transparent; }

.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--shape-full); font-size: 0.7rem; font-weight: 600; }
.badge-sucesso { background: var(--md-success-container); color: var(--md-on-success-container); }
.badge-erro { background: var(--md-error-container); color: var(--md-on-error-container); }
.badge-alerta { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.badge-neutro { background: var(--md-surface-container-high); color: var(--md-on-surface-variant); }

/* Campos de formulário */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 0.8rem; font-weight: 500; color: var(--md-on-surface-variant); }
.field .ajuda { font-size: 0.75rem; color: var(--md-outline); }
.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=number], .field input[type=date], .field input[type=datetime-local],
.field input[type=tel], .field input[type=url], .field select, .field textarea {
    height: 44px; padding: 0 14px; border-radius: var(--shape-sm);
    border: 1px solid var(--md-outline); background: var(--md-surface);
    color: var(--md-on-surface); font-family: var(--font-base); font-size: 0.9rem;
}
.field textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: 2px solid var(--md-primary); outline-offset: -1px; border-color: var(--md-primary);
}
.field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.field-row .field { flex: 1; min-width: 200px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }

/* Tabela */
.table-wrap { overflow-x: auto; border-radius: var(--shape-lg); border: 1px solid var(--md-outline-variant); }
table.md-table { width: 100%; border-collapse: collapse; background: var(--md-surface); font-size: 0.875rem; }
table.md-table th { text-align: left; padding: 12px 16px; background: var(--md-surface-container-low); color: var(--md-on-surface-variant); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .4px; }
table.md-table td { padding: 12px 16px; border-top: 1px solid var(--md-outline-variant); vertical-align: middle; }
table.md-table tr:hover td { background: var(--md-surface-container-low); }

/* Kanban */
.kanban { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.kanban-coluna { min-width: 280px; max-width: 300px; flex-shrink: 0; background: var(--md-surface-container-low); border-radius: var(--shape-lg); padding: 12px; }
.kanban-coluna__cabecalho { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 12px; }
.kanban-coluna__cabecalho .titulo { font-weight: 600; font-size: 0.85rem; display: flex; align-items: center; gap: 8px; }
.kanban-coluna__cabecalho .cor-dot { width: 10px; height: 10px; border-radius: 50%; }
.kanban-lista { display: flex; flex-direction: column; gap: 10px; min-height: 40px; }
.kanban-card {
    background: var(--md-surface); border-radius: var(--shape-md); padding: 12px;
    box-shadow: var(--elev-1); cursor: grab; border: 1px solid var(--md-outline-variant);
}
.kanban-card:active { cursor: grabbing; }
.kanban-card.arrastando { opacity: 0.5; }
.kanban-card .empresa { font-weight: 600; font-size: 0.85rem; margin-bottom: 4px; }
.kanban-card .valor { font-size: 0.8rem; color: var(--md-on-surface-variant); margin-bottom: 8px; }
.kanban-card .rodape { display: flex; align-items: center; justify-content: space-between; }
.kanban-coluna.drag-over { outline: 2px dashed var(--md-primary); outline-offset: 2px; }

/* Flash messages */
.flash-stack { position: fixed; top: 16px; right: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
.flash { padding: 12px 16px; border-radius: var(--shape-md); box-shadow: var(--elev-2); font-size: 0.85rem; }
.flash-sucesso { background: var(--md-success-container); color: var(--md-on-success-container); }
.flash-erro { background: var(--md-error-container); color: var(--md-on-error-container); }
.flash-info { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

.progress-bar { height: 8px; border-radius: var(--shape-full); background: var(--md-surface-container-high); overflow: hidden; }
.progress-bar__fill { height: 100%; background: var(--md-primary); border-radius: var(--shape-full); transition: width .3s ease; }

.empty-state { text-align: center; padding: 48px 24px; color: var(--md-on-surface-variant); }
.empty-state .material-icon { font-size: 40px; margin-bottom: 12px; opacity: .6; }

.divider { height: 1px; background: var(--md-outline-variant); border: none; margin: 16px 0; }

.text-muted { color: var(--md-on-surface-variant); }
.text-sm { font-size: 0.8rem; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mb-16 { margin-bottom: 16px; } .mt-16 { margin-top: 16px; }