:root {
    color-scheme: light;
}

* {
    box-sizing: border-box;
}

html {
    background: #f8fafc;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button:not(:disabled),
[role="button"] {
    cursor: pointer;
}

::selection {
    background: #dbeafe;
    color: #1e3a8a;
}

.nav-link.active {
    background: #1d4ed8;
    color: #fff;
    box-shadow: 0 8px 22px rgba(29, 78, 216, 0.18);
}

.nav-link.active > span:first-child {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.app-card {
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th {
    white-space: nowrap;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 0.85rem 1rem;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.data-table td {
    border-bottom: 1px solid #f1f5f9;
    padding: 0.9rem 1rem;
    vertical-align: middle;
    font-size: 0.8rem;
    color: #475569;
}

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

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.scroll-thin {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.scroll-thin::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.scroll-thin::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #cbd5e1;
}

.pulse-skeleton {
    position: relative;
    overflow: hidden;
    background: #f1f5f9;
}

.pulse-skeleton::after {
    position: absolute;
    inset: 0;
    content: "";
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
    animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
    to { transform: translateX(100%); }
}

.chart-area {
    min-height: 280px;
}

.range-violet {
    accent-color: #7c3aed;
}

.range-blue {
    accent-color: #1d4ed8;
}

@media (max-width: 1023px) {
    #sidebar.open {
        transform: translateX(0);
    }

    #sidebar-overlay.open {
        display: block;
    }
}

@media (max-width: 639px) {
    .data-table th,
    .data-table td {
        padding: 0.75rem;
    }
}