/* =============================================================================
   KONTROLLE.FINANCE — Unified Component Library (V5)
   Prefix: kl-* (shared across all modules)
   Reference: docs/DESIGN_SYSTEMS/KONTROLLE_DESIGN_SYSTEM_V3.md

   TABLE OF CONTENTS:
    1.  PAGE CONTAINER
    2.  BREADCRUMB
    3.  ALERTS
    4.  PAGE HEADER
    5.  SECTION
    6.  CARD
    7.  TABLE (CRUD)
    8.  TABLE ACTIONS
    9.  BADGES
   10.  TABS
   11.  EMPTY STATE
   12.  CALLOUT
   13.  STATS
   14.  FILTER
   15.  FILTER BAR
   16.  PAGINATION
   17.  DELETE CARD
   18.  DETAIL GRID
   19.  FORM COMPONENTS
   20.  MODAL
   21.  TOAST
   22.  SPINNER
   23.  SKELETON
   24.  DATA CELL HELPERS
   25.  CSS TOOLTIP
   26.  BUTTONS (kl-btn)
   27.  INPUTS (kl-input, kl-check)
   28.  PAGE HEADER V3 ALIASES
   29.  REPORT TABLE (kl-report-table)
   30.  DATA GRID (kl-data-grid)
   31.  KPI CARD (kl-kpi)
   32.  MISSING V3 COMPONENTS
   33.  RESPONSIVE
   ============================================================================= */


/* =============================================================================
   1. PAGE CONTAINER (kl-page)
   Source: lists.css
   ============================================================================= */

.kl-page {
    position: relative;
    min-height: 100vh;
}


/* =============================================================================
   2. BREADCRUMB (kl-breadcrumb)
   Source: lists.css + forms.css
   Usage: <nav class="kl-breadcrumb">
   ============================================================================= */

nav.kl-breadcrumb,
.kl-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}

nav.kl-breadcrumb a,
.kl-breadcrumb a {
    color: var(--text-1);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast);
}

nav.kl-breadcrumb a:hover,
.kl-breadcrumb a:hover {
    color: var(--text-0);
}

.kl-breadcrumb-sep {
    color: var(--text-2);
    font-size: var(--text-xs);
}

.kl-breadcrumb-current {
    color: var(--text-1);
    font-weight: 500;
}

/* Backward compat: forms.css used kf-breadcrumb */
nav.kf-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}

nav.kf-breadcrumb a {
    color: var(--text-1);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast);
}

nav.kf-breadcrumb a:hover {
    color: var(--text-0);
}

.kf-breadcrumb-sep {
    color: var(--text-2);
    font-size: var(--text-xs);
}

.kf-breadcrumb-current {
    color: var(--text-1);
    font-weight: 500;
}


/* =============================================================================
   3. ALERTS (kl-alert)
   Source: lists.css
   TempData success/error messages
   ============================================================================= */

.kl-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
    border: 1px solid var(--border);
}

.kl-alert-icon {
    font-size: var(--text-base);
    flex-shrink: 0;
    margin-top: 2px;
}

.kl-alert-content {
    flex: 1;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.kl-alert-content strong {
    font-weight: 700;
}

.kl-alert-success {
    background: var(--pos-bg);
    border-color: var(--pos-bg);
    color: var(--pos);
}

.kl-alert-success .kl-alert-icon {
    color: var(--pos-bg0);
}

.kl-alert-danger {
    background: var(--neg-bg);
    border-color: var(--neg-bg);
    color: var(--neg);
}

.kl-alert-danger .kl-alert-icon {
    color: var(--neg-bg0);
}

.kl-alert-warning {
    background: var(--warn-bg);
    border-color: var(--warn-bg);
    color: var(--warn);
}

.kl-alert-warning .kl-alert-icon {
    color: var(--warn-bg0);
}

.kl-alert-info {
    background: var(--info-bg);
    border-color: var(--info-bg);
    color: var(--info);
}

.kl-alert-info .kl-alert-icon {
    color: var(--info-bg0);
}

/* Backward compat: forms.css used kf-alert */
.kf-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
    border: 1px solid var(--border);
}

.kf-alert i:first-child {
    font-size: var(--text-base);
    flex-shrink: 0;
    margin-top: 2px;
}

.kf-alert-danger {
    background: var(--neg-bg);
    border-color: var(--neg-bg);
    color: var(--neg);
}

.kf-alert-danger i:first-child {
    color: var(--neg-bg0);
}

.kf-alert-danger ul {
    margin: var(--space-2) 0 0 0;
    padding-left: var(--space-5);
}

.kf-alert-danger li {
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
}

.kf-alert-info {
    background: var(--info-bg);
    border-color: var(--info-bg);
    color: var(--info);
}

.kf-alert-info i:first-child {
    color: var(--info-bg0);
}

.kf-alert-success {
    background: var(--pos-bg);
    border-color: var(--pos-bg);
    color: var(--pos);
}

.kf-alert-success i:first-child {
    color: var(--pos-bg0);
}

.kf-alert-warning {
    background: var(--warn-bg);
    border-color: var(--warn-bg);
    color: var(--warn);
}

.kf-alert-warning i:first-child {
    color: var(--warn-bg0);
}


/* =============================================================================
   4. PAGE HEADER (kl-header)
   Source: lists.css + forms.css
   ============================================================================= */

.kl-header,
.kl-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--space-6);
}

.kl-header-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.kl-header-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 2px 8px;
    background: var(--accent-muted);
    color: var(--accent);
    border: 1px solid var(--accent-border);
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    width: fit-content;
    margin-bottom: var(--space-2);
}

.kl-header-badge i {
    font-size: 11px;
}

.kl-header-badge-danger {
    border-color: var(--neg);
    color: var(--neg);
}

.kl-header-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-0);
}

.kl-header-subtitle {
    margin: 0;
    font-size: 13px;
    color: var(--text-2);
    font-weight: 400;
}

.kl-header-badges {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-1);
}

.kl-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

/* Backward compat: forms.css used kf-header */
.kf-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-6);
    background: var(--surface-0);
    border: 1px solid var(--border);
}

.kf-header-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.kf-header-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: transparent;
    color: var(--text-0);
    border: 1px solid var(--text-0);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    width: fit-content;
    margin-bottom: var(--space-2);
}

.kf-header-badge i {
    font-size: var(--text-xs);
}

.kf-header-title {
    margin: 0;
    font-size: var(--text-3xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-0);
    font-family: var(--font-display);
}

.kf-header-subtitle {
    margin: 0;
    font-size: var(--text-base);
    color: var(--text-1);
    font-weight: 400;
}


/* =============================================================================
   5. SECTION (kl-section)
   Source: lists.css
   Table wrapper with header
   ============================================================================= */

.kl-section {
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: 0;
    margin-bottom: var(--space-6);
    overflow: hidden;
    box-shadow: none;
}

.kl-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.kl-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kl-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kl-section-icon i {
    font-size: 16px;
    color: var(--text-2);
}

.kl-section-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-0);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kl-section-badge,
.kl-section-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-2);
    padding: 2px 8px;
    border: 1px solid var(--border);
    background: var(--surface-0);
    border-radius: 0;
}

.kl-section-meta {
    font-size: var(--text-xs);
    color: var(--text-2);
}

.kl-section-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.kl-section-body {
    padding: var(--space-5);
}

.kl-section-body.no-padding {
    padding: 0;
}


/* =============================================================================
   6. CARD (kl-card)
   Source: forms.css (was kf-card)
   Form card with header + body
   ============================================================================= */

.kl-card {
    background: var(--surface-0);
    border: 1px solid var(--border);
    overflow: hidden;
}

.kl-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}

.kl-card-header i {
    font-size: var(--text-xl);
    color: var(--text-1);
}

.kl-card-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-0);
    margin: 0;
}

.kl-card-body {
    padding: var(--space-6);
}

/* Backward compat: forms.css used kf-card */
.kf-card {
    background: var(--surface-0);
    border: 1px solid var(--border);
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
}

.kf-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}

.kf-card-header i {
    font-size: var(--text-xl);
    color: var(--text-1);
}

.kf-card-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-0);
    margin: 0;
}

.kf-card-body {
    padding: var(--space-6);
}


/* =============================================================================
   7. TABLE CRUD (kl-table)
   Source: lists.css
   Standard CRUD table for Index views
   ============================================================================= */

.kl-table-container {
    overflow-x: auto;
}

.kl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.kl-table thead th {
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border);
    background: var(--surface-0);
    white-space: nowrap;
}

.kl-table thead th.text-right {
    text-align: right;
}

.kl-table thead th.text-center {
    text-align: center;
}

.kl-table tbody td {
    padding: 12px 16px;
    color: var(--text-0);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
    font-size: 13px;
}

.kl-table tbody td.text-right {
    text-align: right;
}

.kl-table tbody td.text-center {
    text-align: center;
}

.kl-table tbody tr:hover {
    background: var(--surface-1);
}

.kl-table tbody tr:last-child td {
    border-bottom: none;
}

/* Cell patterns */
.kl-cell-primary {
    font-weight: 500;
    color: var(--text-0);
}

.kl-cell-secondary {
    font-size: var(--text-xs);
    color: var(--text-2);
    margin-top: 1px;
}

.kl-cell-code {
    font-family: var(--font-data);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-0);
    letter-spacing: 0.02em;
}

.kl-cell-money {
    font-family: var(--font-data);
    font-weight: 600;
    white-space: nowrap;
}

.kl-cell-empty {
    color: var(--text-3);
}

.kl-cell-name {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.kl-cell-name-main {
    font-weight: 500;
    color: var(--text-0);
}

.kl-cell-name-sub {
    font-size: var(--text-xs);
    color: var(--text-2);
}


/* =============================================================================
   8. TABLE ACTIONS (kl-actions / kl-action + kl-table-actions / kl-table-action)
   Source: components.css V2 + lists.css
   ============================================================================= */

/* Compact icon-button actions (V2 — 30px) */
.kl-actions {
    display: flex;
    gap: var(--space-1);
    justify-content: flex-end;
}

.kl-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
    padding: 0;
    position: relative;
}

.kl-action:hover {
    border-color: var(--border);
    color: var(--text-0);
    background: var(--surface-1);
}

.kl-action.danger:hover {
    border-color: var(--neg-bg);
    color: var(--neg);
    background: var(--neg-bg);
}

.kl-action i {
    font-size: var(--text-sm);
}

/* Table-specific actions (lists.css — 28px) */
.kl-table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
}

.kl-table-action {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
    border: none;
    background: none;
    cursor: pointer;
    transition: color 0.1s ease;
    text-decoration: none;
}

.kl-table-action i {
    font-size: 14px;
}

.kl-table-action:hover {
    color: var(--text-0);
}

.kl-table-action.danger:hover {
    color: var(--neg);
    border-color: var(--neg-bg);
    background: var(--neg-bg);
}


/* =============================================================================
   9. BADGES (kl-badge)
   Source: lists.css (filled style) + components.css V2 (unique variants)
   ============================================================================= */

.kl-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    border: 1px solid var(--border);
    background: var(--surface-1);
    color: var(--text-1);
    white-space: nowrap;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;   /* defensive: body global cobre, mas badge é componente crítico */
}

.kl-badge-active,
.kl-badge-success {
    border-color: var(--pos-bg);
    background: var(--pos-bg);
    color: var(--pos);
}

.kl-badge-inactive,
.kl-badge-secondary {
    border-color: var(--border);
    background: var(--surface-2);
    color: var(--text-2);
}

.kl-badge-danger {
    border-color: var(--neg-bg);
    background: var(--neg-bg);
    color: var(--neg);
}

.kl-badge-warning {
    border-color: var(--warn-bg);
    background: var(--warn-bg);
    color: var(--warn);
}

.kl-badge-info {
    border-color: var(--info-bg);
    background: var(--info-bg);
    color: var(--info);
}

.kl-badge-neutral {
    border-color: var(--border);
    background: transparent;
    color: var(--text-2);
}

.kl-badge-count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Monochrome outline (V2) — base do .kl-badge já aplica uppercase + tracking + tabular-nums */
.kl-badge-mono {
    border-color: var(--text-0);
    background: transparent;
    color: var(--text-0);
}

/* V4 badge variants */
.kl-badge-draft {
    color: var(--warn);
    background: var(--warn-bg);
    border-color: rgba(157, 107, 14, 0.2);
}

.kl-badge-accent {
    color: var(--accent);
    background: var(--accent-pale);
    border-color: var(--accent-border);
}

.kl-badge-pos {
    color: var(--pos);
    background: var(--pos-bg);
    border-color: rgba(26, 122, 60, 0.2);
}

.kl-badge-neg {
    color: var(--neg);
    background: var(--neg-bg);
    border-color: rgba(192, 57, 43, 0.2);
}

/* Dot variant — colored circle before text (V2) */
.kl-badge-dot::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
}

/* Code variant — no uppercase, letter-spacing zero (legível como identificador) */
.kl-badge-code {
    text-transform: none;
    letter-spacing: 0;
    border-color: var(--border);
    color: var(--text-0);
    background: var(--surface-1);
    font-variant-numeric: tabular-nums;
}

/* Engine Source Badges (DNA Financeiro / cross-module) */
.kl-badge-bp { background: #1a1a1a; color: #fff; }
.kl-badge-hc { background: #2563eb; color: #fff; }
.kl-badge-st { background: #7c3aed; color: #fff; }
.kl-badge-rv { background: #16a34a; color: #fff; }
.kl-badge-re { background: #ea580c; color: #fff; }
.kl-badge-pj { background: #6b7280; color: #fff; }
.kl-badge-rf { background: #0891b2; color: #fff; }
.kl-badge-im { background: #ca8a04; color: #fff; }
.kl-badge-mn { background: transparent; color: var(--text-2); border: 1px solid var(--border-subtle); }


/* =============================================================================
   10. TABS (kl-tabs)
   Source: components.css V2
   Editorial underline style
   ============================================================================= */

.kl-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: var(--space-6);
}

.kl-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-1);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    cursor: pointer;
}

.kl-tab:hover {
    color: var(--text-0);
}

.kl-tab.active {
    color: var(--text-0);
    border-bottom-color: var(--text-0);
}

.kl-tab i {
    font-size: var(--text-lg);
}


/* =============================================================================
   11. EMPTY STATE (kl-empty + kl-empty-state)
   Source: components.css V2 (kl-empty with dashed border) + lists.css (kl-empty-state)
   ============================================================================= */

/* V2 — inline empty state with dashed border */
.kl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-10) var(--space-6);
    text-align: center;
    border: 1px dashed var(--border);
}

/* Full-page empty state (lists.css) */
.kl-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
    text-align: center;
}

.kl-empty-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border);
    margin-bottom: var(--space-4);
}

.kl-empty-icon i {
    font-size: var(--text-2xl);
    color: var(--text-3);
}

.kl-empty-title {
    margin: 0 0 var(--space-2) 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-0);
}

.kl-empty-desc,
.kl-empty-description {
    margin: 0 0 var(--space-4) 0;
    font-size: var(--text-sm);
    color: var(--text-1);
    max-width: 400px;
    line-height: var(--leading-relaxed);
}


/* =============================================================================
   12. CALLOUT (kl-callout)
   Source: components.css V2
   Info/warning/danger contextual boxes
   ============================================================================= */

.kl-callout {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface-1);
    border-left: 3px solid var(--text-0);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-1);
    line-height: var(--leading-relaxed);
}

.kl-callout>i {
    flex-shrink: 0;
    font-size: var(--text-lg);
    margin-top: 1px;
    color: var(--text-1);
}

.kl-callout strong {
    color: var(--text-0);
}

.kl-callout p {
    margin: var(--space-2) 0 0 0;
}

/* Info variant */
.kl-callout-info {
    border-left-color: var(--info);
}

.kl-callout-info>i {
    color: var(--info);
}

/* Warning variant */
.kl-callout-warning {
    border-left-color: var(--warn);
}

.kl-callout-warning>i {
    color: var(--warn);
}

/* Danger variant */
.kl-callout-danger {
    border-left-color: var(--neg);
}

.kl-callout-danger>i {
    color: var(--neg);
}

/* V4 callout variants */
.kl-callout-edit {
    background: var(--accent-pale);
    border-left-color: var(--accent);
}

.kl-callout-edit > i {
    color: var(--accent);
}

.kl-callout-draft {
    background: var(--warn-bg);
    border-left-color: var(--warn);
}

.kl-callout-draft > i {
    color: var(--warn);
}

/* Contextual Guide (onboarding) */
.kl-contextual-guide-body p {
    margin: var(--space-2) 0;
}

.kl-contextual-guide-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    flex-wrap: wrap;
}

.kl-contextual-guide-link {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--info);
    text-decoration: none;
}

.kl-contextual-guide-link:hover {
    text-decoration: underline;
}

/* V4 financial value utilities */
.kl-neg-val {
    color: var(--neg);
    font-weight: 500;
}

.kl-pos-val {
    color: var(--pos);
}

.kl-zero-val {
    color: var(--text-3);
}

/* Backward compat: forms.css used kf-info */
.kf-info {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
    background: var(--surface-1);
    border: 1px solid var(--border);
    font-size: var(--text-sm);
    color: var(--text-1);
}

.kf-info i:first-child {
    font-size: var(--text-base);
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--text-2);
}

.kf-info strong {
    color: var(--text-0);
}


/* =============================================================================
   13. STATS (kl-stats-grid + kl-stat-card + kl-stat-pill)
   Source: lists.css (stats-grid) + components.css V2 (stat-pill)
   ============================================================================= */

/* Stats grid — card layout for KPIs */
.kl-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.kl-stat-card {
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Colored top border accents for stat cards */
.kl-stat-accent-teal { border-top: 3px solid var(--accent); }
.kl-stat-accent-warn { border-top: 3px solid var(--warn); }
.kl-stat-accent-navy { border-top: 3px solid var(--surface-inv); }
.kl-stat-accent-pos  { border-top: 3px solid var(--pos); }
.kl-stat-accent-neg  { border-top: 3px solid var(--neg); }
.kl-stat-accent-info { border-top: 3px solid var(--info); }

.kl-stat-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.kl-stat-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.kl-stat-icon i {
    font-size: var(--text-base);
    color: var(--text-1);
}

/* Semantic stat icon variants */
.kl-stat-icon.status-success {
    border-color: var(--pos-bg);
    background: var(--pos-bg);
}

.kl-stat-icon.status-success i {
    color: var(--pos);
}

.kl-stat-icon.status-danger {
    border-color: var(--neg-bg);
    background: var(--neg-bg);
}

.kl-stat-icon.status-danger i {
    color: var(--neg);
}

.kl-stat-icon.status-warning {
    border-color: var(--warn-bg);
    background: var(--warn-bg);
}

.kl-stat-icon.status-warning i {
    color: var(--warn);
}

.kl-stat-icon.status-info {
    border-color: var(--info-bg);
    background: var(--info-bg);
}

.kl-stat-icon.status-info i {
    color: var(--info);
}

.kl-stat-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kl-stat-value {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--text-0);
    font-family: var(--font-data);
    letter-spacing: -0.02em;
    line-height: 1;
}

.kl-stat-description {
    font-size: var(--text-xs);
    color: var(--text-2);
}

/* Stat pill — inline horizontal stat for summary strips (V2) */
.kl-stat-strip {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.kl-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border);
    background: var(--surface-0);
}

.kl-stat-pill-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-1);
}

.kl-stat-pill-value {
    font-family: var(--font-data);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-0);
}


/* =============================================================================
   14. FILTER (kl-filter-*)
   Source: lists.css
   Collapsible filter sections for Index views
   ============================================================================= */

.kl-filter-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    user-select: none;
}

.kl-filter-toggle-icon {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--text-2);
    transition: transform var(--transition-fast);
}

.kl-filter-header.collapsed .kl-filter-toggle-icon {
    transform: rotate(-90deg);
}

.kl-filter-collapsible {
    max-height: 1000px;
    overflow: hidden;
    transition: max-height var(--transition-normal);
}

.kl-filter-collapsible.collapsed {
    max-height: 0;
    border-top: none;
}

.kl-filter-search {
    margin-bottom: var(--space-4);
}

.kl-filter-search-input {
    position: relative;
    display: flex;
    align-items: center;
}

.kl-filter-search-input i {
    position: absolute;
    left: var(--space-3);
    color: var(--text-2);
    font-size: var(--text-sm);
    pointer-events: none;
}

.kl-filter-search-input input {
    padding-left: var(--space-8);
    width: 100%;
}

.kl-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.kl-filter-actions {
    display: flex;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

/* Advanced filters toggle */
.kl-filter-advanced-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    user-select: none;
    margin-bottom: var(--space-4);
    padding: var(--space-2) 0;
}

.kl-filter-advanced-toggle:hover {
    color: var(--text-0);
}

.kl-filter-advanced-icon {
    font-size: var(--text-xs);
    transition: transform var(--transition-fast);
}

.kl-filter-advanced-toggle.expanded .kl-filter-advanced-icon {
    transform: rotate(180deg);
}

.kl-filter-advanced {
    max-height: 500px;
    overflow: hidden;
    transition: max-height var(--transition-normal);
}

.kl-filter-advanced.collapsed {
    max-height: 0;
}

/* Filter grid — align.kl-input with report-filter-select (FilterPanel/Opex).
   Scoped: Transactions, AuditLog, AIChatLog (views que usam .kl-filter-grid + .kl-input). */
.kl-filter-grid .kl-form-label {
    font-weight: var(--font-semibold);
}

.kl-filter-grid .kl-input {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    border-width: 2px;
    line-height: 1.5;
}

.kl-filter-grid select.kl-input {
    padding-right: var(--space-8);
}

.kl-filter-grid .kl-input:focus {
    padding: var(--space-1) var(--space-3);
    border-width: 2px;
    border-color: var(--text-0);
}

.kl-filter-grid select.kl-input:focus {
    padding-right: var(--space-8);
}

/* Active filter chips */
.kl-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.kl-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    border: 1px solid var(--border);
    background: var(--surface-1);
    color: var(--text-1);
}

.kl-filter-chip-label {
    font-weight: 700;
    color: var(--text-0);
}

.kl-filter-chip-value {
    font-weight: 500;
}

.kl-filter-chip-clear {
    cursor: pointer;
    text-decoration: none;
    color: var(--neg);
    border-color: var(--neg-bg);
    background: var(--neg-bg);
    transition: all var(--transition-fast);
}

.kl-filter-chip-clear:hover {
    background: var(--neg-bg);
    color: var(--neg);
}

/* Form group inside filter (also used standalone) */
.kl-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.kl-form-label {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* =============================================================================
   15. FILTER BAR (kl-filter-bar)
   Source: components.css V2
   Collapsible wrapper for report-filters
   ============================================================================= */

.kl-filter-bar {
    border: 1px solid var(--border);
    border-radius: 0;
    margin-bottom: 20px;
    background: var(--surface-0);
    box-shadow: none;
    /* Sem overflow:hidden no container — dropdowns absolutos (kl-cc-panel)
       precisam escapar da caixa pra exibir corretamente. O clipping de
       collapse fica no .kl-filter-bar-body. */
}

.kl-filter-bar-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    cursor: pointer;
    user-select: none;
    background: var(--surface-0);
    border-bottom: none;
    transition: background var(--transition-fast);
}

.kl-filter-bar-toggle:hover {
    background: var(--surface-1);
}

.kl-filter-bar-toggle>i:first-child {
    font-size: 14px;
    color: var(--text-2);
}

.kl-filter-bar-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-0);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kl-filter-bar-summary {
    font-family: var(--font-data);
    font-size: 11px;
    color: var(--text-3);
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 500px;
}

.kl-filter-bar-chevron {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-3);
    transition: transform 0.2s ease;
}

/* Body — visible by default, hidden when collapsed.
   overflow:hidden é necessário durante a transição de max-height para o efeito de slide;
   após expandido, deixamos visible para que dropdowns absolutos (ex.: kl-cc-panel) não
   sejam clipados pela borda do filter-bar. */
.kl-filter-bar-body {
    max-height: 600px;
    overflow: visible;
    transition: max-height 0.3s ease;
}

.kl-filter-bar.collapsed .kl-filter-bar-body {
    max-height: 0;
    overflow: hidden;
}

.kl-filter-bar.collapsed .kl-filter-bar-chevron {
    transform: rotate(180deg);
}

.kl-filter-bar.collapsed .kl-filter-bar-toggle {
    border-bottom-color: transparent;
}

/* Override internal report-filters when inside filter-bar */
.kl-filter-bar-body .report-filters {
    border: none;
    margin-bottom: 0;
    padding: 12px 16px;
    background: var(--surface-0);
    border-top: 1px solid var(--border-subtle);
}

/* Compact selects inside filter-bar */
.kl-filter-bar-body .report-filter-select {
    padding: 4px 12px;
    font-size: 12px;
}

.kl-filter-bar-body .form-control {
    padding: 6px 12px;
    font-size: 13px;
    border: 1px solid var(--border);
}

.kl-filter-bar-body .form-control:focus {
    border-color: var(--accent);
    outline: none;
}

/* Multi-select dropdown reutilizável (compartilhado entre DRE/DFC/Dashboard
   via _CostCenterMultiSelect.cshtml e FilterPanelField.IsMultiple = true).
   Botão trigger usa o mesmo estilo do .report-filter-select; o panel é
   absoluto e overlay sobre o conteúdo abaixo.
   Distinto de .kl-cc-dropdown (engines: Headcount, ServiceTools,
   RecurringEntries) — aquele é dropdown single-select com behaviors próprios. */
.kl-cc-filter {
    position: relative;
    display: inline-block;
}

.kl-cc-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    background: var(--surface-0);
    border: 1px solid var(--border);
    cursor: pointer;
    text-align: left;
    min-width: 180px;
    max-width: 280px;
}

/* Label do trigger: trunca códigos longos de CC (ex: "1001 - Centro Distribuição SP")
   pra não estourar a barra de filtros. Tooltip nativo no hover via title (set via JS). */
.kl-cc-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.kl-cc-trigger:hover {
    background: var(--surface-1);
}

.kl-cc-filter.kl-cc-open .kl-cc-trigger {
    border-color: var(--accent);
}

.kl-cc-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    /* z-index do dropdown sobe acima de sticky-header de tabelas (--z-sticky-header: 10),
       que estaria empatado com z=10 e renderizaria por cima por DOM order. */
    z-index: var(--z-dropdown);
    min-width: 240px;
    max-width: 360px;
    background: var(--surface-0);
    border: 1px solid var(--border);
    /* Sem box-shadow — DS V5 exige zero sombras decorativas; borda + z-index dão a separação. */
}

.kl-cc-options {
    max-height: 280px;
    overflow-y: auto;
    padding: var(--space-2) 0;
}

.kl-cc-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--text-0);
}

.kl-cc-option:hover {
    background: var(--surface-1);
}

.kl-cc-option input[type="checkbox"] {
    margin: 0;
}

.kl-cc-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--border);
}


/* =============================================================================
   16. PAGINATION (kl-pagination)
   Source: lists.css
   ============================================================================= */

.kl-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border);
}

.kl-pagination-info {
    font-size: var(--text-sm);
    color: var(--text-1);
}

.kl-pagination-buttons {
    display: flex;
    gap: var(--space-2);
}


/* =============================================================================
   17. DELETE CARD (kl-delete-*)
   Source: lists.css
   Confirmation card for delete views
   ============================================================================= */

.kl-delete-card {
    background: var(--surface-0);
    border: 1px solid var(--border);
    max-width: 640px;
    margin: 0 auto;
}

.kl-delete-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6);
    text-align: center;
    border-bottom: 1px solid var(--border);
    background: var(--surface-1);
}

.kl-delete-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--neg-bg);
    background: var(--neg-bg);
}

.kl-delete-icon i {
    font-size: var(--text-xl);
    color: var(--neg);
}

.kl-delete-title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-0);
}

.kl-delete-description {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-1);
    max-width: 400px;
}

.kl-delete-body {
    padding: var(--space-6);
}

.kl-delete-summary {
    padding: var(--space-4);
    background: var(--surface-1);
    border: 1px solid var(--border);
    margin-bottom: var(--space-5);
}

.kl-delete-summary-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.kl-delete-summary-name {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-0);
}

.kl-delete-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border);
    background: var(--surface-1);
}


/* =============================================================================
   18. DETAIL GRID (kl-detail-*)
   Source: lists.css
   Key-value grid for delete + details views
   ============================================================================= */

.kl-detail-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-5);
    margin-bottom: var(--space-5);
}

.kl-detail-label {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-1) 0;
}

.kl-detail-value {
    font-size: var(--text-sm);
    color: var(--text-0);
    padding: var(--space-1) 0;
}

.kl-detail-value.empty {
    color: var(--text-3);
    font-style: italic;
}


/* =============================================================================
   19. FORM COMPONENTS (kl-form-*)
   Source: forms.css (was kf-*)
   ============================================================================= */

/* Form section title */
.kl-form-section-title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-0);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--border);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.kl-form-section-title::before {
    content: '';
    width: 4px;
    height: 16px;
    background: var(--text-0);
}

.kl-form-section-title:not(:first-child) {
    margin-top: var(--space-6);
}

.kl-form-section-title i {
    font-size: var(--text-sm);
    color: var(--text-1);
}

/* Form grid — 2 columns default */
.kl-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

.kl-form-grid .full-width {
    grid-column: 1 / -1;
}

/* 3-column grid variant */
.kl-form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

.kl-form-grid-3 .full-width {
    grid-column: 1 / -1;
}

/* 1-column grid variant */
.kl-form-grid-1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

/* Form actions */
.kl-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
}

/* Form info box */
.kl-form-info {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
    background: var(--surface-1);
    border: 1px solid var(--border);
    font-size: var(--text-sm);
    color: var(--text-1);
}

.kl-form-info i:first-child {
    font-size: var(--text-base);
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--text-2);
}

.kl-form-info strong {
    color: var(--text-0);
}

/* Backward compat: forms.css used kf-* */
.kf-page {
    position: relative;
    min-height: 100vh;
}

.kf-section-title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-0);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--border);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.kf-section-title::before {
    content: '';
    width: 4px;
    height: 16px;
    background: var(--text-0);
}

.kf-section-title:not(:first-child) {
    margin-top: var(--space-6);
}

.kf-section-title i {
    font-size: var(--text-sm);
    color: var(--text-1);
}

.kf-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

.kf-grid .full-width {
    grid-column: 1 / -1;
}

.kf-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

.kf-grid-3 .full-width {
    grid-column: 1 / -1;
}

.kf-grid-1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

.kf-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
}


/* =============================================================================
   20. MODAL (kl-modal)
   Source: forms.css (was kf-modal)
   Custom pure-CSS modal (not Bootstrap)
   ============================================================================= */

.kl-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kl-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.kl-modal-content {
    position: relative;
    z-index: 2;
    background: var(--surface-0);
    border: 2px solid var(--text-0);
    width: 100%;
    max-width: fit-content;
    max-height: 90vh;
    overflow-y: auto;
}

.kl-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5);
    border-bottom: 1px solid var(--border);
}

.kl-modal-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    margin: 0;
}

.kl-modal-close {
    background: none;
    border: none;
    font-size: var(--text-lg);
    cursor: pointer;
    color: var(--text-1);
    padding: var(--space-1);
}

.kl-modal-close:hover {
    color: var(--text-0);
}

.kl-modal-body {
    padding: var(--space-5);
}

.kl-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border);
}

/* Size variants */
.kl-modal-sm .kl-modal-content {
    max-width: 400px;
}

.kl-modal-md .kl-modal-content {
    max-width: 600px;
}

.kl-modal-lg .kl-modal-content {
    max-width: 800px;
}

.kl-modal-xl .kl-modal-content {
    max-width: 1000px;
}

/* Mobile — todos os tamanhos respeitam viewport com margem lateral */
@media (max-width: 768px) {
    .kl-modal-content,
    .kl-modal-sm .kl-modal-content,
    .kl-modal-md .kl-modal-content,
    .kl-modal-lg .kl-modal-content,
    .kl-modal-xl .kl-modal-content {
        max-width: calc(100vw - 32px);
        margin: 16px;
    }
}

/* Backward compat: forms.css used kf-modal */
.kf-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kf-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.kf-modal-content {
    position: relative;
    z-index: 2;
    background: var(--surface-0);
    border: 2px solid var(--text-0);
    width: 100%;
    max-width: fit-content;
    max-height: 90vh;
    overflow-y: auto;
}

.kf-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5);
    border-bottom: 1px solid var(--border);
}

.kf-modal-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    margin: 0;
}

.kf-modal-close {
    background: none;
    border: none;
    font-size: var(--text-lg);
    cursor: pointer;
    color: var(--text-1);
    padding: var(--space-1);
}

.kf-modal-close:hover {
    color: var(--text-0);
}

.kf-modal-body {
    padding: var(--space-5);
}

.kf-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border);
}


/* =============================================================================
   21. TOAST (kl-toast)
   Source: modern.css .toast (new kl-* alias)
   ============================================================================= */

.kl-toast-container {
    position: fixed;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
    max-width: 400px;
}

.kl-toast-container.top-right {
    top: var(--space-5);
    right: var(--space-5);
}

.kl-toast-container.top-left {
    top: var(--space-5);
    left: var(--space-5);
}

.kl-toast-container.top-center {
    top: var(--space-5);
    left: 50%;
    transform: translateX(-50%);
}

.kl-toast-container.bottom-right {
    bottom: var(--space-5);
    right: var(--space-5);
}

.kl-toast-container.bottom-left {
    bottom: var(--space-5);
    left: var(--space-5);
}

.kl-toast-container.bottom-center {
    bottom: var(--space-5);
    left: 50%;
    transform: translateX(-50%);
}

.kl-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-left: 4px solid var(--text-0);
    pointer-events: all;
    animation: klToastSlideIn 0.3s ease;
}

.kl-toast-success {
    border-left-color: var(--pos);
}

.kl-toast-danger,
.kl-toast-error {
    border-left-color: var(--neg);
}

.kl-toast-warning {
    border-left-color: var(--warn);
}

.kl-toast-info {
    border-left-color: var(--info);
}

.kl-toast-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
}

.kl-toast-success .kl-toast-icon {
    color: var(--pos);
}

.kl-toast-danger .kl-toast-icon,
.kl-toast-error .kl-toast-icon {
    color: var(--neg);
}

.kl-toast-warning .kl-toast-icon {
    color: var(--warn);
}

.kl-toast-info .kl-toast-icon {
    color: var(--info);
}

.kl-toast-content {
    flex: 1;
    min-width: 0;
}

.kl-toast-title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-0);
    margin-bottom: var(--space-1);
}

.kl-toast-message {
    font-size: var(--text-sm);
    color: var(--text-1);
    line-height: var(--leading-relaxed);
}

.kl-toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-2);
    cursor: pointer;
    padding: 0;
    font-size: var(--text-base);
    transition: color var(--transition-fast);
}

.kl-toast-close:hover {
    color: var(--text-0);
}

@keyframes klToastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.kl-toast.hiding {
    animation: klToastSlideOut 0.3s ease forwards;
}

@keyframes klToastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(100%);
    }
}


/* =============================================================================
   22. SPINNER (kl-spinner)
   Source: modern.css .spinner (new kl-* alias)
   ============================================================================= */

.kl-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-top-color: var(--text-0);
    border-radius: var(--radius-circular);
    animation: klSpin 0.8s linear infinite;
}

.kl-spinner-sm {
    width: 16px;
    height: 16px;
}

.kl-spinner-lg {
    width: 40px;
    height: 40px;
    border-width: 3px;
}

@keyframes klSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Loading overlay */
.kl-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
}


/* =============================================================================
   23. SKELETON (kl-skeleton)
   Source: modern.css .skeleton (new kl-* alias)
   ============================================================================= */

.kl-skeleton {
    background: linear-gradient(90deg,
            var(--surface-1) 0%,
            var(--surface-1) 50%,
            var(--surface-1) 100%);
    background-size: 200% 100%;
    animation: klSkeletonLoading 1.5s ease-in-out infinite;
}

@keyframes klSkeletonLoading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.kl-skeleton-text {
    height: 1em;
    margin-bottom: var(--space-2);
}

.kl-skeleton-text:last-child {
    width: 80%;
    margin-bottom: 0;
}

.kl-skeleton-title {
    height: 1.5em;
    width: 60%;
    margin-bottom: var(--space-3);
}

.kl-skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-circular);
}

.kl-skeleton-button {
    height: 36px;
    width: 100px;
}

/* Table skeleton */
.kl-skeleton-table-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border);
}

.kl-skeleton-table-cell {
    flex: 1;
    height: 1em;
}

.kl-skeleton-table-cell:first-child {
    flex: 0.5;
}

.kl-skeleton-table-cell:last-child {
    flex: 0.3;
}

/* Card skeleton */
.kl-skeleton-card {
    background: var(--surface-0);
    border: 1px solid var(--border);
    padding: var(--space-5);
}

.kl-skeleton-card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.kl-skeleton-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}


/* =============================================================================
   24. DATA CELL HELPERS
   Source: components.css V2
   Inline utility classes for table cells
   ============================================================================= */

/* Numeric utility — reforça tabular-nums em containers densos (tabelas, KPI, células).
   Trava slashed-zero OFF (defesa contra heranças de outras regras).
   Usa a família única do app (IBM Plex Sans). */
.kl-num,
.kl-mono {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "zero" 0;
    letter-spacing: 0;
}
/* .kl-mono é alias legacy de .kl-num — antes apontava pra JetBrains Mono. */

/* Code label — monospace with subtle background */
.kl-code {
    display: inline-block;
    font-family: var(--font-data);
    font-size: var(--text-sm);
    padding: 1px 6px;
    background: var(--surface-1);
    border: 1px solid var(--border);
}

/* Muted placeholder — for empty/null values */
.kl-muted {
    color: var(--text-2);
}


/* =============================================================================
   25. CSS TOOLTIP (data-tooltip)
   Source: components.css V2
   Pure CSS tooltip — replaces native title attribute
   ============================================================================= */

[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: var(--text-0);
    color: var(--text-inv);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: var(--z-tooltip);
}

/* Tooltip só ativa em devices com hover real (mouse). Em touch, :hover persiste
   após tap e bloqueia interação subsequente — fenômeno conhecido. */
@media (hover: hover) {
    [data-tooltip]:hover::after {
        opacity: 1;
    }
}

/* Tooltip pointing down */
[data-tooltip-pos="bottom"]::after {
    bottom: auto;
    top: calc(100% + 6px);
}


/* =============================================================================
   26. BUTTONS (kl-btn)
   Source: V3 Design System
   Substitui TODOS os dr-btn, df-btn, bp-btn, bv-btn, rf-btn, etc.
   ============================================================================= */

.kl-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-6);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    text-transform: none;
    letter-spacing: var(--tracking-wider);
    border: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.5;
    transition: all var(--t-fast);
}

.kl-btn:active {
    transform: scale(0.975);
}

/* Primary — terracotta accent */
.kl-btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.kl-btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}

/* Secondary / Outline */
.kl-btn-outline,
.kl-btn-secondary {
    background: transparent;
    color: var(--text-1);
    border-color: var(--border);
}

.kl-btn-outline:hover,
.kl-btn-secondary:hover {
    background: var(--surface-2);
    border-color: var(--text-0);
    color: var(--text-0);
}

/* Ghost — text only */
.kl-btn-ghost {
    background: transparent;
    color: var(--text-0);
    border: 2px solid transparent;
    padding: var(--space-2) var(--space-4);
}

.kl-btn-ghost:hover {
    background: var(--surface-1);
    color: var(--text-0);
}

/* Danger */
.kl-btn-danger {
    background: var(--neg);
    color: var(--text-inv);
    border-color: var(--neg);
}

.kl-btn-danger:hover {
    background: var(--surface-0);
    color: var(--neg);
}

/* Sizes */
.kl-btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
}

.kl-btn-lg {
    padding: var(--space-3) var(--space-8);
    font-size: var(--text-base);
}

/* Icon-only */
.kl-btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text-1);
    cursor: pointer;
}

.kl-btn-icon:hover {
    border-color: var(--text-0);
    color: var(--text-0);
}


/* =============================================================================
   27. INPUTS (kl-input, kl-check)
   Source: V3 Design System
   Substitui .form-control, .form-select, .form-check-input
   ============================================================================= */

.kl-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-0);
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: 0;
    outline: none;
    transition: border-color var(--transition-fast);
}

.kl-input:focus {
    border-color: var(--accent);
    border-width: 2px;
    padding: calc(var(--space-2) - 1px) calc(var(--space-3) - 1px);
}

.kl-input::placeholder {
    color: var(--text-2);
    font-style: italic;
}

/* Select custom chevron */
select.kl-input {
    appearance: none;
    padding-right: var(--space-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23525252' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

/* Checkbox & Radio */
.kl-check {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--text-0);
    border-radius: 0;
    background: var(--surface-0);
    cursor: pointer;
    vertical-align: middle;
    flex-shrink: 0;
}

.kl-check:checked {
    background: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Form helpers compartilhados (config de templates DRE/DFC) */
.kl-form-hint {
    font-size: var(--text-xs);
    color: var(--text-2);
    margin-top: var(--space-1);
}

.kl-check-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-1);
}

.kl-check-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text-1);
}


/* =============================================================================
   28. PAGE HEADER V3 ALIASES (kl-page-title, kl-page-subtitle, etc.)
   Source: V3 Design System
   ============================================================================= */

.kl-page-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-0);
}

.kl-page-subtitle {
    margin: var(--space-1) 0 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-1);
    letter-spacing: var(--tracking-wide);
    /* text-transform: uppercase; */
}

.kl-page-header-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-1);
    margin-bottom: var(--space-2);
}

.kl-page-header-actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-shrink: 0;
}

.kl-page-header-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}


/* =============================================================================
   29. REPORT TABLE (kl-report-table)
   Source: V3 Design System
   Para DRE, DFC, Opex e relatorios financeiros
   ============================================================================= */

.kl-report-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: var(--text-sm);
}

.kl-report-table thead th {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-1);
    border-bottom: 2px solid var(--text-0);
    text-align: right;
    white-space: nowrap;
}

.kl-report-table thead th:first-child {
    text-align: left;
}

.kl-report-table tbody td {
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    text-align: right;
    white-space: nowrap;
}

.kl-report-table tbody td:first-child {
    text-align: left;
    font-weight: 400;
}

/* Number cells — monospace */
.kl-report-table td[data-value],
.kl-report-table .cell-number {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
}

/* Sticky first column */
.kl-report-table th:first-child,
.kl-report-table td:first-child {
    position: sticky;
    left: 0;
    background: inherit;
    z-index: var(--z-sticky-column);
    min-width: 240px;
    max-width: 320px;
}

/* Sticky header */
.kl-report-table thead {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky-header);
    background: var(--text-inv);
}

/* Hover */
.kl-report-table tbody tr:hover td {
    background: var(--surface-1);
}

/* --- Table Variants --- */

.kl-report-table-container {
    overflow-x: auto;
}

/* Monthly comparison — tighter columns */
.kl-report-table.monthly th {
    position: sticky;
    top: 0;
}

.kl-report-table.monthly thead {
    position: sticky;
    top: 0;
    z-index: calc(var(--z-sticky-header) + 1);
}

/* Compact — tighter padding for dense data */
.kl-report-table.compact th {
    padding: var(--space-2);
}

.kl-report-table.compact td {
    padding: var(--space-1) var(--space-2);
}

.kl-report-table.compact th:first-child {
    min-width: 200px;
}

/* --- Column Types --- */

.kl-report-table .col-description {
    text-align: left;
    font-family: var(--font-body);
    min-width: 250px;
}

.kl-report-table th.col-description {
    text-align: left;
}

.kl-report-table .col-value {
    text-align: right;
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    min-width: 100px;
}

.kl-report-table .col-month {
    min-width: 70px;
}

.kl-report-table .col-ytd {
    min-width: 90px;
    background: var(--surface-1);
    font-weight: var(--font-semibold);
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
}

.kl-report-table th.col-ytd {
    font-weight: var(--font-black);
}

/* Sticky first column — explicit.col-description selector for monthly */
.kl-report-table.monthly .col-description {
    position: sticky;
    left: 0;
    z-index: var(--z-sticky-column);
}

.kl-report-table.monthly th.col-description {
    z-index: var(--z-sticky-header);
    background: var(--text-inv);
}

/* --- Row Types — Unified for DRE, DFC, and all financial reports --- */

/* Detail row — standard data row */
.kl-report-table .row-detail td {
    background: var(--text-inv);
}

.kl-report-table .row-detail.level-1 td:first-child {
    font-weight: var(--font-bold);
}

.kl-report-table .row-detail.level-2 td:first-child {
    padding-left: var(--space-8);
}

.kl-report-table .row-detail.level-3 td:first-child {
    padding-left: var(--space-12);
}

/* Subtotal row — section subtotal, semibold with top border */
.kl-report-table .row-subtotal td {
    background: var(--text-inv);
    font-weight: var(--font-semibold);
    border-top: 1px solid var(--border);
}

/* Total row — section total, bold with double black borders */
.kl-report-table .row-total td {
    background: var(--surface-1);
    font-weight: var(--font-bold);
    border-top: 2px solid var(--text-0);
    border-bottom: 2px solid var(--text-0);
}

/* Percentage row — A.V./A.H. analysis, small italic secondary */
.kl-report-table .row-percentage td {
    background: var(--text-inv);
    font-weight: var(--font-semibold);
    color: var(--text-1);
    font-size: var(--text-xs);
    font-style: italic;
}

/* Separator row — visual spacer between sections */
.kl-report-table .row-separator td {
    height: 8px;
    background: var(--text-inv);
    border: none;
}

/* Grand total row — fully inverted black (DRE result, net income) */
.kl-report-table .row-grand-total td {
    background: var(--text-0);
    color: var(--text-inv);
    font-weight: var(--font-bold);
    border-color: var(--text-0);
}

/* Balance row — inverted black (DFC closing balance, same visual as grand-total) */
.kl-report-table .row-balance td {
    background: var(--text-0);
    color: var(--text-inv);
    font-weight: var(--font-bold);
    border: none;
}

/* Sticky column backgrounds per row type — inherit doesn't work reliably */
.kl-report-table .row-detail td.col-description {
    background: var(--text-inv);
}

.kl-report-table .row-subtotal td.col-description {
    background: var(--text-inv);
}

.kl-report-table .row-total td.col-description {
    background: var(--surface-1);
}

.kl-report-table .row-percentage td.col-description {
    background: var(--text-inv);
}

.kl-report-table .row-grand-total td.col-description {
    background: var(--text-0);
    color: var(--text-inv);
}

.kl-report-table .row-balance td.col-description {
    background: var(--text-0);
    color: var(--text-inv);
}

/* Disable hover background override on inverted rows */
.kl-report-table tbody .row-grand-total:hover td,
.kl-report-table tbody .row-balance:hover td {
    background: var(--text-0);
}

.kl-report-table tbody .row-separator:hover td {
    background: var(--text-inv);
}

/* --- Variance & Value Semantics --- */

.variance-positive {
    color: var(--pos);
}

.variance-negative {
    color: var(--neg);
}

/* --- Report Footer --- */

.kl-report-footer {
    padding: var(--space-4) var(--space-5);
    background: var(--surface-1);
    border-top: 1px solid var(--border);
    font-size: var(--text-sm);
    color: var(--text-1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- Backward Compatibility:.report-table (legacy from modern.css) --- */

.report-table-container {
    overflow-x: auto;
}

.report-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: var(--text-sm);
}

.report-table th {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    text-align: center;
    padding: var(--space-3);
    white-space: nowrap;
    color: var(--text-1);
    background: var(--text-inv);
    border-bottom: 2px solid var(--text-0);
}

.report-table.primary th,
.report-table.info th {
    background: var(--text-inv);
    color: var(--text-1);
    border: none;
    border-bottom: 2px solid var(--text-0);
}

.report-table th.col-description {
    text-align: left;
    min-width: 250px;
}

.report-table th.col-value {
    min-width: 100px;
}

.report-table th.col-month {
    min-width: 70px;
}

.report-table th.col-ytd {
    min-width: 90px;
    font-weight: var(--font-black);
}

.report-table.primary th.col-ytd,
.report-table.info th.col-ytd {
    background: var(--surface-1);
}

.report-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    border-left: none;
    border-right: none;
    white-space: nowrap;
}

.report-table td.col-value {
    text-align: right;
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
}

.report-table td.col-description {
    text-align: left;
    font-family: var(--font-body);
}

.report-table td.col-ytd {
    background: var(--surface-1);
    font-weight: var(--font-semibold);
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
}

.report-table.monthly th.col-description,
.report-table.monthly td.col-description {
    position: sticky;
    left: 0;
    z-index: var(--z-sticky-column);
}

.report-table.monthly th.col-description {
    z-index: var(--z-sticky-header);
}

.report-table.primary.monthly th.col-description,
.report-table.info.monthly th.col-description {
    background: var(--text-inv);
}

.report-table.monthly thead {
    position: sticky;
    top: 0;
    z-index: calc(var(--z-sticky-header) + 1);
}

.report-table.monthly th {
    position: sticky;
    top: 0;
}

.report-table.compact {
    font-size: var(--text-sm);
}

.report-table.compact th {
    padding: var(--space-2);
}

.report-table.compact td {
    padding: var(--space-1) var(--space-2);
}

.report-table.compact th.col-description {
    min-width: 200px;
}

.report-table tbody tr:hover td {
    background: var(--surface-1);
}

/* Preserve inverted rows on hover */
.report-table tbody tr.dfc-balance-row:hover td {
    background: var(--text-0) !important;
    color: var(--text-inv) !important;
}

/* --- Backward Compatibility: DRE row types (dre-* → row-*) --- */

.dre-detail-row td {
    background: var(--text-inv);
}

.dre-detail-row.level-1 td.col-description {
    font-weight: var(--font-bold);
}

.dre-detail-row.level-2 td.col-description {
    padding-left: var(--space-8);
}

.dre-detail-row.level-3 td.col-description {
    padding-left: var(--space-12);
}

.dre-subtotal-row td {
    background: var(--text-inv);
    font-weight: var(--font-semibold);
    border-top: 1px solid var(--border);
}

.dre-total-row td {
    background: var(--surface-1);
    font-weight: var(--font-bold);
    border-top: 2px solid var(--text-0);
    border-bottom: 2px solid var(--text-0);
}

.dre-percentage-row td,
.dfc-percentage-row td {
    background: var(--text-inv);
    font-weight: var(--font-semibold);
    color: var(--text-1);
    font-size: var(--text-xs);
    font-style: italic;
}

.dre-separator-row td {
    height: 8px;
    background: var(--text-inv);
    border: none;
}

.dre-detail-row td.col-description {
    background: var(--text-inv);
}

.dre-subtotal-row td.col-description {
    background: var(--text-inv);
}

.dre-total-row td.col-description {
    background: var(--surface-1);
}

.dre-percentage-row td.col-description,
.dfc-percentage-row td.col-description {
    background: var(--text-inv);
}

.dre-total-row.grand-total td {
    background: var(--text-0);
    color: var(--text-inv);
    border-color: var(--text-0);
}

.dre-total-row.grand-total td.col-description {
    background: var(--text-0);
}

/* --- Backward Compatibility: DFC row types (dfc-* → row-*) --- */

.dfc-detail-row td {
    background: var(--text-inv);
}

.dfc-detail-row.level-1 td.col-description {
    font-weight: var(--font-bold);
}

.dfc-detail-row.level-2 td.col-description {
    padding-left: var(--space-8);
}

.dfc-detail-row.level-3 td.col-description {
    padding-left: var(--space-12);
}

.dfc-subtotal-row td {
    background: var(--text-inv);
    font-weight: var(--font-semibold);
    border-top: 1px solid var(--border);
}

.dfc-total-row td {
    background: var(--surface-1);
    font-weight: var(--font-bold);
    border-top: 2px solid var(--text-0);
    border-bottom: 2px solid var(--text-0);
}

.dfc-balance-row td {
    background: var(--text-0);
    color: var(--text-inv);
    font-weight: var(--font-bold);
    border: none;
}

.dfc-separator-row td {
    height: 8px;
    background: var(--text-inv);
    border: none;
}

.dfc-detail-row td.col-description {
    background: var(--text-inv);
}

.dfc-subtotal-row td.col-description {
    background: var(--text-inv);
}

.dfc-total-row td.col-description {
    background: var(--surface-1);
}

.dfc-balance-row td.col-description {
    background: var(--text-0);
    color: var(--text-inv);
}

/* Disable hover on inverted legacy rows */
.dre-total-row.grand-total:hover td {
    background: var(--text-0);
}

.dfc-balance-row:hover td {
    background: var(--text-0);
    color: var(--text-inv);
}

.dre-separator-row:hover td {
    background: var(--text-inv);
}

.dfc-separator-row:hover td {
    background: var(--text-inv);
}

/* Legacy report footer alias */
.report-footer {
    padding: var(--space-4) var(--space-5);
    background: var(--surface-1);
    border-top: 1px solid var(--border);
    font-size: var(--text-sm);
    color: var(--text-1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* =============================================================================
   30. DATA GRID (kl-data-grid)
   Source: V3 Design System
   Para grids editaveis (Revenue, Budget Planner)
   ============================================================================= */

.kl-data-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.kl-data-grid th {
    background: transparent;
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--text-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
}

.kl-data-grid td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.kl-data-grid td input {
    width: 100%;
    border: 1px solid transparent;
    padding: var(--space-1) var(--space-2);
    font-family: var(--font-data);
    font-size: var(--text-sm);
    text-align: right;
    background: transparent;
}

.kl-data-grid td input:focus {
    border-color: var(--text-0);
    background: var(--text-inv);
    outline: none;
}


/* =============================================================================
   31. KPI CARD (kl-kpi)
   Source: V3 Design System
   ============================================================================= */

.kl-kpi {
    background: var(--text-inv);
    border: 1px solid var(--border);
    padding: var(--space-5);
    transition: border-color var(--transition-fast);
}

.kl-kpi:hover {
    border-color: var(--text-0);
}

.kl-kpi-label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--text-1);
    margin-bottom: var(--space-2);
}

.kl-kpi-value {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 500;
    color: var(--text-0);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: var(--space-2);
    font-variant-numeric: tabular-nums;   /* defensive: KPI hero é elemento crítico */
}

.kl-kpi-comparison {
    font-family: var(--font-data);
    font-size: var(--text-xs);
    color: var(--text-1);
    font-variant-numeric: tabular-nums;   /* defensive */
}

.kl-kpi-comparison.positive {
    color: var(--pos);
}

.kl-kpi-comparison.negative {
    color: var(--neg);
}

/* KPI strip — horizontal row of kl-kpi cards */
.kl-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}


/* =============================================================================
   32. MISSING V3 COMPONENTS (form-section, form-error, cell helpers, etc.)
   Source: V3 Design System
   ============================================================================= */

/* Form section divider */
.kl-form-section {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-0);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border);
    margin: var(--space-6) 0 var(--space-4);
}

/* Form error */
.kl-form-error {
    font-size: var(--text-xs);
    color: var(--neg);
}

/* Cell main/sub — V3 simplified aliases */
.kl-cell-main {
    display: block;
    font-weight: 500;
}

.kl-cell-sub {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-1);
}

/* Table column actions — minimal width */
.kl-table-col-actions {
    width: 1%;
    white-space: nowrap;
}

/* Card variants */
.kl-card-subtle {
    border-color: var(--border);
}

.kl-card-inverted {
    background: var(--text-0);
    color: var(--text-inv);
    border: none;
}

.kl-card-inverted .kl-card-title {
    color: var(--text-inv);
}

/* Callout success variant */
.kl-callout-success {
    border-left-color: var(--pos);
}

.kl-callout-success>i {
    color: var(--pos);
}

/* Validation summary */
.kl-validation-summary {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--neg);
    border-left: 3px solid var(--neg);
    background: var(--neg-bg);
    color: var(--neg);
    margin-bottom: var(--space-5);
    font-size: var(--text-sm);
}

.kl-validation-summary ul {
    margin: var(--space-1) 0 0;
    padding-left: var(--space-5);
}

.kl-validation-summary li {
    margin-bottom: var(--space-1);
}

/* Modal backdrop (V3 alternative structure) */
.kl-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =============================================================================
   33. RESPONSIVE
   ============================================================================= */

/* --- 1200px --- */
@media (max-width: 1200px) {
    .kl-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- 768px --- */
@media (max-width: 768px) {

    /* Page header */
    .kl-header,
    .kl-page-header,
    .kf-header {
        flex-direction: column;
        gap: var(--space-4);
        padding: var(--space-4) var(--space-5);
    }

    .kl-header-title,
    .kf-header-title {
        font-size: var(--text-2xl);
    }

    .kl-header-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .kl-header-actions > .kl-btn,
    .kl-header-actions > .dr-options-dropdown,
    .kl-header-actions > .dr-options-dropdown > .kl-btn {
        flex: 0 1 auto;
    }

    /* Table */
    .kl-table thead th,
    .kl-table tbody td {
        padding: var(--space-2) var(--space-3);
    }

    /* Filters */
    .kl-filter-grid {
        grid-template-columns: 1fr;
    }

    /* Section */
    .kl-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    /* Pagination */
    .kl-pagination {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
    }

    /* Delete card */
    .kl-delete-card {
        max-width: none;
    }

    .kl-delete-footer {
        flex-direction: column-reverse;
    }

    .kl-delete-footer .kl-btn {
        width: 100%;
    }

    /* Detail grid */
    .kl-detail-grid {
        grid-template-columns: 1fr;
    }

    /* Form card */
    .kl-card-body,
    .kf-card-body {
        padding: var(--space-4);
    }

    .kl-card-header,
    .kf-card-header {
        padding: var(--space-4) var(--space-5);
    }

    /* Form grid */
    .kl-form-grid,
    .kl-form-grid-3,
    .kf-grid,
    .kf-grid-3 {
        grid-template-columns: 1fr;
    }

    /* Form actions */
    .kl-form-actions,
    .kf-actions {
        flex-direction: column-reverse;
    }

    .kl-form-actions .kl-btn,
    .kf-actions .btn {
        width: 100%;
    }

    /* Tabs */
    .kl-tabs {
        overflow-x: auto;
    }

    .kl-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* --- 576px --- */
@media (max-width: 576px) {

    .kl-header,
    .kl-page-header,
    .kf-header {
        padding: var(--space-3) var(--space-4);
    }

    .kl-header-title,
    .kf-header-title {
        font-size: var(--text-xl);
    }

    .kl-stats-grid {
        grid-template-columns: 1fr;
    }

    .kl-section-body {
        padding: var(--space-3);
    }

    .kl-section-header {
        padding: var(--space-3) var(--space-4);
    }

    .kl-empty-state {
        padding: var(--space-8) var(--space-4);
    }

    nav.kl-breadcrumb,
    nav.kf-breadcrumb {
        flex-wrap: wrap;
    }

    .kl-filter-actions {
        flex-direction: column;
    }

    .kl-filter-actions .kl-btn {
        width: 100%;
    }

    .kl-delete-body {
        padding: var(--space-4);
    }

    .kl-delete-footer {
        padding: var(--space-3) var(--space-4);
    }

    .kl-card-body,
    .kf-card-body {
        padding: var(--space-3);
    }
}


/* ==========================================================================
   31. SIDE PANEL (kl-panel)
   Right-sliding panel for complex multi-section content.
   Sizes: kl-panel-md (50vw), kl-panel-lg (70vw), kl-panel-full (100vw - sidebar)
   ========================================================================== */

.kl-panel {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;
    align-items: stretch;
    justify-content: flex-end;
}

/* Overlay */
.kl-panel-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.kl-panel-open .kl-panel-overlay {
    opacity: 1;
}

/* Content slide container */
.kl-panel-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 70vw;
    max-width: 100vw;
    height: 100%;
    min-height: 0;
    background: var(--surface-0);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.kl-panel-open .kl-panel-content {
    transform: translateX(0);
}

/* Size variants */
.kl-panel-md .kl-panel-content {
    width: 50vw;
}

.kl-panel-lg .kl-panel-content {
    width: 70vw;
}

.kl-panel-full .kl-panel-content {
    width: calc(100vw - var(--sidebar-width, 240px));
}

/* Header — fixed */
.kl-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.kl-panel-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    margin: 0;
    color: var(--text-0);
}

.kl-panel-subtitle {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-3);
    margin: 2px 0 0;
    letter-spacing: 0.03em;
}

.kl-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: var(--text-xl);
    line-height: 1;
    color: var(--text-1);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.kl-panel-close:hover {
    background: var(--text-0);
    color: var(--surface-0);
}

/* Body — scrollable */
.kl-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-5);
}

/* Footer — fixed */
.kl-panel-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .kl-panel-content,
    .kl-panel-md .kl-panel-content,
    .kl-panel-lg .kl-panel-content {
        width: 85vw;
    }
}

/* Sidebar esconde em 992px — kl-panel-full não pode subtrair largura inexistente */
@media (max-width: 992px) {
    .kl-panel-full .kl-panel-content {
        width: 100vw;
    }
}

@media (max-width: 768px) {
    .kl-panel-content,
    .kl-panel-md .kl-panel-content,
    .kl-panel-lg .kl-panel-content,
    .kl-panel-full .kl-panel-content {
        width: 100vw;
    }

    .kl-panel-header {
        padding: var(--space-3) var(--space-4);
    }

    .kl-panel-body {
        padding: var(--space-4);
    }

    .kl-panel-footer {
        padding: var(--space-3) var(--space-4);
    }
}


/* ==========================================================================
   32. FOCUS STATES (V4 — terracotta accent)
   ========================================================================== */

/*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
} */

.kl-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.form-control:focus-visible,
.form-select:focus-visible {
    outline: none;
    border-color: var(--accent);
}

.app-sidebar :focus-visible {
    outline-color: var(--text-inv);
}


/* ==========================================================================
   33. PAGE ENTRY ANIMATION (V4)
   ========================================================================== */

.app-content {
    animation: var(--anim-page);
}


/* ==========================================================================
   34. ANNOUNCEMENT BANNERS (HUB-0004)
   ========================================================================== */

.kl-announcement-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    width: 100%;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
}

.kl-announcement-banner > .bi {
    flex-shrink: 0;
    font-size: 1rem;
}

.kl-announcement-body {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    align-items: baseline;
}

.kl-announcement-body strong {
    font-weight: 600;
}

.kl-announcement-more {
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    color: inherit;
    opacity: 0.8;
    white-space: nowrap;
}

.kl-announcement-more:hover {
    opacity: 1;
    text-decoration: underline;
}

.kl-announcement-close {
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-1);
    color: inherit;
    opacity: 0.6;
    line-height: 1;
}

.kl-announcement-close:hover {
    opacity: 1;
}

/* Variantes por tipo */
.kl-announcement-info {
    background: var(--info-bg);
    color: var(--info);
}

.kl-announcement-warning {
    background: var(--warn-bg);
    color: var(--warn);
}

.kl-announcement-maintenance {
    background: var(--neg-bg);
    color: var(--neg);
}

.kl-announcement-feature {
    background: var(--accent-pale);
    color: var(--accent);
}

.kl-announcement-changelog {
    background: var(--surface-1);
    color: var(--text-2);
}

/* ==========================================================================
   COLLAPSIBLE — Toggle genérico para seções expansíveis (changelog, anúncios)
   ========================================================================== */

.kl-collapsible-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.kl-collapsible-chevron {
    font-size: var(--text-sm);
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.kl-collapsible-toggle.open .kl-collapsible-chevron {
    transform: rotate(90deg);
}

.kl-collapsible-content {
    display: none;
}

.kl-collapsible-content.open {
    display: block;
}

/* =============================================================================
   25. ADJUSTMENT PANEL (shared by multi-year-adjustments.js)
   Extracted from projections.css — reusable across Projections, What-If, etc.
   ============================================================================= */

.adj-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    background: var(--surface-0);
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

.adj-panel-header:hover {
    background: var(--surface-1);
}

.adj-panel-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--text-0);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider, 0.05em);
}

.adj-panel-title i {
    font-size: var(--text-base);
    color: var(--text-1);
}

.adj-panel-subtitle {
    font-weight: normal;
    font-size: var(--text-xs);
    color: var(--text-2);
    margin-left: var(--space-2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide, 0.025em);
}

.adj-panel-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--text-2);
    text-transform: lowercase;
    letter-spacing: var(--tracking-wide, 0.025em);
}

.adj-panel-toggle i {
    transition: transform 0.2s ease;
}

.adj-panel-body {
    padding: var(--space-4);
    background: var(--surface-1);
}

.adj-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--text-0);
    color: var(--text-inv);
    font-family: var(--font-data);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
}

.adj-add-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border: 1px dashed var(--border);
    background: var(--surface-0);
    color: var(--text-0);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide, 0.025em);
    transition: all 0.15s;
}

.adj-add-btn:hover {
    background: var(--text-0);
    color: var(--text-inv);
    border-color: var(--text-0);
    border-style: solid;
}

.adj-card {
    border: 1px solid var(--border);
    margin-bottom: var(--space-2);
    background: var(--surface-0);
    overflow: hidden;
}

.adj-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-0);
    border-bottom: 1px solid var(--border);
}

.adj-name-input {
    flex: 1;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    background: var(--surface-0);
}

.adj-name-input:focus {
    outline: none;
    border-color: var(--text-0);
    border-width: 2px;
    padding: calc(var(--space-1) - 1px) calc(var(--space-2) - 1px);
}

.adj-type-select {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    background: var(--surface-0);
    min-width: 130px;
}

.adj-type-select:focus {
    outline: none;
    border-color: var(--text-0);
}

.adj-remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.15s;
}

.adj-remove-btn:hover {
    border-color: var(--neg);
    color: var(--neg);
}

.adj-entries-table {
    width: 100%;
    font-size: var(--text-xs);
    border-collapse: collapse;
}

.adj-entries-table th {
    padding: var(--space-1) var(--space-2);
    text-align: left;
    font-family: var(--font-body);
    font-weight: var(--font-semibold);
    color: var(--text-2);
    border-bottom: 1px solid var(--border);
    background: var(--surface-1);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide, 0.025em);
}

.adj-entries-table td {
    padding: var(--space-1) var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
}

.adj-entries-table select,
.adj-entries-table input {
    width: 100%;
    padding: 3px 6px;
    border: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    background: var(--surface-0);
}

.adj-entries-table select:focus,
.adj-entries-table input:focus {
    outline: none;
    border-color: var(--text-0);
}

.adj-value-input {
    text-align: right;
    font-family: var(--font-data) !important;
    width: 100px !important;
}

.adj-entry-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.15s;
}

.adj-entry-remove:hover {
    border-color: var(--neg);
    color: var(--neg);
}

.adj-add-entry-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--space-1) var(--space-2);
    margin: var(--space-2) var(--space-3);
    border: none;
    background: transparent;
    color: var(--text-0);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: color 0.15s;
}

.adj-add-entry-btn:hover {
    text-decoration: underline;
}

/* ==========================================================================
   CC Multi-Select Dropdown (Engine generation panels)
   Used by: Headcount, ServiceTools, RecurringEntries Values
   ========================================================================== */
.kl-cc-dropdown {
    position: relative;
}

.kl-cc-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    background: var(--surface-0);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--text-0);
    cursor: pointer;
    text-align: left;
}

.kl-cc-dropdown-toggle:hover {
    border-color: var(--border-strong);
}

.kl-cc-dropdown-toggle i {
    font-size: 10px;
    color: var(--text-2);
}

.kl-cc-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-top: none;
    max-height: 240px;
    overflow-y: auto;
}

.kl-cc-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--text-0);
    cursor: pointer;
    user-select: none;
}

.kl-cc-dropdown-item:hover {
    background: var(--surface-1);
}

.kl-cc-dropdown-item input[type="checkbox"] {
    accent-color: var(--accent);
}

.kl-cc-dropdown-item--all {
    font-weight: 600;
}

.kl-cc-dropdown-divider {
    border-top: 1px solid var(--border);
    margin: 0;
}

/* ==========================================================================
   Checkbox grid — listas de checkboxes inline para escopo (cargos, CCs, etc).
   Compartilhado entre módulos. DS V5: radius 0, sem sombra, fonte UI.
   ========================================================================== */
.kl-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.kl-checkbox-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    background: var(--surface-0);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--text-0);
    cursor: pointer;
    user-select: none;
}

.kl-checkbox-item:hover {
    background: var(--surface-1);
}

.kl-checkbox-item input[type="checkbox"] {
    accent-color: var(--accent);
    flex-shrink: 0;
}

/* Inline form — útil para botões de ação dentro de células de tabela. */
.kl-inline-form {
    display: inline;
    margin: 0;
}

/* Badge inline (dentro de botão, perto de label) — contagem compacta. */
.kl-badge-inline {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 0 var(--space-2);
    background: var(--accent);
    color: var(--text-inv);
    font-family: var(--font-data);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.5;
}

/* Empty state compacto (dentro de painéis). */
.kl-empty-compact {
    padding: var(--space-4) var(--space-3);
    text-align: center;
}

/* ==========================================================================
   Utilities — visibility por breakpoint
   ========================================================================== */
.kl-mobile-only { display: none; }
@media (max-width: 768px) {
    .kl-mobile-only { display: flex; }
}

/* ==========================================================================
   iOS: previne auto-zoom em focus de input quando font-size <16px.
   Aplica a inputs/selects/textareas em mobile (≤768px).
   ========================================================================== */
@media (max-width: 768px) {
    .kl-input,
    .kl-input-sm,
    .form-control,
    .report-filter-select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    select,
    textarea {
        font-size: 16px;
    }
}

/* ==========================================================================
   Modal em landscape com teclado virtual: altura útil < 500px corta conteúdo.
   Reduz max-height pra modal continuar utilizável em iPhone landscape com
   teclado aberto (≈230px vertical livre).
   ========================================================================== */
@media (max-height: 500px) {
    .kl-modal-content,
    .kl-modal-sm .kl-modal-content,
    .kl-modal-md .kl-modal-content,
    .kl-modal-lg .kl-modal-content,
    .kl-modal-xl .kl-modal-content {
        max-height: 95vh;
    }
    .kl-modal-body {
        max-height: calc(95vh - 120px);
        overflow-y: auto;
    }
}