/**
 * Magnified scrollbars — visible, easy to grab, consistent across DConnect.
 */

:root {
    --dc-scrollbar-size: 14px;
    --dc-scrollbar-size-thin: 10px;
    --dc-scrollbar-track: #e2e8f0;
    --dc-scrollbar-thumb: #0284c7;
    --dc-scrollbar-thumb-hover: #0369a1;
    --dc-scrollbar-thumb-active: #075985;
    --dc-scrollbar-border: 3px;
}

/* Firefox */
html,
body,
* {
    scrollbar-width: thick;
    scrollbar-color: var(--dc-scrollbar-thumb) var(--dc-scrollbar-track);
}

/* WebKit / Chromium */
*::-webkit-scrollbar {
    width: var(--dc-scrollbar-size);
    height: var(--dc-scrollbar-size);
}

*::-webkit-scrollbar-track {
    background: var(--dc-scrollbar-track);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #38bdf8 0%, var(--dc-scrollbar-thumb) 100%);
    border-radius: 999px;
    border: var(--dc-scrollbar-border) solid var(--dc-scrollbar-track);
    min-height: 40px;
    min-width: 40px;
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #7dd3fc 0%, var(--dc-scrollbar-thumb-hover) 100%);
}

*::-webkit-scrollbar-thumb:active {
    background: var(--dc-scrollbar-thumb-active);
}

*::-webkit-scrollbar-corner {
    background: var(--dc-scrollbar-track);
}

/* Horizontal strips — slightly shorter bar, still visible */
.clinic-grid,
.dates-strip,
.date-tabs,
.data-table-container,
[style*="overflow-x: auto"],
[style*="overflow-x:scroll"] {
    scrollbar-width: thick;
}

.clinic-grid::-webkit-scrollbar,
.dates-strip::-webkit-scrollbar,
.date-tabs::-webkit-scrollbar,
.data-table-container::-webkit-scrollbar {
    height: var(--dc-scrollbar-size-thin);
}

/* Dark portal sidebar */
.sidebar,
.sidebar-nav {
    scrollbar-color: rgba(148, 163, 184, 0.7) rgba(255, 255, 255, 0.08);
}

.sidebar::-webkit-scrollbar-track,
.sidebar-nav::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
}

.sidebar::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.55);
    border-color: rgba(15, 23, 42, 0.35);
}

.sidebar::-webkit-scrollbar-thumb:hover,
.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(203, 213, 225, 0.75);
}