:root {
    --brand-color: #206172;
    --brand-color-hover: #1a5261;
    --brand-color-soft: #e4eef0;
    --danger-color: #b91c1c;
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --color-bg: #f6f8fa;
    --color-surface: #ffffff;
    --color-border: #e3e8ee;
    --color-text: #1a1f36;
    --color-text-secondary: #697386;
    --color-text-tertiary: #8792a2;
    --transition-fast: 120ms ease;
    --transition-base: 160ms ease;
    --focus-ring: 0 0 0 3px rgba(32, 97, 114, 0.35);

    --radius-sm: 0.4rem;
    --radius-md: 0.5rem;
    --radius-btn: 0.6rem;

    /* Reins in Bootstrap's default corner radii (more rounded than we want)
       so every component built on them — cards, alerts, inputs, dropdowns,
       modals — follows the same, smaller scale without per-component overrides. */
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-lg: var(--radius-btn);
    --bs-border-radius-xl: 0.75rem;
    --bs-border-radius-2xl: 1rem;
}

* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

a.active {
    text-decoration: underline;
}

/* Interaction: shared transitions + keyboard focus rings. Form fields use
   :focus (feedback on any focus method); links/buttons use :focus-visible
   so a mouse click doesn't show a ring meant for keyboard navigation. */

a, button, input, textarea, select, summary {
    transition: background-color var(--transition-base), border-color var(--transition-base),
        color var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);
}

.kanban-card {
    transition: box-shadow var(--transition-base), transform var(--transition-base),
        border-color var(--transition-base);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Buttons: explicit radius (rounder than Bootstrap's default, on purpose) */

.btn {
    --bs-btn-border-radius: var(--radius-btn);
}

/* Minimalist replacement for Bootstrap's btn-group: same set of buttons,
   but spaced apart with their own corners instead of fused/shared borders. */

.btn-row {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    gap: 0.4rem;
}

/* Filter chips (label/urgency/escalation filters on the leads page): pill,
   no border by default, soft tinted background when active — one step more
   minimal than .btn-row's outlined buttons. */

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.filter-chip:hover {
    color: var(--color-text);
    border-color: var(--color-text-tertiary);
}

.filter-chip.active {
    color: var(--brand-color);
    background: var(--brand-color-soft);
    border-color: transparent;
    font-weight: 600;
}

.filter-chip-neutral.active {
    color: var(--color-text);
    background: var(--color-border);
    border-color: transparent;
}

.filter-chip-danger {
    color: var(--danger-color);
    border-color: var(--color-border);
}

.filter-chip-danger.active {
    background: var(--bs-danger-bg-subtle);
    border-color: transparent;
}

/* Agenda week nav: plain arrows, no button chrome */

.agenda-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    color: var(--brand-color);
}

.agenda-nav-btn:hover {
    background: var(--brand-color-soft);
}

/* Plain text-link actions: row actions (Editar/Excluir) and view toggles
   (Kanban/Tabela) — no button chrome at all, just colored text. */

.text-link {
    color: var(--brand-color);
    font-weight: 500;
    font-size: 0.85rem;
}

.text-link:hover {
    text-decoration: underline;
}

.text-link-danger {
    color: var(--danger-color);
}

.text-link.active {
    font-weight: 700;
    text-decoration: underline;
}

/* Cards: no border, page background alone gives enough separation */

.card {
    border: 0;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
}

h1 {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--brand-color);
}

h2 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* Kanban board */

.kanban-board {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 1rem;
}

.kanban-column {
    flex: 0 0 272px;
    background: #f0f2f5;
    border-radius: var(--radius-md);
    padding: 0.6rem;
}

.kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.4rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kanban-count {
    background: var(--color-border);
    color: var(--color-text-secondary);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.kanban-column-cards {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 40px;
}

.kanban-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    cursor: grab;
}

.kanban-card:hover {
    box-shadow: 0 4px 10px rgba(16, 24, 40, 0.08);
    transform: translateY(-1px);
}

.kanban-card:active {
    cursor: grabbing;
    transform: none;
}

.sortable-ghost {
    opacity: 0.4;
}

.sortable-chosen {
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.15);
}

/* Lead detail */

.detail-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1rem;
    margin: 0;
}

.detail-list dt {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

.detail-list dd {
    margin: 0;
    font-size: 0.85rem;
    text-align: right;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-surface);
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    border-radius: 4px;
    padding: 0.2rem;
    cursor: pointer;
    opacity: 0.65;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    background: var(--brand-color-soft);
}

/* Settings */

.settings-form-card {
    max-width: 560px;
}

.settings-form-card form p {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0 0 1rem;
}

.settings-form-card form label {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.required-marker {
    color: var(--danger-color);
}

.settings-form-card form .helptext {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin-top: 0.3rem;
}

.settings-form-card form input[type="text"],
.settings-form-card form input[type="number"],
.settings-form-card form input[type="time"],
.settings-form-card form input[type="file"],
.settings-form-card form input[type="date"],
.settings-form-card form input[type="email"],
.settings-form-card form input[type="password"],
.settings-form-card form textarea,
.settings-form-card form select {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    width: 100%;
}

.settings-form-card form ul.errorlist {
    color: #b91c1c;
    font-size: 0.8rem;
    margin: 0.3rem 0 0;
    padding: 0;
    list-style: none;
}

/* Dashboard charts */

/* Vertical bar chart (weekly series) */

.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 160px;
    padding-top: 1.5rem;
}

.bar-chart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.bar-chart-bar-wrap {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
}

.bar-chart-bar {
    width: 20px;
    max-width: 24px;
    background: var(--brand-color);
    border-radius: 4px 4px 0 0;
    min-height: 2px;
    position: relative;
}

.bar-chart-value {
    display: block;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.25rem;
    text-align: center;
}

.bar-chart-axis-label {
    font-size: 0.7rem;
    color: var(--color-text-tertiary);
    margin-top: 0.5rem;
}

/* Funnel chart (ordinal horizontal bars) */

.funnel-chart {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.funnel-row {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    align-items: center;
    gap: 0.75rem;
}

.funnel-label {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.funnel-track {
    background: var(--color-bg);
    border-radius: 4px;
    overflow: hidden;
}

.funnel-bar {
    height: 22px;
    border-radius: 0 4px 4px 0;
    min-width: 3px;
}

.funnel-meta {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

.funnel-count {
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.85rem;
}

.funnel-drop {
    color: var(--color-text-tertiary);
}

/* Activity heatmap (weekday x hour, GitHub-contributions style) */

.heatmap-wrap {
    overflow-x: auto;
}

.heatmap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.heatmap-row {
    display: flex;
    align-items: center;
    gap: 2px;
}

.heatmap-row-label {
    width: 56px;
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}

.heatmap-hour-label {
    flex: 1;
    min-width: 0;
    font-size: 0.6rem;
    color: var(--color-text-tertiary);
    text-align: center;
}

.heatmap-cell {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 3px;
    background: var(--color-border);
}

/* Grid cells (not the legend swatches, which keep .heatmap-cell's fixed
   size) stretch to fill the card's full width. */
.heatmap-row .heatmap-cell {
    flex: 1;
    min-width: 0;
    height: 18px;
    cursor: pointer;
}

.heatmap-row .heatmap-cell:hover {
    outline: 2px solid var(--color-text-secondary);
    outline-offset: -1px;
}

/* Validated: node scripts/validate_palette.js
   "#8fbcc2,#67a1ab,#3f7a84,#1a5868" --ordinal --surface "#ffffff" --mode light */
.heatmap-level-1 { background: #8fbcc2; }
.heatmap-level-2 { background: #67a1ab; }
.heatmap-level-3 { background: #3f7a84; }
.heatmap-level-4 { background: #1a5868; }

.heatmap-legend {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.6rem;
    font-size: 0.7rem;
    color: var(--color-text-tertiary);
}

/* Meter */

.meter {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.meter-track {
    flex: 1;
    height: 10px;
    border-radius: 999px;
    background: var(--brand-color-soft);
    overflow: hidden;
}

.meter-fill {
    height: 100%;
    border-radius: 999px;
    background: #ffffff;
}

.meter-value {
    font-weight: 600;
    white-space: nowrap;
}

/* Agenda (week grid) */

.agenda-weeks {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.agenda-week h2 {
    margin-top: 0;
    font-size: 0.95rem;
}

.agenda-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(110px, 1fr));
    min-width: 770px;
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.agenda-week-grid-wrap {
    overflow-x: auto;
    border-radius: 8px;
}

.agenda-weekday-label {
    background: var(--color-bg);
    padding: 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
}

.agenda-day-cell {
    background: var(--color-surface);
    min-height: 90px;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.agenda-day-cell-today {
    background: var(--brand-color-soft);
}

.agenda-day-number {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.agenda-day-cell-today .agenda-day-number {
    color: var(--brand-color);
}

.agenda-day-event {
    display: flex;
    flex-direction: column;
    font-size: 0.7rem;
    background: var(--color-surface);
    border: 1px solid var(--brand-color-soft);
    border-left-width: 2px;
    border-radius: 4px;
    padding: 0.2rem 0.35rem;
    overflow: hidden;
}

.agenda-day-cell-today .agenda-day-event {
    background: var(--color-surface);
}

.agenda-day-event-time {
    font-size: 0.65rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.agenda-day-event-title {
    color: var(--color-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.agenda-day-event-title:hover {
    color: var(--brand-color);
}

/* Notes */

.note-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.note-form textarea {
    flex: 1;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    min-height: 38px;
}

.leads-table-row {
    cursor: pointer;
}

.leads-table-row:hover {
    background: var(--brand-color-soft);
}

/* Conversation message bubbles */

.message-bubble {
    max-width: 70%;
}

/* white-space: pre-wrap lives here, not on .message-bubble — that div also
   wraps the sender/timestamp line, and whitespace-only text nodes between
   the two (from the template's own indentation) would render as visible
   blank lines if the whole bubble preserved whitespace. */

.message-bubble-content {
    line-height: 1.35;
    white-space: pre-wrap;
}

/* "hevo" brand-color variant of Bootstrap's utility/component classes: same
   shape as the built-in *-primary classes, but using the brand teal instead
   of Bootstrap's default blue. Add a new "-hevo" class here whenever a
   template needs the brand color where it would otherwise reach for
   *-primary. */

.text-hevo {
    color: var(--brand-color) !important;
}

.bg-hevo {
    background-color: var(--brand-color) !important;
}

.border-hevo {
    border-color: var(--brand-color) !important;
}

.text-bg-hevo {
    color: #ffffff !important;
    background-color: var(--brand-color) !important;
}

.bg-hevo-subtle {
    background-color: var(--brand-color-soft) !important;
}

/* Badges: tinted background + colored text instead of a solid fill, on top
   of whichever *-primary/-danger/etc color a template already reaches for
   (Bootstrap 5.3 exposes the subtle/emphasis shade of each as CSS vars, so
   no per-color duplication is needed here). Doesn't touch text-bg-* outside
   .badge (e.g. the bold KPI stat cards on the dashboard keep a solid fill). */

.badge.text-bg-primary,
.badge.text-bg-secondary,
.badge.text-bg-success,
.badge.text-bg-danger,
.badge.text-bg-warning,
.badge.text-bg-info,
.badge.text-bg-dark {
    font-weight: 500;
}

.badge.text-bg-primary { background-color: var(--bs-primary-bg-subtle) !important; color: var(--bs-primary-text-emphasis) !important; }
.badge.text-bg-secondary { background-color: var(--bs-secondary-bg-subtle) !important; color: var(--bs-secondary-text-emphasis) !important; }
.badge.text-bg-success { background-color: var(--bs-success-bg-subtle) !important; color: var(--bs-success-text-emphasis) !important; }
.badge.text-bg-danger { background-color: var(--bs-danger-bg-subtle) !important; color: var(--bs-danger-text-emphasis) !important; }
.badge.text-bg-warning { background-color: var(--bs-warning-bg-subtle) !important; color: var(--bs-warning-text-emphasis) !important; }
.badge.text-bg-info { background-color: var(--bs-info-bg-subtle) !important; color: var(--bs-info-text-emphasis) !important; }
.badge.text-bg-dark { background-color: var(--bs-dark-bg-subtle) !important; color: var(--bs-dark-text-emphasis) !important; }

.badge.text-bg-hevo {
    font-weight: 500;
    background-color: var(--brand-color-soft) !important;
    color: var(--brand-color) !important;
}

.btn-hevo {
    color: #ffffff;
    background-color: var(--brand-color);
    border-color: var(--brand-color);
}

.btn-hevo:hover,
.btn-hevo:focus,
.btn-hevo:active {
    color: #ffffff;
    background-color: var(--brand-color-hover);
    border-color: var(--brand-color-hover);
}

.btn-outline-hevo {
    color: var(--brand-color);
    border-color: var(--brand-color);
}

.btn-outline-hevo:hover,
.btn-outline-hevo:focus,
.btn-outline-hevo.active {
    color: #ffffff;
    background-color: var(--brand-color);
    border-color: var(--brand-color);
}

/* Sidebar nav: plain links instead of Bootstrap's nav-pills (filled,
   rounded-pill active state read as too heavy against the dark sidebar). */

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem;
}

.sidebar-nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    font-weight: 500;
}

.sidebar-nav-link i {
    width: 1rem;
    text-align: center;
    opacity: 0.85;
}

.sidebar-nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.sidebar-nav-link.active {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
}

/* Section tabs (knowledge base, account settings): underline indicator
   instead of Bootstrap's nav-tabs boxed/connected-to-content look. */

.tabs-minimal {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1rem;
}

.tabs-minimal-link {
    padding: 0.5rem 0;
    margin-bottom: -1px;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
}

.tabs-minimal-link:hover {
    color: var(--color-text);
}

.tabs-minimal-link.active {
    color: var(--brand-color);
    border-bottom-color: var(--brand-color);
    font-weight: 600;
    text-decoration: none;
}

/* Login form labels: match the muted/small style used elsewhere
   (.settings-form-card) instead of Bootstrap's default .form-label. */

.form-label {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}