/* Design Tokens Globais — carregado em todas as páginas via header.html */

:root {
    /* Primary Brand Color */
    /* --primary-color: #4a6cf7; */
    --primary-dark: #3b5bdb;
    --primary-light: rgba(74, 108, 247, 0.1);
    --purple: #6614e9;
    --purple-color: #8b5cf6;

    /* Status Badge Colors */
    --status-open-bg: #ffc107;
    --status-open-text: #fff;

    --status-reviewing-bg: #17a2b8;
    --status-reviewing-text: #fff;

    --status-implemented-bg: #28a745;
    --status-implemented-text: #fff;

    --status-dismissed-bg: #dc3545;
    --status-dismissed-text: #fff;

    --status-default-bg: #6c757d;
    --status-default-text: #fff;

    /* KPI Card Colors (BigNumbers) */
    --kpi-total-border: #007bff;
    --kpi-total-text: #2e59d9;
    --kpi-total-shadow: rgba(78, 115, 223, 0.3);
    --kpi-total-hover-shadow: 0 0.5rem 1rem rgba(78, 115, 223, 0.3);
    --kpi-open-border: #ffc107;
    --kpi-open-text: #ff9800;

    --kpi-reviewing-border: #17a2b8;
    --kpi-reviewing-text: #17a2b8;

    --kpi-implemented-border: #28a745;
    --kpi-implemented-text: #20c997;

    --kpi-icon-opacity-inactive: 0.15;
    --kpi-icon-opacity-active: 0.7;

    /* Card & Modal Colors */
    --card-border-color: #4a6cf7;
    --card-header-bg: #f8f9fa;
    --card-content-bg: #f8f9fa;
    --card-text-color: #333;

    /* Card Border & Shadow */
    --card-border: #e2e8f0;
    --card-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    --card-radius: 1rem;

    /* Button Colors */
    --btn-primary-table-bg: #17a2b8;
    --btn-primary-table-text: #fff;
    --btn-update-bg: #4a6cf7;
    --btn-update-text: #fff;
    --btn-close-bg: #f8f9fa;
    --btn-close-text: #333;

    /* Chart Colors */
    --chart-line-color: #4E73DF;
    --chart-line-fill: rgba(78, 115, 223, 0.1);
    --chart-bar-color: #28a745;
    --chart-doughnut-text: #333;

    /* Dashboard Title Colors */
    --dashboard-title-color: #495057;
    --dashboard-header-border: #4a6cf7;
    --dashboard-header-bg: #f8f9fa;

    /* Hover & Interactive */
    --kpi-hover-scale: 1.02;
    --kpi-hover-shadow-active: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Card wrapper padrão (AG Grid e Charts) */
.card-tabela {
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

.card-tabela .card-header {
    border: none;
    background: transparent;
    padding: 1rem 1.25rem;
}

.card-tabela .card-header h6 {
    font-weight: 600;
    color: var(--dashboard-title-color);
}

.card-tabela .card-header h6 i {
    color: var(--purple-color);
}

/* Variante flex: card-header com controles à direita */
.card-tabela .card-header.card-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.card-tabela .card-header.card-header-flex h6 {
    flex-grow: 1;
}

/* card-body para gráficos (canvas) */
.card-chart-body {
    position: relative;
}

/* AG Grid dentro do card */
.card-tabela .ag-theme-quartz {
    width: 100%;
}

.ag-h-400 { height: 400px; }
.ag-h-500 { height: 500px; }
.ag-h-600 { height: 600px; }

/* Botão de ação nas colunas da tabela */
.btn-table-action {
    background-color: var(--btn-primary-table-bg);
    color: var(--btn-primary-table-text) !important;
    border-color: var(--btn-primary-table-bg);
}

.btn-table-action:hover,
.btn-table-action:focus {
    opacity: 0.85;
    background-color: var(--btn-primary-table-bg);
    color: var(--btn-primary-table-text) !important;
    border-color: var(--btn-primary-table-bg);
}

/* Status Badges — pills de status nas tabelas AG Grid */
.pill-badge-table {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.pill-badge-table-open {
    background-color: var(--status-open-bg);
    color: var(--status-open-text);
}

.pill-badge-table-reviewing {
    background-color: var(--status-reviewing-bg);
    color: var(--status-reviewing-text);
}

.pill-badge-table-implemented {
    background-color: var(--status-implemented-bg);
    color: var(--status-implemented-text);
}

.pill-badge-table-dismissed {
    background-color: var(--status-dismissed-bg);
    color: var(--status-dismissed-text);
}

.pill-badge-table-default {
    background-color: var(--status-default-bg);
    color: var(--status-default-text);
}