/* Kvanta5 global visual overrides */

:root {
    --kv5-page-background: #051c3e;
    --kv5-rocksdb-yellow: #f5be17;
    --kv5-rocksdb-border: rgba(245, 190, 23, 0.24);
    --kv5-rocksdb-panel: rgba(5, 28, 62, 0.70);
    --kv5-rocksdb-panel-hover: rgba(8, 36, 78, 0.82);
    --kv5-rocksdb-text-dim: rgba(247, 250, 250, 0.76);
}

html {
    min-height: 100%;
}

body {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: transparent !important;
    background-image: none !important;
    overflow-x: hidden;
}

body::before,
body::after {
    content: none !important;
    display: none !important;
}

/*
 * One fixed viewport background shared by every route.
 * Use "cover" so the image always fills the viewport and never leaves a dead strip.
 * Anchor it at the bottom center so the lower wave composition stays visually grounded.
 */
#kv5-wave-background {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: -1 !important;
    pointer-events: none !important;
    user-select: none !important;

    background-color: var(--kv5-page-background) !important;
    background-image: url("../img/KV5_background_wave.png") !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: cover !important;
}

/*
 * Ensure wrapper elements do not paint over the shared fixed background.
 */
body > .container,
body > .container-fluid,
body > main,
body > section,
body > div:not(#kv5-wave-background):not(#kv5-rocksdb-badge),
main,
#content,
#main-content,
.page-content,
.main-content,
.body-content,
.content-wrapper,
.page-wrapper,
.site-content,
.site-wrapper,
.app-content,
.app-wrapper {
    background-color: transparent !important;
    background-image: none !important;
}

/*
 * Navbar and footer must remain transparent so the shared viewport
 * background is uninterrupted.
 */
body,
body.bg-header-footer,
nav.navbar,
nav.navbar.bg-header-footer,
footer.footer,
footer.footer.bg-header-footer {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

footer.footer {
    position: relative;
    z-index: 2;
    border: 0 !important;
    border-top: 0 !important;
}

.bg-header-footer-highlight {
    background-color: rgba(31, 61, 103, 0.90) !important;
}

/*
 * Fixed lower-left RocksDB attribution.
 */
#kv5-rocksdb-badge {
    position: fixed;
    left: clamp(14px, 2vw, 28px);
    bottom: clamp(14px, 2vw, 24px);
    z-index: 12;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid var(--kv5-rocksdb-border);

    background: var(--kv5-rocksdb-panel);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30);

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

    pointer-events: none;
    user-select: none;
}

#kv5-rocksdb-badge img {
    display: block;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}

#kv5-rocksdb-badge .rocksdb-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

#kv5-rocksdb-badge .rocksdb-powered {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kv5-rocksdb-text-dim);
}

#kv5-rocksdb-badge .rocksdb-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--kv5-rocksdb-yellow);
}

@media (max-width: 767.98px) {
    #kv5-rocksdb-badge {
        left: 12px;
        bottom: 12px;
        gap: 10px;
        padding: 8px 12px;
        border-radius: 12px;
    }

    #kv5-rocksdb-badge img {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    #kv5-rocksdb-badge .rocksdb-powered {
        font-size: 0.64rem;
    }

    #kv5-rocksdb-badge .rocksdb-name {
        font-size: 0.90rem;
    }
}

@media (max-width: 479.98px) {
    #kv5-rocksdb-badge {
        gap: 8px;
        padding: 7px 10px;
    }

    #kv5-rocksdb-badge img {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }

    #kv5-rocksdb-badge .rocksdb-powered {
        font-size: 0.58rem;
    }

    #kv5-rocksdb-badge .rocksdb-name {
        font-size: 0.82rem;
    }
}

/* KV5 GLOBAL ALIGNMENT AND READABILITY — START */

/*
 * Bootstrap normally uses a 16px root size. Increasing it to
 * 19px raises inherited text, rem-based text, controls, icons,
 * and spacing by roughly three pixels throughout the explorer.
 */
:root {
	font-size: 19px;
}


/*
 * Use one authoritative desktop width for both the navbar and
 * the main explorer content.
 */
.navbar > .container,
.bg-main > .container {
	width: 100%;
	max-width: 1180px;
}


/*
 * The body container uses px-sm-3 at desktop sizes, which equals
 * one rem on each side. Give the navbar the exact same padding.
 */
.navbar > .container {
	padding-right: 1rem;
	padding-left: 1rem;
}


/*
 * Maintain the body's px-2 mobile gutter when Bootstrap switches
 * to the smallest breakpoint.
 */
@media (max-width: 575.98px) {
	:root {
		font-size: 18px;
	}

	.navbar > .container {
		padding-right: 0.5rem;
		padding-left: 0.5rem;
	}
}

/* KV5 GLOBAL ALIGNMENT AND READABILITY — END */

/* KV5 GLOBAL TRANSLUCENT PANELS — START */

/*
 * One authoritative glass-panel treatment for the entire explorer.
 * The homepage dashboard stylesheet consumes the same variables.
 */
:root {
	--kv5-panel-background:
		rgba(20, 34, 51, 0.72);

	--kv5-panel-background-emphasis:
		rgba(20, 34, 51, 0.80);

	--kv5-panel-header-background:
		rgba(12, 25, 40, 0.42);

	--kv5-table-row-odd:
		rgba(5, 15, 27, 0.30);

	--kv5-table-row-even:
		rgba(24, 42, 63, 0.20);

	--kv5-table-row-hover:
		rgba(35, 91, 163, 0.16);
}


/*
 * Standard explorer cards:
 *
 * - Node Details
 * - Block details
 * - Address details
 * - Mining Summary
 * - Difficulty History
 * - Peers
 * - Mempool pages
 * - RPC and analysis pages
 *
 * Dropdowns, alerts, popovers, modals, and form controls are not
 * included, preserving their stronger readability requirements.
 */
.bg-main .card {
	background-color:
		var(--kv5-panel-background) !important;

	background-image:
		none !important;

	-webkit-backdrop-filter:
		blur(4px) saturate(110%);

	backdrop-filter:
		blur(4px) saturate(110%);
}


/*
 * Some explorer transaction and result templates use bg-content
 * directly instead of wrapping content in a Bootstrap card.
 */
.bg-main .bg-content {
	background-color:
		var(--kv5-panel-background) !important;

	background-image:
		none !important;

	-webkit-backdrop-filter:
		blur(4px) saturate(110%);

	backdrop-filter:
		blur(4px) saturate(110%);
}


/*
 * Keep card headers and footers visually related to the panel
 * without turning them into solid opaque bars.
 */
.bg-main .card-header,
.bg-main .card-footer {
	background-color:
		var(--kv5-panel-header-background) !important;

	background-image:
		none !important;
}


/*
 * Tables otherwise retain opaque theme backgrounds on individual
 * cells. Clear those backgrounds and rebuild restrained striping.
 */
.bg-main .table {
	--bs-table-bg:
		transparent;

	--bs-table-color:
		inherit;

	--bs-table-striped-bg:
		transparent;

	--bs-table-striped-color:
		inherit;

	--bs-table-hover-bg:
		transparent;

	--bs-table-hover-color:
		inherit;

	--bs-table-active-bg:
		transparent;

	--bs-table-accent-bg:
		transparent;
}

.bg-main .table
	> :not(caption)
	> *
	> * {
	background-color:
		transparent !important;

	box-shadow:
		none !important;
}

.bg-main .table-striped
	> tbody
	> tr:nth-of-type(odd)
	> * {
	background-color:
		var(--kv5-table-row-odd) !important;
}

.bg-main .table-striped
	> tbody
	> tr:nth-of-type(even)
	> * {
	background-color:
		var(--kv5-table-row-even) !important;
}

.bg-main .table-hover
	> tbody
	> tr:hover
	> * {
	background-color:
		var(--kv5-table-row-hover) !important;
}


/*
 * Accordion and list-group components occasionally appear inside
 * analysis and configuration pages.
 */
.bg-main .accordion-item {
	background-color:
		var(--kv5-panel-background) !important;
}

.bg-main .accordion-button {
	background-color:
		var(--kv5-panel-header-background);
}

.bg-main .list-group-item {
	background-color:
		rgba(20, 34, 51, 0.48);

	color:
		inherit;
}


/*
 * Preserve intentionally stronger semantic components.
 */
.bg-main .alert,
.bg-main .modal-content,
.bg-main .dropdown-menu,
.bg-main .popover,
.bg-main .tooltip,
.bg-main .offcanvas,
.bg-main .form-control,
.bg-main .form-select {
	-webkit-backdrop-filter:
		none;

	backdrop-filter:
		none;
}

/* KV5 GLOBAL TRANSLUCENT PANELS — END */

/* KV5 NAVBAR LAYERING — START */

/*
 * Translucent cards use backdrop-filter, which creates independent
 * stacking contexts. Keep the complete navbar and its dropdowns
 * above every explorer content panel.
 */
.navbar {
	position: relative;
	z-index: 1080;
	overflow: visible;
}

.navbar > .container,
#navbarNav,
.navbar-nav,
.navbar .nav-item,
.navbar .dropdown {
	overflow: visible;
}

#navbarNav {
	position: relative;
	z-index: 1081;
}

.navbar .dropdown-menu {
	z-index: 1090;
}


/*
 * Establish the explorer body as the lower application layer.
 */
.bg-main {
	position: relative;
	z-index: 1;
}


/*
 * Keep fixed branding/background elements beneath interactive UI.
 */
#kv5-wave-background {
	z-index: 0;
}

#kv5-rocksdb-badge {
	z-index: 20;
}

/* KV5 NAVBAR LAYERING — END */

/* KVANTA5 HOMEPAGE TILE TRANSPARENCY BEGIN
 *
 * Slight translucency for homepage information tiles only.
 * Alpha 0.88 keeps the data highly legible while allowing the
 * particle field to remain faintly visible beneath the panels.
 */
.kv5-network-dashboard > .card,
.kv5-network-technical-card,
#kv5-latest-section > .card,
#kv5-latest-section .card,
#kv5-tools-section > .card,
#kv5-tools-section .card {
    background-color: rgba(13, 29, 47, 0.88) !important;
}

/*
 * Card bodies must not paint a second opaque layer over the
 * translucent card container.
 */
.kv5-network-dashboard > .card > .card-body,
.kv5-network-technical-card > .card-body,
#kv5-latest-section .card > .card-body,
#kv5-tools-section .card > .card-body {
    background-color: transparent !important;
    background-image: none !important;
}
/* KVANTA5 HOMEPAGE TILE TRANSPARENCY END */

/* KVANTA5 ANIMATED BACKGROUND PERFORMANCE BEGIN
 *
 * Animated content behind backdrop-filter forces continuous,
 * expensive recomposition. Keep the translucent surfaces but remove
 * the live blur while the optimized particle field is active.
 */
body.kv5-homepage-wave-optimized .bg-main .card,
body.kv5-homepage-wave-optimized .bg-main .bg-content,
body.kv5-homepage-wave-optimized .bg-main .accordion-item,
body.kv5-homepage-wave-optimized .bg-main .list-group-item {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/*
 * Homepage panels consume the authoritative shared variable above.
 * These selectors ensure later route-specific styles cannot replace
 * the corrected alpha.
 */
body.kv5-homepage-wave-optimized
    .kv5-network-dashboard > .card,
body.kv5-homepage-wave-optimized
    .kv5-status-card,
body.kv5-homepage-wave-optimized
    .kv5-network-technical-card,
body.kv5-homepage-wave-optimized
    #kv5-latest-section .card,
body.kv5-homepage-wave-optimized
    #kv5-tools-section .card {
    background-color:
        var(--kv5-panel-background) !important;

    -webkit-backdrop-filter:
        none !important;

    backdrop-filter:
        none !important;
}
/* KVANTA5 ANIMATED BACKGROUND PERFORMANCE END */