@import "styles.css";

html {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scrollbar-color: rgba(128, 128, 128, 0.3) transparent;
    }

    html::-webkit-scrollbar-thumb {
        background: rgba(128, 128, 128, 0.3);
        border-radius: 999px;
    }

    html:hover::-webkit-scrollbar-thumb {
        background: rgba(128, 128, 128, 0.6);
    }
}

/* Global card polish */
.bb-card {
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.app-grid {
    overflow: hidden;
}

.app-grid thead,
.app-grid thead tr {
    background-color: var(--card);
}

.app-grid thead th {
    border-bottom: 1px solid var(--border);
}

.app-grid > div.relative {
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.app-grid > nav {
    background-color: var(--card);
    border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

/* Content area depth */
.content-depth {
    background-image:
        radial-gradient(ellipse at top left, color-mix(in srgb, var(--sidebar-accent) 35%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, color-mix(in srgb, var(--secondary) 25%, transparent) 0%, transparent 45%);
}

/* Empty state polish */
.empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    margin: 0 auto;
    border-radius: 9999px;
    background: var(--secondary);
}

.empty-state-icon svg {
    color: var(--muted-foreground);
    opacity: 0.7;
}

/* Translucent frosted glass topbar (shared by AdminLayout / AccountLayout) */
.topbar {
    background-color: color-mix(in srgb, var(--background) 95%, transparent);
    backdrop-filter: blur(12px);
}