/* =====================================================================
   PREMIUM — camada de design system (carregada por ultimo).
   Eleva a identidade existente (violeta + sidebar escura) a um acabamento
   premium coeso: tokens, tipografia, sidebar/accordion, cards, botoes,
   tabelas, forms, KPIs e componentes do Dashboard. Multi-tenant: a cor de
   marca vem de --px-brand (default = violeta Vetrun).
   ===================================================================== */

:root {
    --px-brand: #8c52ff;
    --px-brand-600: #7c3ff2;
    --px-brand-700: #6a2fe0;
    --px-brand-050: #f4efff;
    --px-brand-100: #eae0ff;
    --px-brand-200: #d8c8ff;

    --px-ink: #17131f;
    --px-ink-2: #403a4e;
    --px-muted: #6b6780;
    --px-faint: #9995a8;

    --px-bg: #f6f6fb;
    --px-surface: #ffffff;
    --px-line: #ececf2;
    --px-line-2: #e0dfea;

    --px-ok: #12a150;   --px-ok-bg: #e8f7ef;
    --px-warn: #b9770a;  --px-warn-bg: #fdf3e0;
    --px-danger: #d92c3f; --px-danger-bg: #fdeaec;
    --px-info: #2f6bd6;  --px-info-bg: #eaf1fd;

    --px-radius: 14px;
    --px-radius-sm: 10px;
    --px-shadow-sm: 0 1px 2px rgba(23,19,31,.05), 0 1px 3px rgba(23,19,31,.05);
    --px-shadow: 0 8px 24px -12px rgba(40,26,86,.24), 0 2px 6px rgba(40,26,86,.05);
    --px-shadow-lg: 0 24px 50px -18px rgba(40,26,86,.32);

    --px-sidebar: #15131f;
    --px-sidebar-hover: #211d31;

    --px-display: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* ------------------------------ Base ------------------------------ */
body {
    background: var(--px-bg);
    color: var(--px-ink);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
}

.main { background: var(--px-bg); }

@media (min-width: 992px) {
    .content { padding: 2.25rem 2.25rem 1.5rem; }
}

h1, h2, h3, h4, h5, h6 { color: var(--px-ink); letter-spacing: -0.02em; }

.px-display { font-family: var(--px-display); font-optical-sizing: auto; font-weight: 500; letter-spacing: -0.01em; }
.px-eyebrow { font-size: .70rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--px-brand); }
.text-muted { color: var(--px-muted) !important; }

a { color: var(--px-brand-700); }
a:hover { color: var(--px-brand); }

/* ------------------------------ Sidebar ------------------------------ */
.sidebar, .sidebar-content,
.sidebar-content.js-simplebar { background: var(--px-sidebar) !important; }

.sidebar-brand {
    padding: 1.35rem 1.4rem 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.sidebar-nav { padding: .25rem .6rem 2rem; }

.sidebar-header {
    color: #6f6a86;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    padding: 1.15rem .75rem .35rem;
}

.sidebar-link, a.sidebar-link {
    background: transparent !important;
    color: #c7c3d6 !important;
    border-radius: 10px;
    margin: 1px 0;
    padding: .58rem .75rem;
    font-weight: 500;
    font-size: .875rem;
    border-left: 0 !important;
    display: flex;
    align-items: center;
    transition: background .15s ease, color .15s ease;
}
.sidebar-link .align-middle:first-child, .sidebar-link svg { width: 18px; height: 18px; flex: 0 0 auto; }
.sidebar-link i[data-feather] { stroke-width: 2px; }
.sidebar-link > span.align-middle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sidebar-link:hover, a.sidebar-link:hover {
    background: var(--px-sidebar-hover) !important;
    color: #fff !important;
}

.sidebar-item.active > .sidebar-link,
.sidebar-item.active .sidebar-link:hover {
    background: linear-gradient(90deg, rgba(140,82,255,.28), rgba(140,82,255,.08)) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--px-brand);
    border-left: 0 !important;
}

/* Accordion de grupos (DNA Marcenaria / DNA Sistema / etc.) */
.sidebar-link[data-bs-toggle="collapse"] { justify-content: flex-start; position: relative; }
.sidebar-link[data-bs-toggle="collapse"]::after {
    content: "";
    margin-left: auto;
    width: 8px; height: 8px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(-45deg);
    opacity: .5;
    transition: transform .2s ease;
}
.sidebar-link[data-bs-toggle="collapse"]:not(.collapsed)::after { transform: rotate(45deg); opacity: .9; }

.px-submenu {
    list-style: none;
    margin: 2px 0 4px;
    padding: 2px 0 2px .55rem;
    position: relative;
}
.px-submenu::before {
    content: ""; position: absolute; left: .5rem; top: 4px; bottom: 4px; width: 1px;
    background: rgba(255,255,255,.08);
}
.px-submenu .sidebar-link { display: block; font-size: .84rem; padding: .46rem .7rem; color: #a9a4bd !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-submenu .sidebar-item.active > .sidebar-link { box-shadow: inset 2px 0 0 var(--px-brand); }

/* ------------------------------ Navbar ------------------------------ */
.navbar.navbar-bg {
    background: rgba(255,255,255,.82) !important;
    backdrop-filter: saturate(1.6) blur(10px);
    border-bottom: 1px solid var(--px-line);
    box-shadow: none;
}
.navbar h4 { font-weight: 600; color: var(--px-ink); font-size: 1.02rem; }
.navbar .avatar { box-shadow: 0 0 0 2px var(--px-brand-100); }

.ruiw-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    background: linear-gradient(135deg, var(--px-brand), var(--px-brand-700));
    color: #fff; padding: .34rem .8rem; border-radius: 999px;
    font-size: .78rem; font-weight: 600;
    box-shadow: 0 6px 16px -6px rgba(140,82,255,.6);
    transition: transform .15s ease, box-shadow .15s ease;
}
.ruiw-toggle:hover .ruiw-pill { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(140,82,255,.7); }
.ruiw-badge { background: rgba(255,255,255,.22); padding: .05rem .4rem; border-radius: 999px; font-weight: 800; letter-spacing: .04em; }

/* ------------------------------ Cards ------------------------------ */
.card {
    background: var(--px-surface);
    border: 1px solid var(--px-line);
    border-radius: var(--px-radius);
    box-shadow: var(--px-shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--px-line);
    padding: 1rem 1.25rem;
}
.card-body { padding: 1.25rem; }
.card-title { color: var(--px-ink); font-weight: 650; font-size: 1rem; letter-spacing: -0.01em; }
.card-header .card-title { margin-bottom: 0; }

/* ------------------------------ Buttons ------------------------------ */
.btn { --bs-btn-padding-x: 1.1rem; --bs-btn-padding-y: .5rem; border-radius: 10px; font-weight: 600; font-size: .875rem; transition: transform .12s ease, box-shadow .15s ease, background .15s ease; }
.btn:active { transform: translateY(1px); }

.btn-primary, .btn-success {
    --bs-btn-color: #fff; --bs-btn-bg: var(--px-brand); --bs-btn-border-color: var(--px-brand);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--px-brand-600); --bs-btn-hover-border-color: var(--px-brand-600);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--px-brand-700); --bs-btn-active-border-color: var(--px-brand-700);
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--px-brand); --bs-btn-disabled-border-color: var(--px-brand);
    box-shadow: 0 6px 16px -8px rgba(140,82,255,.65);
}
.btn-primary:hover, .btn-success:hover { box-shadow: 0 10px 22px -8px rgba(140,82,255,.7); }

.btn-outline-primary { --bs-btn-color: var(--px-brand-700); --bs-btn-border-color: var(--px-brand-200); --bs-btn-hover-bg: var(--px-brand); --bs-btn-hover-border-color: var(--px-brand); --bs-btn-hover-color: #fff; }
.btn-outline-secondary { --bs-btn-color: var(--px-ink-2); --bs-btn-border-color: var(--px-line-2); --bs-btn-hover-bg: #f2f2f7; --bs-btn-hover-color: var(--px-ink); --bs-btn-hover-border-color: var(--px-line-2); }

/* ------------------------------ Forms ------------------------------ */
.form-control, .form-select {
    border-radius: 10px;
    border: 1px solid var(--px-line-2);
    background: #fff;
    color: var(--px-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control, .form-select { height: 42px; }
.form-control:focus, .form-select:focus {
    border-color: var(--px-brand);
    box-shadow: 0 0 0 3.5px rgba(140,82,255,.16);
}
.form-label { font-weight: 600; font-size: .8rem; color: var(--px-ink-2); margin-bottom: .3rem; }
.form-check-input:checked { background-color: var(--px-brand); border-color: var(--px-brand); }
.form-check-input:focus { border-color: var(--px-brand); box-shadow: 0 0 0 3px rgba(140,82,255,.16); }
.input-group-text { background: #f6f5fb; border-color: var(--px-line-2); color: var(--px-muted); border-radius: 10px; }

/* ------------------------------ Tables ------------------------------ */
.table { --bs-table-color: var(--px-ink); color: var(--px-ink); }
.table > thead.table-light th, .table > thead th {
    background: #faf9fe;
    color: var(--px-muted);
    font-size: .70rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    border-bottom: 1px solid var(--px-line-2);
}
.table > tbody > tr > td { border-color: var(--px-line); padding-top: .7rem; padding-bottom: .7rem; }
.table-hover > tbody > tr:hover > * { background: var(--px-brand-050); }

/* ------------------------------ Badges ------------------------------ */
.badge { font-weight: 600; letter-spacing: .01em; border-radius: 8px; padding: .38em .6em; }
.badge.bg-success { background: var(--px-ok) !important; }
.badge.bg-secondary { background: #6b6780 !important; }
.badge.bg-info { background: var(--px-info) !important; }

/* ------------------------------ Breadcrumb / alerts ------------------------------ */
.breadcrumb { font-size: .82rem; margin-bottom: 1rem; }
.breadcrumb-item.active { color: var(--px-muted); }
.breadcrumb-item a { color: var(--px-brand-700); }

/* ------------------------------ Modais ------------------------------ */
.modal-content { border: 1px solid var(--px-line); border-radius: 16px; box-shadow: var(--px-shadow-lg); }
.modal-header, .modal-footer { border-color: var(--px-line); }

/* ------------------------------ Métricas (valores calculados) ------------------------------ */
.metric { background: #fff; border: 1px solid var(--px-line); border-radius: 10px; padding: .7rem .6rem; height: 100%; }
.metric span { display: block; font-size: .72rem; color: var(--px-muted); }
.metric strong { font-size: 1.05rem; font-family: var(--px-display); font-weight: 600; color: var(--px-ink); }

/* ------------------------------ Alerts com flex ------------------------------ */
/* Alinha o ícone ao topo e deixa o texto quebrar limpo (evita texto "torto"). */
.alert.d-flex { align-items: flex-start; }
.alert.d-flex > i, .alert.d-flex > .bi { flex: 0 0 auto; margin-top: .12em; }
.alert.d-flex > span, .alert.d-flex > div { min-width: 0; }

/* ==================================================================
   COMPONENTES DE PAINEL / DASHBOARD
   ================================================================== */
.px-hero {
    background: radial-gradient(1200px 240px at 0% -40%, rgba(140,82,255,.16), transparent 60%),
                linear-gradient(180deg, #ffffff, #fbfaff);
    border: 1px solid var(--px-line);
    border-radius: 18px;
    padding: 1.6rem 1.75rem;
    box-shadow: var(--px-shadow-sm);
}
.px-hero h1 { font-family: var(--px-display); font-weight: 500; font-size: 1.9rem; margin: 0; }
.px-hero .px-hero-sub { color: var(--px-muted); margin-top: .25rem; }

/* KPIs */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 1100px){ .kpi-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .kpi-grid { grid-template-columns: 1fr; } }

.kpi-card {
    display: flex; align-items: center; gap: .9rem;
    background: var(--px-surface);
    border: 1px solid var(--px-line);
    border-radius: var(--px-radius);
    padding: 1.05rem 1.1rem;
    box-shadow: var(--px-shadow-sm);
    text-decoration: none; color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--px-shadow); border-color: var(--px-brand-200); color: inherit; }
.kpi-ico {
    width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
    background: var(--px-brand-050); color: var(--px-brand-700);
}
.kpi-card .kpi-label { display: block; font-size: .74rem; color: var(--px-muted); font-weight: 600; }
.kpi-card .kpi-val { display: block; font-family: var(--px-display); font-weight: 600; font-size: 1.7rem; line-height: 1.1; color: var(--px-ink); }
.kpi-card .kpi-sub { font-size: .72rem; color: var(--px-faint); }
.kpi-ok .kpi-ico { background: var(--px-ok-bg); color: var(--px-ok); }
.kpi-warn .kpi-ico { background: var(--px-warn-bg); color: var(--px-warn); }
.kpi-danger .kpi-ico { background: var(--px-danger-bg); color: var(--px-danger); }

/* Listas do dashboard (propostas / atendimentos) */
.dash-list { display: flex; flex-direction: column; }
.dash-item {
    display: flex; align-items: center; gap: .8rem;
    padding: .7rem .35rem; border-bottom: 1px solid var(--px-line);
    text-decoration: none; color: inherit;
    transition: background .12s ease;
}
.dash-item:last-child { border-bottom: 0; }
.dash-item:hover { background: var(--px-brand-050); border-radius: 10px; color: inherit; }
.dash-avatar {
    width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .8rem; color: #fff;
    background: linear-gradient(135deg, var(--px-brand), var(--px-brand-700));
}
.dash-avatar.is-human { background: linear-gradient(135deg,#0ea5e9,#2563eb); }
.dash-avatar.is-sdr { background: linear-gradient(135deg,#8c52ff,#6a2fe0); }
.dash-main { min-width: 0; flex: 1; }
.dash-main strong { display: block; font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-main small { color: var(--px-muted); }
.dash-meta { text-align: right; white-space: nowrap; }
.dash-value { font-weight: 700; color: var(--px-ink); }
.dash-chip { font-size: .68rem; font-weight: 600; padding: .18rem .5rem; border-radius: 999px; background: #f0eefb; color: var(--px-brand-700); }
.dash-chip.is-human { background: #e7f2fe; color: #1d63c9; }
.dash-empty { color: var(--px-faint); text-align: center; padding: 1.5rem 0; font-size: .88rem; }

/* Accordion "Agentes auxiliares" */
.px-accordion .card-header { cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; }
.px-accordion .card-header .chevron { transition: transform .2s ease; color: var(--px-muted); }
.px-accordion .card-header.collapsed .chevron { transform: rotate(-90deg); }

/* Grade de agentes */
.agent-card {
    border: 1px solid var(--px-line); border-radius: var(--px-radius); background: #fff;
    padding: 1rem; height: 100%; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.agent-card:hover { transform: translateY(-3px); box-shadow: var(--px-shadow); border-color: var(--px-brand-200); }
.agent-card .agent-foto { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; }

/* ------------------------------ Auth / paginas simples ------------------------------ */
.px-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(900px 500px at 15% 0%, rgba(140,82,255,.18), transparent 55%),
                radial-gradient(800px 500px at 100% 100%, rgba(140,82,255,.12), transparent 55%),
                #0f0d18; padding: 1.5rem; }
.px-auth-card { width: 100%; max-width: 420px; background: #fff; border-radius: 18px; padding: 2.1rem 2rem;
    box-shadow: 0 30px 70px -25px rgba(0,0,0,.6); }
.px-auth-card h1, .px-auth-card h2 { font-family: var(--px-display); font-weight: 500; }

/* ================================================================
   FIN-TABLE — tabela financeira premium (Contas a Pagar / Receber).
   Um unico vocabulario visual para as duas telas: numeros tabulares
   alinhados, celula principal com subtitulo, pills de status, linha
   expansivel de parcelas e acoes "ghost" que so ganham cor no hover.
   ================================================================ */
.fin-table { margin-bottom: 0; }
.fin-table > thead th {
    position: sticky; top: 0; z-index: 1;
}
.fin-table > thead th.fin-num, .fin-table > tbody td.fin-num { text-align: right; }
.fin-table > tbody > tr > td { vertical-align: middle; }

/* Celula principal: nome forte + linha de apoio discreta. */
.fin-primary { font-weight: 600; color: var(--px-ink); line-height: 1.2; }
.fin-sub { display: block; font-size: .76rem; color: var(--px-muted); margin-top: .1rem; }

/* Numeros monetarios: alinhados pela virgula, sem quebra. */
.fin-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; white-space: nowrap; }
.fin-total { font-weight: 700; color: var(--px-ink); }
.fin-num.is-muted { color: var(--px-faint); }

/* Pills de status — mesma familia das badges, um pouco mais suaves. */
.fin-pill { display: inline-flex; align-items: center; gap: .3em; font-size: .72rem; font-weight: 600;
    padding: .28em .6em; border-radius: 999px; line-height: 1; white-space: nowrap; }
.fin-pill::before { content: ""; width: .42em; height: .42em; border-radius: 50%; background: currentColor; opacity: .9; }
.fin-pill.is-ok { color: var(--px-ok); background: var(--px-ok-bg); }
.fin-pill.is-pend { color: var(--px-warn); background: var(--px-warn-bg); }
.fin-pill.is-late { color: var(--px-danger); background: var(--px-danger-bg); }
.fin-pill.is-info { color: var(--px-info); background: var(--px-info-bg); }
.fin-pill.is-off { color: var(--px-muted); background: #f0eff7; }

/* Chip de tipo/etiqueta (categoria, recorrencia, parcelas). */
.fin-chip { display: inline-flex; align-items: center; gap: .3em; font-size: .72rem; font-weight: 600;
    color: var(--px-muted); background: #f3f1fb; border: 1px solid var(--px-line-2);
    padding: .18em .5em; border-radius: 7px; white-space: nowrap; }
.fin-chip.is-brand { color: var(--px-brand-700); background: var(--px-brand-050); border-color: var(--px-brand-100); }

/* Acoes: icones ghost, cor so no hover. */
.fin-act { display: inline-flex; gap: .25rem; justify-content: flex-end; }
.fin-act .btn { --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; border-radius: 8px; }
.fin-act .btn.btn-icon { color: var(--px-muted); border: 1px solid transparent; background: transparent; }
.fin-act .btn.btn-icon:hover { color: var(--px-brand-700); background: var(--px-brand-050); }
.fin-act .btn.btn-icon.is-danger:hover { color: var(--px-danger); background: var(--px-danger-bg); }

/* Linha expansivel (parcelas de uma nota a pagar). */
.fin-exp { cursor: pointer; }
.fin-exp .fin-caret { transition: transform .18s ease; color: var(--px-faint); }
.fin-exp[aria-expanded="true"] .fin-caret { transform: rotate(90deg); color: var(--px-brand-700); }
.fin-exp[aria-expanded="true"] > td { background: var(--px-brand-050); }
.fin-detalhe > td { padding: 0 !important; border-top: 0; }
.fin-detalhe .fin-detalhe-inner { padding: .1rem 1rem .8rem 2.6rem; background: #faf9fe; }
.fin-detalhe .table { margin-bottom: 0; background: transparent; }
.fin-detalhe .table > thead th { background: transparent; }
.fin-row-off { opacity: .5; }

/* Estado vazio dentro da tabela. */
.fin-empty { text-align: center; color: var(--px-muted); padding: 2.4rem 1rem; }
.fin-empty .bi { font-size: 1.6rem; display: block; margin-bottom: .4rem; color: var(--px-faint); }

/* ------------------------------ util ------------------------------ */
.px-soft { background: var(--px-brand-050); }
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}