/* Vedox Finance - Tailwind CSS companion styles */

/* Period button active state */
.period-btn.active {
    background-color: #3f51b5 !important;
    color: #fff !important;
    border-color: #3f51b5 !important;
}

/* Data table styles */
.data-table {
    border-collapse: collapse;
}

.data-table th {
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 2px solid #e5e7eb;
}

.data-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f3f4f6;
}

/* Light mode table colors */
.data-table th {
    background: #f9fafb;
    color: #6b7280;
}

.data-table tbody tr:hover {
    background: #f8faff;
}

.data-table tfoot td {
    padding: 0.6rem 0.75rem;
    border-top: 2px solid #e5e7eb;
    font-weight: 700;
    background: #f9fafb;
}

.totals-row .total-label {
    font-weight: 700;
    color: #374151;
}

.totals-row .total-value {
    font-weight: 700;
    color: #1976d2;
}

/* Dark mode table colors */
.dark .data-table th {
    background: #1f2937;
    color: #9ca3af;
    border-bottom-color: #374151;
}

.dark .data-table td {
    border-bottom-color: #1f2937;
}

.dark .data-table tbody tr:hover {
    background: #1e293b;
}

.dark .data-table tfoot td {
    border-top-color: #374151;
    background: #1f2937;
}

.dark .totals-row .total-label {
    color: #d1d5db;
}

.dark .totals-row .total-value {
    color: #60a5fa;
}

/* Category group row */
.category-group-row td {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 0.5rem 0.75rem;
}

.category-group-row td {
    background: #e8eaf6;
    color: #3f51b5;
    border-bottom: 1px solid #c5cae9;
}

.dark .category-group-row td {
    background: #312e81;
    color: #a5b4fc;
    border-bottom-color: #4338ca;
}

/* Loading animation */
.loading [id^="kpi-"]:not([id$="-count"]) {
    color: #d1d5db;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Remove link underline for KPI cards */
a.no-underline { text-decoration: none; }
a.no-underline:hover { text-decoration: none; }

/* Chart.js dark mode - lighter grid lines */
.dark canvas {
    filter: none;
}