.rounded-b-lg {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.card-grid-background {
    background-image: repeating-linear-gradient(90deg, rgba(42, 42, 42, 0.09) 0px, rgba(42, 42, 42, 0.09) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(0deg, rgba(42, 42, 42, 0.09) 0px, rgba(42, 42, 42, 0.09) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(0deg, rgba(42, 42, 42, 0.09) 0px, rgba(42, 42, 42, 0.09) 1px, transparent 1px, transparent 10px), repeating-linear-gradient(90deg, rgba(42, 42, 42, 0.09) 0px, rgba(42, 42, 42, 0.09) 1px, transparent 1px, transparent 10px), linear-gradient(90deg, rgba(23, 25, 27, 0.6), rgba(23, 25, 27, 0.6));
}

select option {
    color: #f4f4f5 !important;
    background: #2e2e32 !important;
}



/* ig-tooltip */

.ig-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 500px;
    min-width: 140px;
}

.ig-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

.ig-tooltip-content {
    background: linear-gradient(135deg, #27272a 0%, #18181b 100%);
    border: 1px solid #3f3f46;
    border-radius: 8px;
    padding: 12px 14px;
    color: #e4e4e7;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
    text-align: left;
    word-wrap: break-word;
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.4),
        0 10px 10px -5px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    position: relative;
}

.ig-tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ig-tooltip-arrow.top {
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #27272a;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

.ig-tooltip-arrow.bottom {
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #27272a;
    filter: drop-shadow(0 -2px 3px rgba(0, 0, 0, 0.2));
}

.ig-tooltip-arrow.left {
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid #27272a;
    filter: drop-shadow(2px 0 3px rgba(0, 0, 0, 0.2));
}

.ig-tooltip-arrow.right {
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid #27272a;
    filter: drop-shadow(-2px 0 3px rgba(0, 0, 0, 0.2));
}

.ig-tooltip.bottom {
    transform: translateY(8px);
}

.ig-tooltip.bottom.show {
    transform: translateY(0);
}

.ig-tooltip.left {
    transform: translateX(-8px);
}

.ig-tooltip.left.show {
    transform: translateX(0);
}

.ig-tooltip.right {
    transform: translateX(8px);
}

.ig-tooltip.right.show {
    transform: translateX(0);
}

.online-tooltip-trigger {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    pointer-events: none;
}

.online-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1000;
    pointer-events: none;
}

.online-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

.online-tooltip-content {
    background: linear-gradient(135deg, #27272a 0%, #18181b 100%);
    border: 1px solid #3f3f46;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.4;
    color: #f4f4f5;
    white-space: pre-line;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    max-width: 200px;
    min-width: 160px;
}

.online-tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
}

.online-tooltip-arrow.top {
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: #3f3f46;
}

.online-tooltip-arrow.bottom {
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: #3f3f46;
}

.online-tooltip-arrow.left {
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: #3f3f46;
}

.online-tooltip-arrow.right {
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: #3f3f46;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(39, 39, 42, 0.3);
}

::-webkit-scrollbar-thumb {
    background-color: rgba(82, 82, 91, 0.6);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(113, 113, 122, 0.8);
}

/* Global link styling - everywhere except menus and search results */
a[href]:not(#mobile-menu-container a):not([class*="bg-sidebar"] a):not(.mobile-nav-button a):not(#searchDropdown a) {
    transition: color 0.15s ease-in-out;
}

a[href]:not(#mobile-menu-container a):not([class*="bg-sidebar"] a):not(.mobile-nav-button a):not(#searchDropdown a):hover {
    color: #60a5fa !important;
    /* blue-400 */
}

/* Mobile scrolling fix - prevents horizontal scroll containers from blocking vertical scrolling */
/* Horizontal scroll containers only respond to horizontal gestures, allowing vertical to pass through */
#tabs-container,
#main-tabs-container {
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
}

/* Global no-scrollbar utility class */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.collapsible-content {
    transition: max-height 0.3s ease, opacity 0.2s ease;
    overflow: hidden;
}

.collapsible-content.collapsible-collapsed {
    max-height: 0 !important;
    opacity: 0;
}

.collapsible-chevron {
    transition: transform 0.2s ease;
}

[data-collapsible].collapsible-collapsed .collapsible-chevron {
    transform: rotate(-90deg);
}

/* Mobile-only collapsible: pointer on mobile (clickable), default on desktop */
[data-collapsible-mobile-only="true"][data-collapsible] {
    cursor: pointer;
}

@media (min-width: 768px) {
    [data-collapsible-mobile-only="true"][data-collapsible] {
        cursor: default !important;
    }
}

@media (max-width: 1023px) {
    main {
        padding-bottom: 1rem !important;
    }
}