/*
 * Camada de refino visual — carregada por cima de styles.css / Tailwind.
 * Só adiciona/realça estilo (cores, sombras, tipografia, hover/foco);
 * não altera nenhuma estrutura, id ou comportamento existente.
 */

/* Tipografia: unifica tudo numa família só (sem a serifada Fraunces nos títulos) —
   o usuário achou a letra "feia"/deslocada em relação ao resto do sistema. */
.font-display {
    font-family: "IBM Plex Sans", "Inter", sans-serif !important;
}
.doc-wordmark, .doc-section h2 {
    font-family: "IBM Plex Sans", "Inter", sans-serif !important;
}

/* ---------- Select customizado (substitui a lista nativa do navegador) ---------- */
.csel { position: relative; }
.csel-block { display: block; width: 100%; }
.csel-inline { display: inline-flex; }

.csel-native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.csel-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font: inherit;
    color: #1e293b;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.csel-trigger:hover { border-color: #8aa3d1; }
.csel.is-open .csel-trigger,
.csel-trigger:focus-visible {
    outline: none;
    border-color: #1f3568;
    box-shadow: 0 0 0 3px rgba(28, 47, 94, .14);
}
.csel.is-disabled .csel-trigger { cursor: not-allowed; background: #f4f5f7; color: #9aa5b6; }
.csel-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel.is-empty .csel-value { color: #94a3b8; }
.csel-chevron { flex: 0 0 auto; font-size: 11px; color: #94a3b8; transition: transform .18s ease, color .18s ease; }
.csel.is-open .csel-chevron { transform: rotate(180deg); color: #1f3568; }

.csel-panel {
    position: absolute;
    z-index: 400;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    max-height: 264px;
    overflow-y: auto;
    padding: 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 20px 45px rgba(16, 28, 56, .16), 0 3px 10px rgba(16, 28, 56, .06);
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
}
.csel.is-open .csel-panel { opacity: 1; transform: none; pointer-events: auto; }
.csel-panel.csel-panel-up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom; }

.csel-option {
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.35;
    color: #334155;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.csel-option + .csel-option { margin-top: 1px; }
.csel-option:hover, .csel-option.is-active { background: #eef2f9; color: #16264a; }
.csel-option.is-selected { background: #16264a; color: #fff; font-weight: 600; }
.csel-option.is-selected:hover, .csel-option.is-selected.is-active { background: #101c38; }
.csel-option.is-disabled { color: #cbd5e1; cursor: not-allowed; }
.csel-empty { padding: 16px 10px; text-align: center; color: #94a3b8; font-size: 12.5px; }

html[data-theme="dark"] .csel-trigger { background: #101a29; border-color: #2c3a4e; color: #dbe2eb; }
html[data-theme="dark"] .csel-trigger:hover { border-color: #3a4c66; }
html[data-theme="dark"] .csel.is-open .csel-trigger,
html[data-theme="dark"] .csel-trigger:focus-visible { border-color: #e6a63c; box-shadow: 0 0 0 3px rgba(230, 166, 60, .16); }
html[data-theme="dark"] .csel.is-disabled .csel-trigger { background: #0c1420; color: #5b6a80; }
html[data-theme="dark"] .csel.is-empty .csel-value { color: #5b6a80; }
html[data-theme="dark"] .csel-chevron { color: #5b6a80; }
html[data-theme="dark"] .csel.is-open .csel-chevron { color: #e6a63c; }
html[data-theme="dark"] .csel-panel { background: #17212f; border-color: #2c3a4e; box-shadow: 0 20px 45px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .csel-option { color: #c2ccd9; }
html[data-theme="dark"] .csel-option:hover, html[data-theme="dark"] .csel-option.is-active { background: #1f2c3d; color: #f1f5f9; }
html[data-theme="dark"] .csel-option.is-selected { background: #e6a63c; color: #16264a; }
html[data-theme="dark"] .csel-option.is-selected:hover, html[data-theme="dark"] .csel-option.is-selected.is-active { background: #f2c265; }
html[data-theme="dark"] .csel-option.is-disabled { color: #3a4a63; }
html[data-theme="dark"] .csel-empty { color: #5b6a80; }

/* ---------- Refino geral: cartões, botões, listas, navegação ---------- */

/* Cartões padrão do sistema (dashboard, clientes, modais) ganham mais profundidade */
.bg-white.rounded-xl.shadow-sm.border.border-slate-200,
.kpi-card.bg-white.rounded-xl.shadow-sm.border.border-slate-200 {
    border-color: #e6eaf1 !important;
    box-shadow: 0 1px 2px rgba(16, 28, 56, .04), 0 8px 24px -14px rgba(16, 28, 56, .18) !important;
}
.kpi-card:hover { box-shadow: 0 10px 28px -12px rgba(22, 38, 74, .28) !important; }

/* Botões primários com leve profundidade e resposta ao toque */
.bg-brand-700.text-white.rounded-lg,
button.bg-brand-700 {
    background-image: linear-gradient(135deg, #1f3568, #28437f) !important;
    box-shadow: 0 6px 16px -6px rgba(23, 51, 102, .55) !important;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}
.bg-brand-700.text-white.rounded-lg:hover,
button.bg-brand-700:hover {
    background-image: linear-gradient(135deg, #1c2f5e, #1f3568) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgba(23, 51, 102, .6) !important;
}

/* Linhas de listagem (acesso rápido, itens de opção, cartões de item) ganham fundo levemente destacado no hover */
.flex.items-center.gap-3.p-3.border.border-slate-200.rounded-lg.hover\:border-brand-300.hover\:bg-brand-50\/40 {
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.flex.items-center.gap-3.p-3.border.border-slate-200.rounded-lg.hover\:border-brand-300.hover\:bg-brand-50\/40:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -12px rgba(22, 38, 74, .3);
}

/* Cabeçalho de tabela: mais contraste e identidade de marca, sem alterar o layout */
.bg-slate-100.text-slate-500.text-\[10px\].font-bold.uppercase {
    background: #eef2f9 !important;
    color: #4d6cab !important;
    letter-spacing: .06em;
}

/* Navegação lateral: item ativo — tom suave, mais próximo do original (o usuário achou
   o azul forte demais quando testado). Exclui .snx-sidebar-entry: o item "Simples Nacional"
   usa fundo claro + texto escuro (definido em simples-nacional.css). */
.nav-btn.active-nav:not(.snx-sidebar-entry) {
    background: #1f3568 !important;
}

/* Modais: cabeçalho com leve textura para reforçar identidade da marca */
.bg-brand-800.p-4.px-6.flex.justify-between.items-center.text-white {
    background-image:
        radial-gradient(circle at 90% -20%, rgba(230, 166, 60, .16), transparent 55%),
        linear-gradient(135deg, #101c38, #16264a) !important;
}

/* Inputs e áreas de texto: foco com anel consistente com o restante do sistema */
input:not([type="checkbox"]):not([type="radio"]):not(.csel-native), textarea, .auth-input {
    transition: border-color .15s ease, box-shadow .15s ease;
}
input:not([type="checkbox"]):not([type="radio"]):not(.csel-native):focus, textarea:focus {
    outline: none;
    border-color: #1f3568 !important;
    box-shadow: 0 0 0 3px rgba(28, 47, 94, .12);
}
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not(.csel-native):focus,
html[data-theme="dark"] textarea:focus {
    border-color: #e6a63c !important;
    box-shadow: 0 0 0 3px rgba(230, 166, 60, .16);
}

/* ---------- Notificações: cada item com ícone em chip colorido + tipografia hierarquizada ---------- */
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color .15s ease;
}
.notif-item:hover { background: #f8fafc; }
.notif-item + .notif-item { border-top: 1px solid #f1f5f9; }
.notif-item-icon {
    display: grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: #eef2f9;
    font-size: 13px;
}
.notif-item-icon:has(.text-red-500) { background: #fef2f2; }
.notif-item-icon:has(.text-amber-500) { background: #fffbeb; }
.notif-item-icon:has(.text-blue-500) { background: #eff6ff; }
.notif-item-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: #55637a;
}
.notif-item-text b { color: #1e293b; font-weight: 700; }
.notif-item-lida { background: #fbfcfe; }
.notif-item-lida .notif-item-text { color: #94a3b8; }
.notif-item-lida .notif-item-text b { color: #64748b; }
.notif-item-lida .notif-item-icon { opacity: .55; }
.notif-item-del {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin: -2px -4px 0 0;
    border-radius: 6px;
    color: #b7c0cf;
    font-size: 11px;
    opacity: 0;
    transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}
.notif-item:hover .notif-item-del { opacity: 1; }
.notif-item-del:hover { background: #fee2e2; color: #dc2626; }
.notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 34px 16px;
    color: #94a3b8;
    font-size: 12px;
    text-align: center;
}
.notif-empty i { font-size: 26px; color: #6ee7b7; }

html[data-theme="dark"] .notif-item:hover { background: #101a29; }
html[data-theme="dark"] .notif-item + .notif-item { border-top-color: #1c2736; }
html[data-theme="dark"] .notif-item-icon { background: #1f2c3d; }
html[data-theme="dark"] .notif-item-icon:has(.text-red-500) { background: rgba(239, 68, 68, .16); }
html[data-theme="dark"] .notif-item-icon:has(.text-amber-500) { background: rgba(245, 158, 11, .16); }
html[data-theme="dark"] .notif-item-icon:has(.text-blue-500) { background: rgba(59, 130, 246, .16); }
html[data-theme="dark"] .notif-item-text { color: #96a3b6; }
html[data-theme="dark"] .notif-item-text b { color: #e5eaf1; }
html[data-theme="dark"] .notif-item-lida { background: #0d1520; }
html[data-theme="dark"] .notif-item-lida .notif-item-text { color: #5b6b82; }
html[data-theme="dark"] .notif-item-lida .notif-item-text b { color: #7c8ba1; }
html[data-theme="dark"] .notif-item-del { color: #4a5872; }
html[data-theme="dark"] .notif-item-del:hover { background: rgba(239, 68, 68, .18); color: #f87171; }

/* ---------- Busca global de clientes: avatar com inicial + hierarquia de texto ---------- */
.search-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color .15s ease;
}
.search-item:last-child { border-bottom: 0; }
.search-item:hover { background: #f8fafc; }
.search-item-avatar {
    display: grid;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 9px;
    background: linear-gradient(135deg, #1f3568, #28437f);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}
.search-item-body { min-width: 0; }
.search-item-name { overflow: hidden; color: #334155; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.search-item-doc { margin-top: 1px; color: #94a3b8; font-size: 10.5px; font-family: ui-monospace, monospace; }
.search-empty { padding: 14px; color: #94a3b8; font-size: 12px; }

html[data-theme="dark"] .search-item { border-bottom-color: #1c2736; }
html[data-theme="dark"] .search-item:hover { background: #101a29; }
html[data-theme="dark"] .search-item-name { color: #dbe2eb; }
html[data-theme="dark"] .search-item-doc { color: #74839a; }

/* ---------- Kanban: colunas com mais identidade, cards com profundidade e sinalização de urgência ---------- */
.kanban-col {
    background: linear-gradient(180deg, #f8fafc, #f1f5f9) !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 2px rgba(16, 28, 56, .03);
}
.kanban-col > div:first-child {
    background: linear-gradient(180deg, #fcfdfe, #f8fafc) !important;
    border-bottom-color: #e2e8f0 !important;
}
.drag-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(16, 28, 56, .04), 0 6px 16px -12px rgba(16, 28, 56, .18) !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
}
.drag-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #cbd5e1;
}
.drag-card.border-red-200::before { background: #ef4444; }
.drag-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 28, 56, .07), 0 16px 30px -14px rgba(16, 28, 56, .24) !important;
}
.drag-card.dragging { opacity: .5; transform: scale(.98); }

html[data-theme="dark"] .kanban-col { background: linear-gradient(180deg, #101a29, #0c1420) !important; border-color: #1c2736 !important; }
html[data-theme="dark"] .kanban-col > div:first-child { background: linear-gradient(180deg, #131f30, #101a29) !important; border-bottom-color: #1c2736 !important; }
html[data-theme="dark"] .drag-card::before { background: #37495f; }

/* ---------- Calendário: cabeçalho com identidade de marca, células maiores e mais interativas ---------- */
#pipeline-calendario .grid.grid-cols-7.gap-px.bg-slate-200.rounded-t-lg {
    background: #16264a;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}
#pipeline-calendario .grid.grid-cols-7.gap-px.bg-slate-200.rounded-t-lg > div {
    background: linear-gradient(180deg, #1c2f5e, #16264a) !important;
    color: #cbd8ee !important;
    padding: 10px 0;
    font-size: 10px;
    letter-spacing: .08em;
}
#pipeline-calendario .grid.grid-cols-7.gap-px.bg-slate-200.rounded-t-lg > div:first-child,
#pipeline-calendario .grid.grid-cols-7.gap-px.bg-slate-200.rounded-t-lg > div:last-child {
    color: #e6a63c !important;
}

#calendario-grid {
    background: #dfe5ee;
    border-radius: 0 0 12px 12px !important;
}
.calendario-dia {
    min-height: 108px !important;
    padding: 8px !important;
    transition: background-color .15s ease, box-shadow .15s ease;
}
.calendario-dia:nth-child(7n+1), .calendario-dia:nth-child(7n) { background: #fbfcfe !important; }
.calendario-dia.cursor-pointer:hover {
    background: #f3f7fd !important;
    box-shadow: inset 0 0 0 1.5px #8aa3d1;
    z-index: 1;
}
.calendario-dia.ring-2 {
    background: linear-gradient(180deg, #eef2f9, #fff) !important;
    box-shadow: inset 0 0 0 2px #1f3568 !important;
}
.calendario-dia span.bg-brand-800 {
    box-shadow: 0 3px 8px rgba(22, 38, 74, .35);
}
.calendario-dia button {
    transition: transform .12s ease, box-shadow .12s ease;
}
.calendario-dia button:hover {
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(16, 28, 56, .12);
    transform: translateX(1px);
}
.calendario-dia button span.rounded-full {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}

html[data-theme="dark"] #calendario-grid { background: #1c2736; }
html[data-theme="dark"] .calendario-dia { background: #101a29 !important; }
html[data-theme="dark"] .calendario-dia:nth-child(7n+1), html[data-theme="dark"] .calendario-dia:nth-child(7n) { background: #0c1420 !important; }
html[data-theme="dark"] .calendario-dia.cursor-pointer:hover { background: #131f30 !important; box-shadow: inset 0 0 0 1.5px #37495f; }
html[data-theme="dark"] .calendario-dia.ring-2 { background: linear-gradient(180deg, #16223a, #101a29) !important; box-shadow: inset 0 0 0 2px #e6a63c !important; }
html[data-theme="dark"] .calendario-dia button:hover { background: #17212f !important; }