/* ── Global ───────────────────────────────────────────────────── */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Navbar ───────────────────────────────────────────────────── */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* ── KPI cards ────────────────────────────────────────────────── */
.card {
    border-radius: 0.625rem;
}

/* ── Filter bar ───────────────────────────────────────────────── */
.form-label-sm {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Sortable table headers ───────────────────────────────────── */
th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
th.sortable:hover {
    background-color: #e9ecef;
}
th.sortable i {
    font-size: 0.7rem;
    opacity: 0.5;
    margin-left: 2px;
}
th.sort-asc i::before  { content: "\F282"; } /* bi-arrow-up */
th.sort-desc i::before { content: "\F27D"; } /* bi-arrow-down */

/* ── Table ────────────────────────────────────────────────────── */
.table th {
    font-size: 0.78rem;
    font-weight: 600;
    color: #495057;
    padding: 0.6rem 0.75rem;
}
.table td {
    font-size: 0.82rem;
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
}
.table tbody tr:last-child td {
    border-bottom: none;
}

/* ── Loading overlay ──────────────────────────────────────────── */
#loadingSpinner {
    padding: 5rem 0;
}

/* ── Negative margin highlight ────────────────────────────────── */
.text-negative {
    color: #dc3545 !important;
}

/* ── Responsive chart height ──────────────────────────────────── */
@media (max-width: 768px) {
    #chartMonthly,
    #chartCustomers,
    #chartArticles,
    #chartArticleGroups {
        height: 260px !important;
    }
}