/* Fonte raiz reduzida (16px * 0.9 = 14.4px) — simula zoom 90% em 100% */
html { font-size: 14.4px; }

:root { --arkon-navy: #06182d; --arkon-teal: #05b89d; --arkon-teal-dark: #008f82; --bs-primary: var(--arkon-teal-dark); --bs-primary-rgb: 0,143,130; }
[data-bs-theme="dark"] { --bs-body-bg: #06182d; --bs-body-color: #edf5fa; --bs-tertiary-bg: #0d2946; --bs-border-color: #25435f; --bs-primary: #16c7ad; --bs-primary-rgb: 22,199,173; }
body { min-height: 100vh; background: var(--bs-body-bg); }
.brand-mark { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .65rem; color: white; background: linear-gradient(135deg, #08c6a5, #007d79); }
.brand-subtitle { letter-spacing: .32em; font-size: .4rem; color: var(--arkon-teal); margin-top: -.2rem; }
.hero { background: radial-gradient(circle at 80% 10%, rgba(5,184,157,.24), transparent 38%), linear-gradient(135deg, #06182d 0%, #0b3150 100%); color: white; }
.service-card { height: 100%; border: 1px solid var(--bs-border-color); transition: transform .2s ease, box-shadow .2s ease; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(0,0,0,.12); }
.avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-grid; place-items: center; background: var(--arkon-teal); color: white; font-weight: 700; overflow: hidden; padding: 0; line-height: 1; flex: 0 0 auto; }
.avatar.avatar-sm { width: 2.25rem; height: 2.25rem; font-size: .8rem; }
.avatar.avatar-lg { width: 3.5rem; height: 3.5rem; font-size: 1.25rem; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
button.avatar { cursor: pointer; }
pre { white-space: pre-wrap; font-size: .8rem; }
:root { --arkon-primary: #4763e6; --arkon-sidebar: #17213b; --arkon-muted: #718096; --arkon-bg: #f5f7fb; --arkon-text: #1d2939; --arkon-panel: #ffffff; --arkon-border: #e6eaf2; }
body { background: var(--arkon-bg); color: var(--arkon-text); }
.brand-mark { padding: 0; overflow: hidden; }
.brand-mark img { width: 100%; height: 100%; display: block; }
.arkon-shell::before { content: ""; position: fixed; z-index: -1; right: 2.5vw; bottom: 4vh; width: min(25vw, 320px); height: min(25vw, 320px); pointer-events: none; background: url('/images/arkon-symbol.png') center / contain no-repeat; opacity: .035; }
[data-bs-theme="dark"] { --arkon-bg: #0b1224; --arkon-text: #e8eefc; --arkon-panel: #131e35; --arkon-border: #293957; --arkon-muted: #aab8d4; color-scheme: dark; }
[data-bs-theme="dark"] body { background: var(--arkon-bg); color: var(--arkon-text); }
[data-bs-theme="dark"] .app-header, [data-bs-theme="dark"] .navbar { background: #101a30 !important; border-color: var(--arkon-border) !important; }
[data-bs-theme="dark"] .metric-card, [data-bs-theme="dark"] .panel-card, [data-bs-theme="dark"] .table-panel { background: rgba(19,30,53,.82); border-color: var(--arkon-border); color: var(--arkon-text); }
[data-bs-theme="dark"] .text-body-secondary { color: #aab8d4 !important; }
[data-bs-theme="dark"] .data-table { --bs-table-bg: transparent; --bs-table-color: var(--arkon-text); --bs-table-border-color: var(--arkon-border); --bs-table-hover-color: #fff; --bs-table-hover-bg: #1b2b4b; }
[data-bs-theme="dark"] .data-table thead th { background: #1b2b4b; color: #d7e2fb; border-color: var(--arkon-border); position: sticky; top: 0; z-index: 3; }
[data-bs-theme="dark"] .table-toolbar, [data-bs-theme="dark"] .table-toolbar { background: #17243e; border-color: var(--arkon-border); }
[data-bs-theme="dark"] .table-search, [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { color: #edf3ff; background: #0d172b; border-color: #3b4d70; }
[data-bs-theme="dark"] .table-search::placeholder, [data-bs-theme="dark"] .form-control::placeholder { color: #91a1c1; }
[data-bs-theme="dark"] .form-label, [data-bs-theme="dark"] .form-check-label { color: #dce6fb; }
[data-bs-theme="dark"] .funnel-stage { background: #111d34; border-color: var(--arkon-border); }
[data-bs-theme="dark"] .funnel-header { color: #e4ecff; border-color: var(--arkon-border); }
[data-bs-theme="dark"] .funnel-card { background: rgba(23,36,62,.82); border-color: #34486c; color: #edf3ff; }
[data-bs-theme="dark"] .funnel-card small { color: #aab8d4; }
.app-layout { height: 100vh; height: 100dvh; display: flex; overflow: hidden; }
.app-sidebar { width: 248px; flex: 0 0 248px; background: var(--arkon-sidebar); color: #dbe3fb; display: flex; flex-direction: column; transition: width .38s cubic-bezier(.4,0,.2,1), flex-basis .38s cubic-bezier(.4,0,.2,1); overflow: hidden; overflow-y: auto; position: sticky; top: 0; height: 100vh; height: 100dvh; }
.app-sidebar::-webkit-scrollbar { width: 6px; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.app-sidebar.is-collapsed { width: 76px; flex-basis: 76px; }
.sidebar-brand { height: 76px; display: flex; align-items: center; gap: .7rem; padding: 0 1.35rem; color: white; text-decoration: none; font-weight: 700; letter-spacing: .04em; white-space: nowrap; transition: padding .38s cubic-bezier(.4,0,.2,1), gap .38s cubic-bezier(.4,0,.2,1); }
.sidebar-brand small { display: block; font-size: .55rem; letter-spacing: .2em; color: #8fa1ce; }
.sidebar-nav { padding: 1rem .75rem; }
.sidebar-section { margin: 1.35rem .75rem .45rem; color: #7182aa; text-transform: uppercase; font-size: .65rem; letter-spacing: .12em; }
.sidebar-link { display: flex; align-items: center; gap: .8rem; min-height: 43px; padding: .65rem .75rem; border-radius: 9px; color: #bdc9e6; text-decoration: none; font-size: .9rem; white-space: nowrap; transition: color .2s ease, background .2s ease, transform .2s ease, padding .38s cubic-bezier(.4,0,.2,1), gap .38s cubic-bezier(.4,0,.2,1); }
.sidebar-link { position: relative; transition: color .2s ease, background .2s ease, transform .2s ease; }
.sidebar-link:hover, .sidebar-link:focus { color: white; background: linear-gradient(90deg, rgba(71,99,230,.35), rgba(71,99,230,.08)); transform: translateX(3px); }
.sidebar-link.is-active { color: white; background: linear-gradient(90deg, var(--arkon-primary), #3149ad); box-shadow: 0 8px 20px rgba(71,99,230,.25); }
.sidebar-link.is-active::before { content: ""; position: absolute; left: 0; width: 3px; height: 24px; border-radius: 0 5px 5px 0; background: #68e0c5; }
.sidebar-icon { width: 24px; min-width: 24px; flex: 0 0 24px; height: 24px; display: grid; place-items: center; text-align: center; font-size: 1.05rem; color: #9eafe5; transition: transform .2s ease, color .2s ease; }
.sidebar-link:hover .sidebar-icon, .sidebar-link.is-active .sidebar-icon { color: #fff; transform: scale(1.12); }
.sidebar-footer { margin-top: auto; padding: .75rem; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-label { opacity: 1; transform: translateX(0); transition: opacity .2s ease .12s, transform .38s cubic-bezier(.4,0,.2,1); }
.sidebar-brand .brand-mark { flex: 0 0 34px; }
.is-collapsed .sidebar-label { width: 0; margin: 0; overflow: hidden; opacity: 0; transform: translateX(-8px); pointer-events: none; transition: width .38s cubic-bezier(.4,0,.2,1), opacity .2s ease, transform .38s cubic-bezier(.4,0,.2,1); transition-delay: 0s; }
.is-collapsed .sidebar-brand, .is-collapsed .sidebar-link { justify-content: center; padding-left: .5rem; padding-right: .5rem; }
.app-main { min-width: 0; flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.app-header { height: 76px; padding: 0 2rem; display: flex; align-items: center; border-bottom: 1px solid #e5e9f2; background: var(--bs-body-bg); flex-shrink: 0; position: sticky; top: 0; z-index: 1020; }
.sidebar-toggle { border: 0; background: transparent; color: var(--arkon-muted); font-size: 1.25rem; }
.page-content, .dashboard { max-width: 1440px; }
@media (min-width: 1400px) { .page-content, .dashboard { max-width: 1728px; } }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.breadcrumb-nav { font-size: .8rem; }
.breadcrumb-nav .breadcrumb-item a { color: var(--arkon-primary); text-decoration: none; }
.breadcrumb-nav .breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-nav .breadcrumb-item.active { color: var(--arkon-muted); }
[data-bs-theme="dark"] .breadcrumb-nav .breadcrumb-item.active { color: #aab8d4; }
.eyebrow { color: var(--arkon-primary); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.metric-card, .panel-card { background: rgba(255,255,255,.78); border: 1px solid #e6eaf2; border-radius: 14px; box-shadow: 0 5px 18px rgba(27, 42, 75, .04); }
.metric-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; }
.metric-card strong { display: block; font-size: 1.7rem; margin-top: .2rem; }
.metric-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #eef1ff; font-size: 1.35rem; }
.panel-heading { display: flex; justify-content: space-between; padding: 1.25rem 1.25rem 0; }
.chart-wrap { height: 290px; padding: 1rem 1.25rem 1.25rem; }
.form-panel { padding: 1.5rem; }
.form-panel-narrow { max-width: 680px; }
.form-actions { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #e6eaf2; }
.form-section { margin-bottom: 1.5rem; padding: 1.25rem; border: 1px solid #e2e7f0; border-radius: 16px; background: linear-gradient(180deg, rgba(247,249,255,.92), rgba(255,255,255,.72)); }
.form-section:last-of-type { margin-bottom: 0; }
.form-section-title { display: flex; align-items: center; margin: -1.25rem -1.25rem 1.25rem; padding: .8rem 1.1rem; border-bottom: 1px solid #dce4f5; border-radius: 15px 15px 0 0; color: #344bbd; background: linear-gradient(135deg, #eef1ff, #f7f9ff); font-size: .86rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
 .source-search-field select { max-height: 12rem; }
 .source-search-field { width: 100%; }
 .source-dropdown { position: relative; }
 .source-dropdown .dropdown-menu { max-height: 18rem; overflow-y: auto; width: 100% !important; }
 .source-dropdown [data-source-toggle] { width: 100% !important; }
.source-dropdown .dropdown-item { font-size: .9rem; }
/* ===== Tabela de atividades do checklist (modelo de atividades) =====
   `min-height` não se aplica a células de table layout. O `height` na linha
   funciona como altura mínima: a linha fica com 92px mas cresce se algum
   campo estourar esse valor. O `vertical-align: top` faz todos os inputs
   começarem na mesma linha de base, independentemente do conteúdo abaixo
   (dica "dias antes do prazo", checkbox de follow-up, etc.). */
.activity-steps-table tr[data-step-row] { height: 92px; }
.activity-steps-table tr[data-step-row] > td { vertical-align: top; }
/* Campo "Instruções" da atividade: altura mínima de 76px (aqui min-height
   funciona de fato, pois <textarea> não é uma célula de tabela). */
.activity-steps-table textarea[name$="[description]"] { min-height: 76px; }
/* Legenda auxiliar abaixo dos inputs ("dias antes do prazo", "Só se não
   respondeu"): tamanho de nota de rodapé, para não competir com o campo. */
.activity-steps-table .field-hint { margin-top: .2rem; font-size: .72rem; line-height: 1.25; color: var(--arkon-muted); }
[data-bs-theme="dark"] .activity-steps-table .field-hint { color: #91a1c1; }
/* ===== Coluna "E-mail do follow-up": select + CRUD inline ===== */
.email-template-manager { display: flex; align-items: center; gap: .4rem; }
.email-template-manager-actions { display: inline-flex; gap: .25rem; flex: 0 0 auto; }
.email-picker { position: relative; flex: 1; min-width: 0; }
.email-picker [data-email-picker-toggle] { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-picker-menu { position: absolute; top: calc(100% + .25rem); left: 0; z-index: 20; width: 100%; min-width: 16rem; max-height: 18rem; overflow-y: auto; padding: .5rem; border: 1px solid var(--arkon-border, #e2e7f0); border-radius: 10px; background: #fff; box-shadow: 0 12px 30px rgba(12, 22, 45, .18); }
.email-picker-menu[hidden] { display: none; }
.email-picker-menu .dropdown-item { font-size: .85rem; cursor: pointer; }
.email-picker-menu .dropdown-item.active { background: var(--arkon-primary); color: #fff; }
[data-bs-theme="dark"] .email-picker-menu { background: #131e35; border-color: var(--arkon-border); }
[data-bs-theme="dark"] .email-picker-menu .dropdown-item:hover { background: #1b2b4b; }
[data-bs-theme="dark"] .email-picker-menu .dropdown-item.active,
[data-bs-theme="dark"] .email-picker-menu .dropdown-item.active:hover { background: var(--arkon-primary); color: #fff; }
/* ===== Modal do CRUD inline de templates de e-mail ===== */
.email-template-modal { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: flex-start; justify-content: center; padding: 1.5rem 1rem; overflow-y: auto; background: rgba(12, 22, 45, .58); backdrop-filter: blur(4px); }
.email-template-modal[hidden] { display: none; }
.email-template-modal-dialog { width: min(100%, 720px); border-radius: 16px; background: var(--arkon-panel, #fff); box-shadow: 0 25px 70px rgba(12, 22, 45, .3); }
.email-template-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid #e2e7f0; }
.email-template-modal-body { padding: 1.25rem; }
.email-template-modal-footer { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1rem 1.25rem; border-top: 1px solid #e2e7f0; }
[data-bs-theme="dark"] .email-template-modal-header,
[data-bs-theme="dark"] .email-template-modal-footer { border-color: var(--arkon-border); }
[data-bs-theme="dark"] .email-template-modal-dialog { background: #131e35; }
[data-bs-theme="dark"] .form-section { border-color: #34486c; background: rgba(15,28,52,.7); }
[data-bs-theme="dark"] .form-section-title { border-color: #34486c; color: #b9c7ff; background: linear-gradient(135deg, #172a50, #1d3158); }
.auth-page { min-height: calc(100vh - 76px); display: grid; place-items: center; padding: 2rem 1rem; }
.auth-card { width: min(100%, 430px); padding: 2rem; }
/* Asterisco de campos obrigatorios — pinta APENAS o asterisco de vermelho */
/* O Bootstrap coloca o * dentro de <span class="required">*</span> ou como texto no label */
label .required, .form-label .required, .form-check-label .required { color: #dc3545 !important; font-weight: 700; }
label.required::after, .form-label.required::after { color: #dc3545 !important; content: " *"; }
.btn { border-radius: 10px; font-weight: 600; letter-spacing: .01em; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { border: 0; background: linear-gradient(135deg, #536ff0, #3d55ca); box-shadow: 0 7px 16px rgba(71,99,230,.22); }
.btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, #607aff, #344bbd); box-shadow: 0 10px 22px rgba(71,99,230,.3); }
.btn-outline-primary { color: #4763e6; border-color: #b9c4f4; }
.btn-outline-primary:hover { color: #fff; border-color: #4763e6; background: #4763e6; }
.table-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: .4rem; }
.action-icon { width: 2.15rem; height: 2.15rem; display: inline-grid; place-items: center; padding: 0; border-radius: 8px; }
.action-icon i { font-size: .9rem; line-height: 1; }
.action-icon.btn-outline-primary { color: #4763e6; border-color: #b9c4f4; }
.action-icon.btn-outline-danger { color: #dc3545; border-color: #f0a8b0; }
.action-icon.btn-outline-primary:hover, .action-icon.btn-outline-primary:focus-visible { color: #fff; background: #4763e6; border-color: #4763e6; }
.action-icon.btn-outline-danger:hover, .action-icon.btn-outline-danger:focus-visible { color: #fff; background: #dc3545; border-color: #dc3545; }
[data-bs-theme="dark"] .action-icon.btn-outline-primary { color: #9eafff; border-color: #6075d8; }
[data-bs-theme="dark"] .action-icon.btn-outline-danger { color: #ff8d99; border-color: #c75b68; }
.audit-module { color: #344054; font-weight: 600; }
.audit-operation { display: inline-flex; align-items: center; padding: .35rem .65rem; border-radius: 999px; color: #4763e6; background: #eef1ff; font-size: .78rem; font-weight: 700; }
.audit-summary { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; padding: 1.25rem; }
.audit-summary small, .audit-summary strong { display: block; }
.audit-summary small { color: #8995a8; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.audit-summary strong { margin-top: .3rem; color: #344054; }
.record-id { display: inline-flex; align-items: center; padding: .18rem .45rem; border-radius: 6px; color: #53627a; background: #eef1f7; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.record-id-reference { color: #344bbd; background: #eef1ff; }
.funnel-card::after { content: attr(data-card); display: block; margin-top: .25rem; color: #8995a8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; }
.audit-table-title { padding: 1.25rem; border-bottom: 1px solid #edf0f5; }
.audit-page { position: relative; min-height: calc(100vh - 76px); }
.audit-page::before, .audit-page::after { display: none; }
.audit-page > * { position: relative; z-index: 1; }
.audit-page .table-panel, .audit-page .audit-summary { background: rgba(255,255,255,.78); border-color: var(--arkon-border); }
@media (max-width: 767.98px) { .audit-summary { grid-template-columns: repeat(2, 1fr); } }
.table-panel { background: rgba(255,255,255,.78); border: 1px solid #e6eaf2; border-radius: 16px; box-shadow: 0 8px 25px rgba(27,42,75,.05); overflow: visible; }
/* Garante que o overflow vertical do wrapper de tabela nao crie um scroll
 * container que desative o position:sticky do thead (que precisa rolar junto
 * com .app-content). Mantemos o overflow horizontal para tabelas largas. */
.table-responsive { overflow-x: auto; overflow-y: visible; }
.table-toolbar { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid #edf0f5; background: linear-gradient(180deg, #fff, #fbfcff); }
.search-box { position: relative; flex: 1; max-width: 390px; }
.search-box i { position: absolute; top: 50%; left: .9rem; transform: translateY(-50%); color: #8b98ad; }
.table-search { width: 100%; border: 1px solid #dfe5ef; border-radius: 9px; padding: .62rem 3.2rem .62rem 2.35rem; color: #28344a; background: #fff; outline: 0; transition: border-color .2s ease, box-shadow .2s ease; }
.search-box > button { position: absolute; top: .2rem; right: .2rem; bottom: .2rem; width: 2.5rem; padding: 0; border-radius: 7px; }
.table-search:focus { border-color: var(--arkon-primary); box-shadow: 0 0 0 3px rgba(71,99,230,.12); }
.records-control { display: flex; align-items: center; gap: .35rem; margin-left: auto; color: #718096; font-size: .82rem; white-space: nowrap; }
.records-control a { min-width: 31px; height: 29px; display: grid; place-items: center; border-radius: 7px; color: #718096; text-decoration: none; font-weight: 600; }
.records-control a:hover, .records-control a.is-selected { color: #fff; background: var(--arkon-primary); box-shadow: 0 4px 10px rgba(71,99,230,.22); }
.data-table { margin-bottom: 0; }
.data-table { border-collapse: separate; }

/* Cabeçalho de tabela fixo no scroll (desktop): o .table-responsive passa a
 * ser o container de scroll com altura limitada, e o thead gruda no topo. */
@media (min-width: 768.98px) {
    .table-responsive:has(> .data-table),
    .table-responsive:has(> .perm-matrix) {
        max-height: calc(100vh - 76px - 310px) !important;
        overflow-y: auto !important;
    }
    .data-table thead th,
    .perm-matrix thead th {
        position: sticky !important;
        top: 0 !important;
        z-index: 4 !important;
        background: #f4f6fb;
        box-shadow: inset 0 1px 0 #e2e7f0;
    }
    [data-bs-theme="dark"] .data-table thead th,
    [data-bs-theme="dark"] .perm-matrix thead th {
        background: #1b2b4b;
        box-shadow: inset 0 1px 0 var(--arkon-border);
    }
}
.data-table { --bs-table-bg: transparent; }
.data-table tbody tr { background: transparent; }
.data-table thead th { padding: .7rem 1.25rem; color: #53627a; background: #f4f6fb; border-bottom: 1px solid #e2e7f0; font-size: .72rem; text-align: center; text-transform: uppercase; letter-spacing: .08em; position: sticky; top: 0; z-index: 3; }
.data-table tbody td { padding: .65rem 1.25rem; border-color: #e2e7f0; }
.data-table tbody tr { transition: background .15s ease, transform .15s ease; }
.data-table tbody tr:hover { --bs-table-hover-bg: #f1f4ff; }
[data-bs-theme="dark"] .data-table tbody tr:hover,
[data-bs-theme="dark"] .data-table.table-hover > tbody > tr:hover > * { color: #f4f7ff !important; background-color: #132747 !important; background-image: none !important; box-shadow: inset 0 0 0 9999px #132747 !important; }
[data-bs-theme="dark"] .data-table .audit-module { color: #dce7ff !important; }
[data-bs-theme="dark"] .data-table tbody tr { background: #111d34; }
[data-bs-theme="dark"] .data-table tbody td { border-color: #293957; }
.funnel-create { padding: 1.25rem; }

/* Durante o drag de cards no funil, desativar TODAS as transicoes e hovers
 * para evitar reflow. A classe is-funnel-dragging e adicionada ao body
 * no dragstart e removida no dragend. */
body.is-funnel-dragging .funnel-card,
body.is-funnel-dragging .funnel-stage,
body.is-funnel-dragging .funnel-column { transition: none !important; box-shadow: none !important; }
body.is-funnel-dragging .funnel-card:hover { box-shadow: none !important; transform: none !important; }
body.is-funnel-dragging .funnel-card:active { opacity: .65 !important; transform: none !important; }
body.is-funnel-dragging * { cursor: grabbing !important; }

.funnel-stage { min-height: 320px; max-height: calc(100vh - 400px); border: 1px solid #e4e8f2; border-radius: 14px; background: #f8f9fc; overflow-y: auto; overflow-x: hidden; }
/* is-over removido - causava reflow durante drag */
.funnel-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid #e4e8f2; color: #394761; font-weight: 700; position: sticky; top: 0; z-index: 4; background: var(--arkon-panel); box-shadow: 0 1px 3px rgba(27,42,75,.08); }
.funnel-header .badge { color: var(--arkon-primary); background: #e5eaff; }
.cards { min-height: 260px; padding: .85rem; }
.cards.vstack.gap-2 { background: rgba(255,255,255,.16); border-radius: 0 0 13px 13px; }
.funnel-card { cursor: grab; padding: .55rem; border: 1px solid #e2e7f0; border-radius: 11px; background: rgba(255,255,255,.78); box-shadow: 0 4px 10px rgba(27,42,75,.05); transition: box-shadow .2s ease; }
.funnel-card:hover { box-shadow: 0 8px 16px rgba(27,42,75,.1); }
.funnel-card:active, .funnel-card.is-dragging { cursor: grabbing; opacity: .65; }
.funnel-card strong, .funnel-card small { display: block; }
.funnel-card-project { display: block; margin-top: .35rem; color: var(--arkon-primary); font-size: .82rem; font-weight: 700; }
.funnel-card-value { display: inline-flex; align-items: center; gap: .2rem; margin-top: .3rem; color: #1f7a55; background: rgba(50, 168, 121, .12); padding: .15rem .5rem; border-radius: 6px; font-size: .78rem; font-weight: 700; }
[data-bs-theme="dark"] .funnel-card-value { color: #4ade80; background: rgba(74, 222, 128, .14); }
.card-project-editor { padding-bottom: 1rem; border-bottom: 1px solid #e6eaf2; }
.funnel-card small { margin-top: .3rem; color: #7a879b; font-size: .76rem; }
/* ===== Coluna de acoes do card (canto direito, vertical, sempre visivel) =====
   edit -> delete -> projeto -> checklist -> cartinha de e-mail (de cima para baixo).
   Sem hover: todos ficam permanentes para nao exigir mira do mouse. */
.funnel-card { position: relative; padding-right: 3.1rem; padding-left: .65rem; }
.funnel-card-edit,
.funnel-card-delete,
.funnel-card-restore,
.funnel-card-restore-lost,
.funnel-card-project-action,
.funnel-card-activities,
.funnel-card-email-badge { position: absolute; right: .55rem; width: 1.6rem; height: 1.6rem; display: inline-grid; place-items: center; border: 0; background: transparent; padding: 0; line-height: 1; opacity: 1; cursor: pointer; }
.funnel-card-edit { top: .5rem; color: var(--arkon-primary); }
.funnel-card-delete { top: 2.05rem; color: #dc3545; }
.funnel-card-restore { top: 2.05rem; color: #198754; }
.funnel-card-restore-lost { top: 2.05rem; color: #b02a37; }
.funnel-card-project-action { top: 3.6rem; color: #198754; text-decoration: none; }
.funnel-card-activities { top: 5.15rem; color: #6b7a99; z-index: 5; }
.funnel-card-email-badge { top: 6.7rem; color: #adb5bd; font-size: .95rem; z-index: 5; }
/* Impede selecao/arrastre nativo do icone ao segurar o clique. */
.funnel-card-email-badge, .funnel-card-email-badge *, .funnel-card-activities, .funnel-card-activities * { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; touch-action: manipulation; }
.funnel-card.is-inactive { opacity: .62; filter: grayscale(.35); text-decoration: line-through; }
.funnel-card.is-archived { background: #e5f5e9; border-color: #a9d8b4; }
.funnel-card.is-lost-archived { background: #fff0f0; border-color: #e6b8b8; }
.funnel-card.is-archived { cursor: pointer; }
[data-bs-theme="dark"] .funnel-card.is-archived { background: #193c29; border-color: #39734d; }
.funnel-card.is-inactive .funnel-card-delete { display: none; }
/* ===== Painel de gestao de e-mails (estilo webmail) =====
   3 colunas: pastas | lista de mensagens | leitura/compose. */
   .mail-shell { display: grid; grid-template-columns: 240px minmax(280px, 340px) 1fr; width: min(100%, 1400px); height: min(100%, 88vh); max-height: 88vh; overflow: hidden; border-radius: 14px; background: var(--bs-body-bg, #fff); box-shadow: 0 25px 70px rgba(12,22,45,.3); }
.mail-folders { display: flex; flex-direction: column; min-height: 0; padding: .9rem .7rem; gap: .8rem; border-right: 1px solid rgba(120,135,160,.28); background: rgba(120,135,160,.07); }
.mail-folders-head { padding: 0 .35rem; }
.mail-folders-head .fw-semibold { font-size: .95rem; }
.mail-folders-head .mail-card-title { font-size: .82rem; line-height: 1.3; text-transform: uppercase; letter-spacing: .01em; }
.mail-folder-list { display: flex; flex-direction: column; gap: .15rem; overflow-y: auto; }
.mail-folder { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; padding: .45rem .55rem; border: 0; border-radius: .5rem; background: transparent; color: inherit; font-size: .87rem; text-align: left; cursor: pointer; }
.mail-folder:hover { background: rgba(120,135,160,.16); }
.mail-folder.is-active { background: var(--arkon-primary); color: #fff; font-weight: 600; }
.mail-item[draggable="true"] { cursor: grab; }
.mail-item.is-dragging { opacity: .45; cursor: grabbing; }
.mail-folder.is-drop-target { background: rgba(22,199,173,.18); box-shadow: inset 0 0 0 2px var(--arkon-primary); }
.mail-folder.is-drop-target.is-active { color: #fff; }
.mail-folder-count { min-width: 1.4rem; padding: 0 .3rem; border-radius: 999px; background: rgba(120,135,160,.25); font-size: .72rem; font-weight: 700; text-align: center; }
.mail-folder.is-active .mail-folder-count { background: rgba(255,255,255,.28); }
.mail-folder-count:empty, .mail-folder-count[data-count="0"] { display: none; }
.mail-folder-new { margin-top: .5rem; }
.mail-folder-new-btn { display: flex; align-items: center; gap: .45rem; width: 100%; padding: .45rem .55rem; border: 1px dashed rgba(120,135,160,.45); border-radius: .5rem; background: transparent; color: inherit; font-size: .82rem; text-align: left; cursor: pointer; opacity: .85; }
.mail-folder-new-btn:hover { background: rgba(120,135,160,.16); opacity: 1; }
.mail-folder-menu { opacity: 0; padding: 0 .1rem; font-size: .8rem; cursor: pointer; }
.mail-folder:hover .mail-folder-menu, .mail-folder.is-active .mail-folder-menu { opacity: .75; }
.mail-folder { position: relative; }
.mail-folder-menu-box { position: fixed; top: 100%; right: .35rem; z-index: 1100; display: flex; flex-direction: column; min-width: 9.5rem; padding: .25rem; border: 1px solid rgba(120,135,160,.3); border-radius: .5rem; background: var(--bs-body-bg, #fff); box-shadow: 0 8px 22px rgba(12,22,45,.18); overflow: visible; }
.mail-folder-menu-box button { padding: .35rem .5rem; border: 0; border-radius: .35rem; background: transparent; color: inherit; font-size: .8rem; text-align: left; cursor: pointer; }
.mail-folder-menu-box button:hover { background: rgba(120,135,160,.18); }
.mail-folder-menu-box button.is-danger { color: #dc3545; }

/* Inline rename input */
.mail-folder-rename-input { width: auto; min-width: 8rem; max-width: 14rem; padding: .15rem .4rem; font-size: .87rem; line-height: 1.3; border-radius: .35rem; border: 1px solid var(--arkon-primary); background: var(--bs-body-bg); color: inherit; box-shadow: 0 0 0 2px rgba(22,199,173,.25); }
.mail-folder-rename-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(22,199,173,.35); }
.mail-folder-rename-wrapper { position: relative; display: inline-flex; align-items: center; gap: .25rem; }
.mail-folder-rename-confirm { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); padding: .1rem .3rem; font-size: .7rem; line-height: 1; border-radius: .3rem; z-index: 10; }
.mail-folder-rename-confirm:hover { background: #198754; border-color: #198754; }
.mail-read-folder { display: flex; align-items: center; gap: .4rem; margin-top: .65rem; font-size: .82rem; color: var(--bs-secondary-color, #6c757d); }
.mail-folders-foot { margin-top: auto; display: flex; flex-direction: column; }
.mail-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid rgba(120,135,160,.28); }
.mail-list-head { display: flex; align-items: center; justify-content: space-between; padding: .7rem .9rem; border-bottom: 1px solid rgba(120,135,160,.24); font-weight: 600; font-size: .9rem; }
.mail-list-body { flex: 1; min-height: 0; overflow-y: auto; }
.mail-item { display: block; width: 100%; padding: .6rem .9rem; border: 0; border-bottom: 1px solid rgba(120,135,160,.18); border-left: 3px solid transparent; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.mail-item:hover { background: rgba(120,135,160,.12); }
.mail-item.is-selected { background: rgba(21,101,192,.1); border-left-color: var(--arkon-primary); }
.mail-item.is-unread .mail-item-subject { font-weight: 700; }
.mail-item.is-unread .mail-item-from::after { content: ''; display: inline-block; width: .45rem; height: .45rem; margin-left: .4rem; border-radius: 50%; background: #dc3545; vertical-align: middle; }
.mail-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.mail-item-from { font-size: .8rem; color: var(--bs-secondary-color, #6c7a90); }
.mail-item-date { flex: 0 0 auto; font-size: .7rem; color: var(--bs-secondary-color, #6c7a90); }
.mail-item-subject { font-size: .87rem; margin-top: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item-preview { font-size: .76rem; color: var(--bs-secondary-color, #6c7a90); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-reader { position: relative; min-height: 0; overflow: hidden; }
.mail-reader-empty { display: grid; place-content: center; justify-items: center; gap: .5rem; height: 100%; color: var(--bs-secondary-color, #6c7a90); text-align: center; }
.mail-reader-head { padding: 1rem 1.2rem; border-bottom: 1px solid rgba(120,135,160,.24); }
.mail-subject { font-size: 1.05rem; font-weight: 700; margin: 0 0 .6rem; }
.mail-read-meta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.mail-avatar { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; display: inline-grid; place-items: center; border-radius: 50%; background: var(--arkon-primary); color: #fff; font-size: .85rem; font-weight: 700; }
.mail-read-to { font-size: .76rem; color: var(--bs-secondary-color, #6c7a90); margin-top: .35rem; }
.mail-reader-body { padding: 1.1rem 1.2rem; overflow-y: auto; height: calc(100% - 190px); font-size: .9rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.mail-compose-head { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; border-bottom: 1px solid rgba(120,135,160,.24); }
.mail-compose-body { padding: 1rem 1.1rem; overflow-y: auto; height: calc(100% - 122px); }
.mail-compose-foot { display: flex; justify-content: flex-end; gap: .5rem; padding: .7rem 1rem; border-top: 1px solid rgba(120,135,160,.24); }
[data-bs-theme="dark"] .mail-shell { background: #0f1729; }
[data-bs-theme="dark"] .mail-folders, [data-bs-theme="dark"] .mail-list, [data-bs-theme="dark"] .mail-reader { border-color: rgba(148,163,184,.2); }
[data-bs-theme="dark"] .mail-folder:hover, [data-bs-theme="dark"] .mail-item:hover { background: rgba(148,163,184,.14); }
[data-bs-theme="dark"] .mail-item.is-selected { background: rgba(22,199,173,.14); }
[data-bs-theme="dark"] .mail-avatar { background: #16c7ad; color: #0b1224; }
@media (max-width: 992px) {
    .mail-shell { grid-template-columns: 150px 1fr; }
    .mail-list { display: none; }
}

.funnel-card-won-star { position: absolute; top: .65rem; left: .65rem; color: #ffc107; font-size: 1rem; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
/* Cartinha: cinza claro por padrao, azul quando ha e-mails trocados. */
.funnel-card-email-badge.has-emails { color: var(--arkon-primary); }
/* Bolinha vermelha com a contagem de nao lidos no topo da cartinha. */
.funnel-card-email-badge.has-unread::after { content: attr(data-count); position: absolute; top: -.05rem; right: -.15rem; min-width: 1rem; height: 1rem; padding: 0 .2rem; display: inline-grid; place-items: center; border-radius: 999px; background: #dc3545; color: #fff; border: 1.5px solid #fff; font-size: .6rem; font-weight: 700; line-height: 1; }
[data-bs-theme="dark"] .funnel-card-email-badge.has-emails { color: #16c7ad; }
[data-bs-theme="dark"] .funnel-card-email-badge.has-unread::after { background: #ff6b6b; border-color: #0b1224; }
[data-bs-theme="dark"] .funnel-card-edit { color: #7b8cff; }
[data-bs-theme="dark"] .funnel-card-delete { color: #ff6b6b; }
[data-bs-theme="dark"] .funnel-card-project-action { color: #4ade80; }
[data-bs-theme="dark"] .funnel-card-activities { color: #9aa8c7; }
.funnel-card.is-archived .funnel-card-edit, .funnel-card.is-archived .funnel-card-project-action { background: rgba(255,255,255,.72); }
.funnel-card.is-archived .funnel-card-edit { color: #2453c5; }
.funnel-card.is-archived .funnel-card-project-action { color: #146c43; }
.interaction-entry.is-inactive { opacity: .62; text-decoration: line-through; }
[data-bs-theme="dark"] .metric-card, [data-bs-theme="dark"] .panel-card, [data-bs-theme="dark"] .table-panel, [data-bs-theme="dark"] .audit-page .audit-summary { background: rgba(19,30,53,.82); }
[data-bs-theme="dark"] .cards.vstack.gap-2 { background: rgba(7,16,35,.24); }
.interaction-modal { position: fixed; inset: 0; z-index: 1050; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(12, 22, 45, .58); backdrop-filter: blur(4px); }
.interaction-modal.is-open { display: flex; }
.confirmation-dialog { position: relative; width: min(100%, 430px); padding: 2rem; text-align: center; border-radius: 18px; background: #fff; box-shadow: 0 25px 70px rgba(12,22,45,.3); }
.confirmation-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 1rem; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--arkon-primary), #3149ad); font-size: 1.5rem; }
.confirmation-dialog.is-danger .confirmation-icon, .interaction-modal.is-danger .confirmation-icon { background: linear-gradient(135deg, #dc3545, #a7192b); }
.interaction-modal.is-danger [data-confirmation-accept] { background-color: #dc3545; border-color: #dc3545; }
.confirmation-dialog.is-warning .confirmation-icon, .interaction-modal.is-warning .confirmation-icon { background: linear-gradient(135deg, #f59e0b, #b45309); }
.interaction-modal.is-warning [data-alert-accept] { background-color: #f59e0b; border-color: #f59e0b; color: #fff; }
.interaction-modal.is-warning [data-alert-accept]:hover { background-color: #d97706; border-color: #d97706; }
.confirmation-actions { display: flex; justify-content: center; gap: .75rem; margin-top: 1.5rem; }
.confirmation-close { position: absolute; top: 1rem; right: 1rem; }
.notification-fade-in { animation: notification-in .25s ease-out both; }
.notification-fade-out { animation: notification-out .35s ease-in both; }
@keyframes notification-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes notification-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6px); } }
.interaction-dialog { width: 850px; max-width: 90vw; height: min(90vh, 850px); display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 25px 70px rgba(12,22,45,.3); }
.interaction-dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 1.6rem; border-bottom: 1px solid #e8ecf3; background: linear-gradient(135deg, #f8f9ff, #fff); flex-shrink: 0; }
/* Layout: form fixo a esquerda, historico rolavel a direita. */
.interaction-dialog-body { flex: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 0; padding: 1.6rem; min-height: 0; overflow: hidden; }
.interaction-dialog-body > .interaction-left-column { overflow-y: auto; padding-right: 1.5rem; min-width: 0; }
.interaction-dialog-body > .interaction-right-column { overflow-y: auto; padding-left: 1.5rem; border-left: 1px solid #e8ecf3; min-width: 0; }
.interaction-form-section { /* border-left removido - agora fica na coluna direita */ }
.interaction-entry { position: relative; margin-bottom: .75rem; padding: 1rem 5.5rem 1rem 1rem; border: 1px solid #e4e8f1; border-radius: 11px; background: #fbfcff; }
.interaction-entry-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .55rem; }
.interaction-type { color: var(--arkon-primary); font-size: .78rem; font-weight: 700; }
.interaction-entry time { flex: 0 1 auto; min-width: 0; color: #8995a8; font-size: .75rem; white-space: nowrap; }
.interaction-entry p { margin-bottom: .6rem; white-space: pre-line; color: #344054; }
.interaction-entry small { display: block; color: #64748b; line-height: 1.45; }
.interaction-entry .interaction-meta { margin-top: .7rem; font-size: .7rem; color: #98a2b3; }
.interaction-actions { position: absolute; top: .55rem; right: .5rem; display: flex; align-items: center; gap: .15rem; padding-left: .35rem; background: #fbfcff; }
.interaction-actions .btn { padding: .2rem .35rem; }
.empty-interactions { padding: 2rem 1rem; text-align: center; color: #98a2b3; border: 1px dashed #d9e0ec; border-radius: 11px; }
.empty-interactions i { display: block; margin-bottom: .5rem; font-size: 1.7rem; color: #aab5c8; }
.empty-interactions p { margin-bottom: .2rem; color: #667085; }
[data-bs-theme="dark"] .interaction-modal { background: rgba(2, 8, 23, .78); }
[data-bs-theme="dark"] .interaction-dialog,
[data-bs-theme="dark"] .confirmation-dialog { color: #edf3ff; background: #111d34; border: 1px solid #34486c; box-shadow: 0 25px 70px rgba(0,0,0,.55); }
[data-bs-theme="dark"] .interaction-dialog-header { color: #edf3ff; border-color: #34486c; background: linear-gradient(135deg, #172a50, #111d34); }
[data-bs-theme="dark"] .interaction-dialog-header .text-body-secondary,
[data-bs-theme="dark"] .interaction-dialog-body .text-body-secondary { color: #aab8d4 !important; }
[data-bs-theme="dark"] .interaction-dialog .btn-close,
[data-bs-theme="dark"] .confirmation-dialog .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }
[data-bs-theme="dark"] .interaction-form-section { border-color: #34486c; }
[data-bs-theme="dark"] .card-project-editor { border-color: #34486c; }
[data-bs-theme="dark"] .interaction-dialog .form-label { color: #dce7ff; }
[data-bs-theme="dark"] .interaction-dialog .form-control,
[data-bs-theme="dark"] .interaction-dialog .form-select { color: #edf3ff; background: #0b162b; border-color: #4b6190; }
[data-bs-theme="dark"] .interaction-dialog .form-control:focus,
[data-bs-theme="dark"] .interaction-dialog .form-select:focus { color: #fff; background: #0d1b34; border-color: #7e9aff; box-shadow: 0 0 0 .2rem rgba(126,154,255,.2); }
[data-bs-theme="dark"] .interaction-dialog .form-control::placeholder { color: #91a1c1; }
[data-bs-theme="dark"] .interaction-entry { color: #edf3ff; border-color: #3b5078; background: #172846; }
[data-bs-theme="dark"] .interaction-entry p { color: #e2eaff; }
[data-bs-theme="dark"] .interaction-entry small { color: #b8c6df; }
[data-bs-theme="dark"] .interaction-entry .interaction-meta,
[data-bs-theme="dark"] .interaction-entry time { color: #9eafd0; }
[data-bs-theme="dark"] .interaction-actions { background: #172846; }
[data-bs-theme="dark"] .empty-interactions { color: #bdcbe3; border-color: #4b6190; }
[data-bs-theme="dark"] .empty-interactions p { color: #dce7ff; }
[data-bs-theme="dark"] .empty-interactions i { color: #9eafd0; }
@media (max-width: 767.98px) { .interaction-dialog-body { grid-template-columns: 1fr; } .interaction-form-section { padding-left: 0; padding-top: 1.5rem; border-top: 1px solid #e8ecf3; border-left: 0; } }

/* Toolbar de filtros do financeiro (flexbox limpo, sem position absolute) */
.financeiro-toolbar { flex-wrap: wrap; }
.financeiro-filters { display: flex; align-items: center; gap: .5rem; flex: 1 1 auto; flex-wrap: wrap; min-width: 0; }
.financeiro-filters .ff-label { font-size: .78rem; color: var(--arkon-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.financeiro-filters .ff-label-busca { margin-left: .5rem; }
.financeiro-filters .ff-sep { color: var(--arkon-muted); }
.financeiro-filters .ff-date { width: auto; max-width: 9rem; }
.financeiro-filters .ff-search-wrap { position: relative; flex: 1 1 220px; min-width: 180px; max-width: 380px; }
.financeiro-filters .ff-search-icon { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: #8b98ad; pointer-events: none; font-size: .85rem; }
.financeiro-filters .ff-search { width: 100%; padding-left: 1.9rem; }
.financeiro-filters .ff-submit { flex: 0 0 auto; white-space: nowrap; }
.financeiro-toolbar .ff-situacao { max-width: 200px; flex: 0 0 auto; }
[data-bs-theme="dark"] .financeiro-filters .ff-search { background: #0d172b; border-color: #3b4d70; color: #edf3ff; }


/* Botao Limpar filtros do financeiro */
.ff-clear { display: inline-flex; align-items: center; gap: .25rem; color: #6b7280; border-color: #e2e7f0; flex: 0 0 auto; white-space: nowrap; transition: all .2s ease; }
.ff-clear:hover { color: #dc3545; border-color: #dc3545; background: rgba(220, 53, 69, .06); }
[data-bs-theme="dark"] .ff-clear { color: #aab8d4; border-color: #34486c; }
[data-bs-theme="dark"] .ff-clear:hover { color: #fca5a5; border-color: #dc2626; background: rgba(220, 38, 38, .14); }

@media (max-width: 767.98px) { .table-toolbar { align-items: stretch; flex-direction: column; } .search-box { max-width: none; } .records-control { margin-left: 0; } }
/* Conteudo do meio: rola independente do sidebar/header fixos */
.app-content { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.app-content::-webkit-scrollbar { width: 10px; }
.app-content::-webkit-scrollbar-thumb { background: rgba(71,99,230,.22); border-radius: 5px; }
.app-content::-webkit-scrollbar-thumb:hover { background: rgba(71,99,230,.4); }
[data-bs-theme="dark"] .app-content::-webkit-scrollbar-thumb { background: rgba(123,97,255,.3); }

/* ===== Responsivo: tabelas viram cards no mobile ===== */
@media (max-width: 767.98px) {
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr { margin-bottom: .75rem; border: 1px solid var(--arkon-border); border-radius: 11px; background: var(--arkon-panel); padding: .5rem .75rem; box-shadow: 0 2px 6px rgba(27,42,75,.04); }
  .data-table tr.is-inactive { opacity: .6; }
  .data-table td { display: flex; justify-content: space-between; align-items: center; gap: .5rem; border: 0; padding: .35rem 0; font-size: .84rem; text-align: right; }
  .data-table td::before { content: attr(data-label); font-weight: 700; color: var(--arkon-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; text-align: left; flex-shrink: 0; }
  .data-table td:last-child { justify-content: flex-end; }
  .data-table td:last-child::before { display: none; }
  .data-table .table-actions { justify-content: flex-end; }
  [data-bs-theme="dark"] .data-table tr { background: #131e35; border-color: #34486c; }
}
@media (max-width: 767.98px) { .app-sidebar { width: 76px; flex-basis: 76px; } .sidebar-label { display: none; } .sidebar-brand, .sidebar-link { justify-content: center; padding-left: .5rem; padding-right: .5rem; } .app-header { padding: 0 1rem; } .page-heading { align-items: flex-start; flex-direction: column; } }

/* Project task tree + Gantt */
.task-tree { display: flex; flex-direction: column; gap: .4rem; overflow-x: auto; padding-bottom: .3rem; }
.task-row-main { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border: 1px solid var(--arkon-border); border-radius: .6rem; background: var(--arkon-panel); flex-wrap: nowrap; min-width: 900px; }
.task-row-icon { font-size: .95rem; flex-shrink: 0; }
.task-indent { flex-shrink: 0; }
.task-name-input { min-width: 160px; flex: 2 1 200px; font-weight: 600; }
.task-milestone-toggle { display: inline-flex; align-items: center; gap: .2rem; cursor: pointer; color: var(--arkon-muted); flex-shrink: 0; }
.task-milestone-toggle input { accent-color: #ffc107; }
.task-date-input { flex: 1 1 130px; min-width: 130px; }
.task-predecessor-select { flex: 1 1 160px; min-width: 140px; }
.task-progress-input { flex: 1 1 110px; min-width: 100px; }
.task-progress-label { flex-shrink: 0; font-size: .78rem; color: var(--arkon-muted); width: 2.4rem; text-align: right; }
.task-row-actions { display: flex; gap: .25rem; flex-shrink: 0; margin-left: auto; }
.task-children { margin-left: 1.4rem; margin-top: .4rem; padding-left: .6rem; border-left: 2px dashed var(--arkon-border); display: flex; flex-direction: column; gap: .4rem; }
[data-bs-theme="dark"] .task-row-main { background: rgba(19,30,53,.82); border-color: var(--arkon-border); }

.gantt-modal-backdrop { position: fixed; inset: 0; z-index: 1080; background: rgba(10,14,26,.72); display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.gantt-modal-backdrop.d-none { display: none; }
body.gantt-modal-open { overflow: hidden; }
.gantt-modal-dialog { background: var(--arkon-surface, #fff); border-radius: .8rem; width: 100%; height: 100%; max-width: 100%; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.4); overflow: hidden; }
[data-bs-theme="dark"] .gantt-modal-dialog { background: #0f1729; }
.gantt-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.4rem; border-bottom: 1px solid var(--arkon-border); flex-shrink: 0; }
.gantt-modal-body { flex: 1; padding: 1rem 1.4rem; overflow: hidden; display: flex; flex-direction: column; }
.gantt-modal-content { flex: 1; display: flex; overflow: hidden; border: 1px solid var(--arkon-border); border-radius: .6rem; }
.gantt-task-labels { flex-shrink: 0; width: 260px; overflow-y: auto; border-right: 1px solid var(--arkon-border); background: var(--arkon-bg); }
.gantt-label-header { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--arkon-muted); padding: .5rem .75rem; height: 3.5rem; display: flex; align-items: flex-end; border-bottom: 1px solid var(--arkon-border); position: sticky; top: 0; background: var(--arkon-bg); }
.gantt-label-row { height: 2.1rem; display: flex; align-items: center; padding: 0 .75rem; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid transparent; }
.gantt-label-row:nth-child(even) { background: rgba(71,99,230,.10); }
[data-bs-theme="dark"] .gantt-label-row:nth-child(even) { background: rgba(123,97,255,.16); }
.gantt-timeline-scroll { flex: 1; overflow: auto; }
.gantt-wrapper { display: inline-block; min-width: 100%; }
.gantt-header { position: sticky; top: 0; background: var(--arkon-bg); z-index: 2; border-bottom: 1px solid var(--arkon-border); }
.gantt-month-row, .gantt-week-row { display: flex; }
.gantt-month-cell { flex-shrink: 0; text-align: center; font-size: .74rem; font-weight: 700; color: var(--arkon-text); padding: .35rem 0; border-right: 1px solid var(--arkon-border); border-bottom: 1px solid var(--arkon-border); }
.gantt-week-cell { flex-shrink: 0; text-align: center; font-size: .68rem; color: var(--arkon-muted); padding: .3rem 0; border-right: 1px solid var(--arkon-border); }
.gantt-body { position: relative; padding: 0; }
.gantt-row { position: relative; height: 2.1rem; }
.gantt-row:nth-child(even) { background: rgba(71,99,230,.10); }
[data-bs-theme="dark"] .gantt-row:nth-child(even) { background: rgba(123,97,255,.16); }
.gantt-bar { position: absolute; top: .3rem; height: 1.5rem; border-radius: .4rem; background: linear-gradient(135deg, var(--arkon-primary), #7b61ff); color: #fff; font-size: .72rem; display: flex; align-items: center; overflow: hidden; white-space: nowrap; box-shadow: 0 2px 6px rgba(71,99,230,.25); }
.gantt-bar-progress { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,.35); }
.gantt-milestone { background: transparent; box-shadow: none; color: #ffc107; font-size: 1.1rem; width: 1.6rem !important; justify-content: center; }
/* Fix: metric-card accent icon visivel no dark mode */
[data-bs-theme="dark"] .metric-card.accent-teal .metric-icon { background: rgba(5, 184, 157, .28); color: #2dd4bf; }
[data-bs-theme="dark"] .metric-card.accent-violet .metric-icon { background: rgba(123, 97, 255, .28); color: #a78bfa; }
[data-bs-theme="dark"] .metric-card.accent-amber .metric-icon { background: rgba(240, 164, 75, .28); color: #fbbf24; }
[data-bs-theme="dark"] .metric-card.accent-rose .metric-icon { background: rgba(239, 121, 88, .28); color: #fb7185; }
[data-bs-theme="dark"] .metric-card.accent-green .metric-icon { background: rgba(50, 168, 121, .28); color: #34d399; }
[data-bs-theme="dark"] .metric-card.accent-navy .metric-icon { background: rgba(71, 99, 230, .28); color: #818cf8; }
/* Fix: altura uniforme dos metric-card do dashboard */
.dash-kpi-row .metric-card { height: 100%; min-height: 78px; align-items: center; }
.dash-kpi-row .metric-card > div { min-width: 0; }
/* Fix: modais Bootstrap opacos no dark mode */
/* Modais Bootstrap: garantir fundo opaco sempre (light + dark) */
.modal-content { background: #fff; border: 1px solid var(--arkon-border); border-radius: 14px; box-shadow: 0 25px 70px rgba(12,22,45,.3); color: var(--arkon-text); }
.modal-header { border-bottom: 1px solid var(--arkon-border); }
.modal-footer { border-top: 1px solid var(--arkon-border); }
.modal-backdrop.show { opacity: .78; }
[data-bs-theme="dark"] .modal-content { background: #111d34; border: 1px solid #34486c; color: var(--arkon-text); }
[data-bs-theme="dark"] .modal-header { border-bottom-color: #34486c; }
[data-bs-theme="dark"] .modal-footer { border-top-color: #34486c; }
[data-bs-theme="dark"] .modal-header .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }
[data-bs-theme="dark"] .modal-body .form-control, [data-bs-theme="dark"] .modal-body .form-select { background: #0d172b; border-color: #3b4d70; color: #edf3ff; }
[data-bs-theme="dark"] .modal-header { border-bottom-color: #34486c; }
[data-bs-theme="dark"] .modal-footer { border-top-color: #34486c; }
[data-bs-theme="dark"] .modal-header .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background: #0d172b; border-color: #3b4d70; color: #edf3ff; }
[data-bs-theme="dark"] .modal-backdrop.show { opacity: .78; }

/* =========================================================
 * Gantt aprimorado — regras adicionais
 * (drag&drop, parent rows, summary bars, drop indicators)
 * ========================================================= */

/* Drag handle: aparece à esquerda de cada linha. Visível sempre,
 * mas ganha destaque no hover para sinalizar que a linha é arrastável. */
.task-row-handle { cursor: grab; flex-shrink: 0; opacity: .35; transition: opacity .15s ease, color .15s ease; user-select: none; -webkit-user-select: none; }
.task-row:hover .task-row-handle { opacity: .85; color: var(--arkon-primary); }
/* Make the handle clearly clickable and a reliable drag initiator.
 * Pad it slightly so the user has a comfortable hit target. */
.task-row-handle { padding: .15rem .1rem; border-radius: .25rem; }
.task-row-handle:active { cursor: grabbing; }
.task-row.is-dragging { opacity: .4; }
.task-row.is-dragging .task-row-handle { cursor: grabbing; }
/* When a drag is in progress, prevent text selection inside the row's
 * interactive elements — it would otherwise hijack the drag in Firefox. */
.task-row.is-dragging, .task-row.is-dragging * { user-select: none !important; -webkit-user-select: none !important; }
/* Drop targets need a clear visual hint so the user knows where the drop
 * will land. */
.task-row.is-drop-target { outline: 2px solid var(--arkon-primary); outline-offset: -2px; }

/* Linha-pai: borda destacada para diferenciar das folhas. */
.task-row.is-parent > .task-row-main { border-left: 3px solid var(--arkon-primary); padding-left: calc(.6rem - 2px); background: rgba(5, 184, 157, .06); }
[data-bs-theme="dark"] .task-row.is-parent > .task-row-main { background: rgba(22, 199, 173, .10); }

/* Slider "desabilitado" em pais: NÃO usamos o atributo disabled (causa bugs
 * de .value em alguns browsers). Em vez disso, usamos pointer-events: none
 * para impedir a interação, mantendo o slider habilitado no DOM.
 *
 * IMPORTANTE: o seletor usa `.task-row.is-parent > .task-row-main .task-progress-input`
 * (com `> .task-row-main` no meio) para garantir que só casquemos com o slider
 * DIRETO desta linha pai, e não com sliders de sub-tarefas aninhadas abaixo.
 * Sem o `> .task-row-main`, o seletor `.task-row.is-parent .task-progress-input`
 * cascaria com TODOS os sliders descendentes — inclusive folhas netas/bisnetas —
 * desabilitando o slider de todas as sub-tarefas. */
.task-row.is-parent > .task-row-main .task-progress-input { pointer-events: none; opacity: .55; cursor: default; }
.task-row.is-parent > .task-row-main .task-progress-label { font-weight: 700; color: var(--arkon-primary); min-width: 2.4rem; }
/* Make sure the parent label is always visible even in dark mode where
 * --arkon-primary may be too dim against the panel background. */
[data-bs-theme="dark"] .task-row.is-parent > .task-row-main .task-progress-label { color: #16c7ad; text-shadow: 0 0 1px rgba(0,0,0,.4); }

/* Indicadores visuais de drop durante o drag.
 * - is-drop-target + drop-mode=before  → faixa azul no topo
 * - is-drop-target + drop-mode=after   → faixa azul no rodapé
 * - is-drop-target + drop-mode=inside  → contorno azul envolvendo a linha */
.task-row.is-drop-target { position: relative; }
.task-row.is-drop-target[data-drop-mode="before"]::before {
    content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 3px;
    background: var(--arkon-primary); border-radius: 2px; z-index: 3;
    box-shadow: 0 0 0 2px rgba(5, 184, 157, .25);
}
.task-row.is-drop-target[data-drop-mode="after"]::after {
    content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 3px;
    background: var(--arkon-primary); border-radius: 2px; z-index: 3;
    box-shadow: 0 0 0 2px rgba(5, 184, 157, .25);
}
.task-row.is-drop-target[data-drop-mode="inside"] > .task-row-main {
    outline: 2px dashed var(--arkon-primary);
    outline-offset: -2px;
    background: rgba(5, 184, 157, .14);
}
[data-bs-theme="dark"] .task-row.is-drop-target[data-drop-mode="inside"] > .task-row-main {
    background: rgba(22, 199, 173, .22);
}

/* Container de filhos vazio também é área de drop válida — dar uma
 * altura mínima e indicar com fundo pontilhado quando hover arrastando. */
.task-children:empty { min-height: 0; }
.task-tree[aria-dragging="true"] .task-children:empty { min-height: 14px; }

/* =========================================================
 * Gantt — modal
 * ========================================================= */

/* Modo "Agrupado": pais viram barras-resumo (mais grossas) com rótulo do
 * próprio nome. Filhos continuam como barras normais, indentadas. */
.gantt-bar.gantt-bar-summary {
    height: 1.9rem; top: .15rem;
    background: linear-gradient(135deg, rgba(5, 184, 157, .85), rgba(123, 97, 255, .85));
    border: 1px solid rgba(255, 255, 255, .25);
    font-weight: 600;
}
.gantt-bar.gantt-bar-summary .gantt-bar-progress { background: rgba(255, 255, 255, .55); }
.gantt-bar.gantt-bar-done { background: linear-gradient(135deg, #16c7ad, #14b8a6); }
.gantt-bar.gantt-bar-empty { background: linear-gradient(135deg, #64748b, #475569); opacity: .9; }

/* Label interno da barra (nome + %). Aparece só quando a barra é larga o
 * suficiente; caso contrário, o title já carrega a info no hover. */
.gantt-bar-label {
    position: relative; z-index: 1; padding: 0 .5rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
    font-size: .68rem; line-height: 1.5rem; color: #fff;
}
.gantt-bar.gantt-bar-summary .gantt-bar-label { line-height: 1.9rem; font-size: .72rem; }

/* Linha de label (coluna esquerda) destacada para pais no modo agrupado. */
.gantt-label-row.gantt-label-parent { font-weight: 700; color: var(--arkon-text); }
.gantt-label-row.gantt-label-parent i { color: var(--arkon-primary); }

/* Botões de modo (Plano / Agrupado) — manter a estética do zoom. */
[data-gantt-mode] .btn-outline-primary { font-size: .74rem; }

/* =========================================================
 * Gantt aprimorado — regras adicionais (parte 2)
 * - Chevron para colapsar/expandir
 * - Botão "distribuir progresso"
 * - Setas de dependência (overlay SVG)
 * ========================================================= */

/* Chevron toggle — só aparece em tarefas-pai; em folhas fica oculto. */
.task-toggle {
    background: none; border: none; padding: 0 .25rem; cursor: pointer;
    color: var(--arkon-muted); flex-shrink: 0; display: none;
    align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem;
    border-radius: .25rem; transition: background .15s ease, color .15s ease;
}
.task-row.is-parent > .task-row-main .task-toggle { display: inline-flex; }
.task-toggle:hover { background: rgba(5, 184, 157, .15); color: var(--arkon-primary); }
.task-toggle .toggle-collapsed { display: none; }
.task-row.is-collapsed .toggle-expanded { display: none; }
.task-row.is-collapsed .toggle-collapsed { display: inline-block; }
/* Quando colapsada, esconde o container de filhos inteiro. */
.task-row.is-collapsed > .task-children { display: none; }

/* Botão "distribuir progresso" — visual igual aos outros, mas com ícone
 * de distribuição vertical. Em folhas, fica desabilitado pelo JS. */
.task-row-actions .btn[data-distribute-progress] { color: var(--arkon-muted); }
.task-row-actions .btn[data-distribute-progress]:hover:not(:disabled) {
    background: rgba(5, 184, 157, .15);
    color: var(--arkon-primary);
}
.task-row-actions .btn[data-distribute-progress]:disabled {
    opacity: .3; cursor: not-allowed;
}

/* =========================================================
 * Gantt — setas de dependência (overlay SVG)
 *
 * O SVG é posicionado absolutamente sobre o .gantt-body, com
 * pointer-events: none para não atrapalhar o clique nas barras.
 * Cada path é um L (ou seja, vai reto para o lado, desce/sobe e
 * vai reto até o destino) terminando com uma seta via marker-end.
 * ========================================================= */
.gantt-body { position: relative; }
.gantt-deps {
    position: absolute; top: 0; left: 0;
    pointer-events: none; overflow: visible; z-index: 4;
}
.gantt-deps path {
    stroke: rgba(123, 97, 255, .8); stroke-width: 1.5; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
}
[data-bs-theme="dark"] .gantt-deps path {
    stroke: rgba(167, 139, 250, .85);
}

/* Switch de setas no header do Gantt — alinhamento vertical. */
.gantt-modal-header .form-check-label { color: var(--arkon-muted); cursor: pointer; }
.gantt-modal-header .form-check-input { cursor: pointer; }

/* Botões "Recolher" e "Expandir" no topo do quadro. */
[data-collapse-all], [data-expand-all] { font-size: .74rem; }

/* =========================================================
 * Gantt — chevron nas labels + botões recolher/expandir
 * ========================================================= */

/* Cada label-row do Gantt agora tem um chevron à esquerda (em pais).
 * Em folhas, o espaço fica reservado com um spacer para manter tudo
 * alinhado verticalmente. */
.gantt-label-row { align-items: center; gap: .15rem; }
.gantt-label-toggle, .gantt-label-toggle-spacer {
    flex-shrink: 0; width: 1rem; height: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: .25rem;
}
.gantt-label-toggle {
    background: none; border: none; padding: 0;
    color: var(--arkon-muted); cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.gantt-label-toggle:hover {
    background: rgba(5, 184, 157, .15);
    color: var(--arkon-primary);
}
.gantt-label-toggle i { font-size: .78rem; line-height: 1; }
.gantt-label-toggle-spacer { display: inline-block; }

/* Texto da label: ocupa o resto e corta com reticências. */
.gantt-label-text {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Quando um pai está colapsado, sua label fica destacada para indicar
 * que há sub-tarefas escondidas (visual feedback). */
.gantt-label-row.has-collapsed-hint {
    font-style: italic; color: var(--arkon-primary);
}

/* Botões recolher/expandir do header do Gantt — mesmas dimensões
 * dos outros btn-sm do header para ficarem alinhados. */
.gantt-modal-header [data-gantt-collapse-all],
.gantt-modal-header [data-gantt-expand-all] { font-size: .74rem; }

/* =========================================================
 * Drag ghost — o clone flutuante que segue o cursor durante
 * o arraste via Pointer Events.
 * ========================================================= */
.drag-ghost {
    pointer-events: none !important;
    background: var(--arkon-panel, #fff);
    border: 1px solid var(--arkon-primary);
    border-radius: .6rem;
    padding: .45rem .6rem;
    font-size: .85rem;
}
[data-bs-theme="dark"] .drag-ghost {
    background: #0f1729;
    border-color: #16c7ad;
}
/* Tornar o handle mais visível para o usuário saber onde clicar
 * para iniciar o arraste. */
.task-row-handle {
    min-width: 1.2rem;
    text-align: center;
}
.task-row-handle:hover {
    background: rgba(5, 184, 157, .15);
    border-radius: .25rem;
}

/* =========================================================
 * Funnel card drag — Pointer Events ghost e drop target
 * ========================================================= */
.funnel-column.is-drop-target .funnel-stage {
    outline: 2px dashed var(--arkon-primary);
    outline-offset: -2px;
    background: rgba(5, 184, 157, .05);
}
.drag-ghost {
    pointer-events: none !important;
    background: rgba(255, 255, 255, .95) !important;
    border: 1px solid var(--arkon-primary) !important;
    border-radius: 11px;
    padding: 1rem;
    font-size: .85rem;
}
[data-bs-theme="dark"] .drag-ghost {
    background: rgba(15, 23, 41, .95) !important;
    border-color: #16c7ad !important;
    color: #edf3ff;
}

/* =========================================================
 * WYSIWYG Email Editor — toolbar + contenteditable
 * ========================================================= */
.email-editor-wrapper { border: 1px solid var(--arkon-border, #e4e8f2); border-radius: .4rem; overflow: hidden; }
.email-editor-toolbar { display: flex; flex-wrap: wrap; gap: .1rem; padding: .25rem; background: var(--arkon-bg, #f8f9fc); border-bottom: 1px solid var(--arkon-border, #e4e8f2); }
.email-editor-toolbar button { background: none; border: none; padding: .25rem .4rem; cursor: pointer; border-radius: .25rem; color: var(--arkon-text, #333); font-size: .85rem; transition: background .15s ease; }
.email-editor-toolbar button:hover { background: rgba(5, 184, 157, .15); color: var(--arkon-primary); }
.email-editor-toolbar button:active { background: rgba(5, 184, 157, .25); }
.email-editor-divider { width: 1px; background: var(--arkon-border, #e4e8f2); margin: .1rem .15rem; flex-shrink: 0; }
.email-editor { min-height: 120px; max-height: 250px; overflow-y: auto; padding: .6rem .75rem; font-size: .9rem; line-height: 1.5; outline: none; color: var(--arkon-text, #333); background: #fff; }
.email-editor:empty::before { content: attr(data-placeholder); color: #999; pointer-events: none; }
.email-editor:focus { box-shadow: inset 0 0 0 2px rgba(5, 184, 157, .15); }
.email-editor h3 { font-size: 1.1rem; font-weight: 700; margin: .5rem 0; }
.email-editor ul, .email-editor ol { padding-left: 1.5rem; margin: .25rem 0; }
.email-editor a { color: var(--arkon-primary); }
[data-bs-theme="dark"] .email-editor { background: #0d172b; color: #edf3ff; }
[data-bs-theme="dark"] .email-editor-toolbar { background: #111d34; }
[data-bs-theme="dark"] .email-editor-toolbar button { color: #edf3ff; }
[data-bs-theme="dark"] .email-editor:empty::before { color: #6b7a99; }

.length-menu { white-space: nowrap; }
.length-menu .form-select { min-width: 4.5rem; }
.pagination .page-link { min-width: 2.25rem; text-align: center; }
.pagination .page-item.active .page-link { color: #fff; background: var(--arkon-primary); border-color: var(--arkon-primary); }
@media (max-width: 767.98px) {
    .length-menu { white-space: normal; }
    .table-bottom-bar { align-items: flex-start !important; flex-direction: column; gap: .75rem !important; }
}

/* Modal de compose de e-mail: z-index maior que o interaction-modal
 * para ficar por cima quando aberto a partir do modal do card. */
#email-compose-modal { z-index: 1070; }

/* Modal de confirmação global: z-index maior que email-manager-modal */
.interaction-modal[data-global-confirmation] { z-index: 1080; }