/* SerpWatch custom styles — minimal additions to Tailwind */

/* Navigation links in sidebar */
.nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #d1d5db;
    transition: background-color 0.15s, color 0.15s;
}
.nav-link:hover { background-color: rgba(255,255,255,0.1); color: #fff; }
.nav-link.active { background-color: rgba(59,130,246,0.3); color: #fff; }

/* Tab buttons */
.tab-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}
.tab-active { border-color: #3b82f6; color: #3b82f6; }
.tab-inactive { color: #6b7280; }
.tab-inactive:hover { color: #374151; border-color: #d1d5db; }

/* KPI cards */
.kpi-card {
    background: white;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    padding: 1rem;
    text-align: center;
}
.dark .kpi-card { background: #1f2937; border-color: #374151; }
.kpi-label { font-size: 0.75rem; color: #6b7280; text-transform: uppercase; }
.dark .kpi-label { color: #9ca3af; }
.kpi-value { font-size: 1.5rem; font-weight: 700; margin-top: 0.25rem; }

/* Mobile drawer animation */
@media (max-width: 767px) {
    .kpi-card { padding: 0.75rem; }
    .kpi-value { font-size: 1.25rem; }
}