/* =========================================
   GRID STYLES: Data List, Pool Rows, Sub-pools
   ========================================= */

/* Data Grid Container */
.data-grid-container {
    background-color: #242c33;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
    min-height: 400px;
    position: relative;
    border-top: none;
}

#load-more-btn {
    display: none;
    width: 100%;
    padding: 20px;
    background: #1a2025;
    border: none;
    border-bottom: 2px solid #141a1e;
    color: #94a3b8;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.2s;
    font-family: var(--font-sys);
    font-weight: bold;
}

#load-more-btn:hover {
    background: #141a1e;
    color: #f1f5f9;
}

.data-header {
    display: grid;
    grid-template-columns: 3.5fr 1.5fr 1.25fr 1.25fr 1.5fr 1.5fr 140px;
    background: transparent;
    border-top: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    padding: 16px 30px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-sys);
}

.data-header>div:not(.h-pool):not(.h-actions) {
    text-align: center;
}

.data-header>div {
    cursor: pointer;
    transition: color 0.2s;
}

.data-header>div:hover {
    color: #fff;
}

.header-arrow {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-top: 2.5px solid var(--accent-orange);
    border-left: 2.5px solid var(--accent-orange);
    transform: rotate(45deg);
    /* Points up for default descending */
    margin-left: 5px;
    margin-bottom: -1px;
    vertical-align: middle;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-arrow.asc {
    transform: rotate(225deg);
    /* Points down for ascending */
}

.data-list {
    display: flex;
    flex-direction: column;
}

/* Pool Row */
.pool-wrapper {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.pool-row {
    display: grid;
    grid-template-columns: 3.5fr 1.5fr 1.25fr 1.25fr 1.5fr 1.5fr 140px;
    padding: 20px 30px;
    align-items: center;
    background: transparent;
    transition: background 0.1s;
}

.pool-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.col-main,
.col-stat,
.col-actions {
    display: flex;
}

.col-main {
    align-items: center;
    gap: 12px;
}

.pair-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-right: 4px;
}

.swap-icon-btn {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #1a2025;
    border: 1px solid #303b46;
    transition: all 0.2s;
    overflow: hidden;
}

.swap-icon-btn:hover {
    border-color: #8ba9ca;
    transform: scale(1.1);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

.swap-icon {
    width: 14px;
    height: 14px;
    display: block;
}

/* Token Icons - Glowing Orbit Effect */
@keyframes organicGlow {
    0% {
        box-shadow: 0 0 4px rgba(255, 87, 34, 0.4), 0 0 10px rgba(234, 59, 16, 0.2);
        border-color: rgba(255, 87, 34, 0.6);
    }

    50% {
        box-shadow: 0 0 8px rgba(255, 87, 34, 0.6), 0 0 15px rgba(234, 59, 16, 0.3);
        border-color: rgba(255, 87, 34, 0.9);
    }

    100% {
        box-shadow: 0 0 4px rgba(255, 87, 34, 0.4), 0 0 10px rgba(234, 59, 16, 0.2);
        border-color: rgba(255, 87, 34, 0.6);
    }
}

.token-container {
    display: flex;
    gap: 12px;
    align-items: center;
}

.token-base,
.token-quote {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 87, 34, 0.6);
    background: #0f1317;
    border-radius: 4px;
    /* Changed from 50% to 4px to match buttons */
    animation: organicGlow 4s ease-in-out infinite;
    padding: 2px;
    /* Slight padding so the image doesn't touch the glowing border */
    object-fit: cover;
}

/* Delay the second token's animation slightly to make it look unsynced and more organic */
.token-quote {
    animation-delay: -2s;
}

.pair-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 4px;
}

.pair-title {
    font-size: 14px;
    font-weight: 700;
    color: #f1f5f9;
    font-family: var(--font-sys);
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.age-text,
.age-tag {
    font-size: 11px;
    color: #5ab1ff;
    /* Light blue for age */
    margin-left: 0;
    font-weight: 500;
}

.pair-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}

.badge-tag {
    background: #1a2025;
    color: #94a3b8;
    font-size: 10px;
    padding: 2px 6px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: 4px;
    font-family: var(--font-sys);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.lp-tag {
    color: #ffccbc;
    background: rgba(234, 59, 16, 0.15);
}

/* Stats */
.col-stat {
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

.stat-label {
    display: none;
    /* Hide labels in rows for cleaner data grid */
}

.stat-main {
    font-size: 14px;
    font-weight: 700;
    color: #f1f5f9;
    font-family: var(--font-sys);
}

.stat-sub {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.text-green {
    color: var(--green-positive);
}

.text-accent,
.text-orange {
    color: var(--accent-orange);
}

/* Actions */
.col-actions {
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

.mini-sys-btn {
    width: 32px;
    height: 32px;
    background: #1a2025;
    border: 1px solid #303b46;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.mini-sys-btn:hover {
    background: #141a1e;
    border-color: #64748b;
    color: #f1f5f9;
}

.mini-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Sub pools container */
.sub-pools-container {
    background: #1a2025;
    border-top: 1px dashed #303b46;
    padding: 10px 30px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.sub-header {
    display: grid;
    grid-template-columns: 3.5fr 1.5fr 1.25fr 1.25fr 1.5fr 1.5fr 140px;
    /* Match main row */
    color: #64748b;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 4px 0;
    /* Changed from 4px 10px to sit flush */
    margin-bottom: 2px;
}

.sub-header>div:first-child {
    padding-left: 28px;
    /* Offset to align perfectly with the token icons / Jupiter buttons */
}

.sub-row {
    display: grid;
    grid-template-columns: 3.5fr 1.5fr 1.25fr 1.25fr 1.5fr 1.5fr 140px;
    /* Match main row */
    align-items: center;
    padding: 6px 0;
    text-decoration: none;
    color: #94a3b8;
    font-size: 10px;
    font-family: var(--font-mono);
}

.sub-row>div:first-child {
    padding-left: 28px;
    /* Match header offset */
}

.sub-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.sub-row-active {
    background: rgba(125, 211, 252, 0.1);
}

.sub-row-active .badge-tag {
    background: #0f1317;
    /* Darker than normal to pop against the blue tint */
    color: #f1f5f9;
    /* Lighter text to stand out more */
}

.sub-row>div {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Ensure data columns match parent `.col-stat` centering */
.sub-row>div:not(:first-child),
.sub-header>div:not(:first-child) {
    justify-content: center;
    text-align: center;
}

.sub-row>div span {
    color: #fff;
}

.sub-loading {
    color: #555;
    font-size: 10px;
    text-align: center;
    padding: 10px;
    font-family: var(--font-mono);
}

.sub-link-icon {
    font-size: 10px;
}

/* Base Loader Styles */
.sys-loader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    gap: 16px;
    width: 100%;
}

.sys-loader-spinner {
    width: 40px;
    height: 40px;
    position: relative;
}

.sys-loader-spinner::before,
.sys-loader-spinner::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--accent-orange, #ff5722);
    opacity: 0.6;
    top: 0;
    left: 0;
    animation: corporate-pulse 2s infinite ease-in-out;
}

.sys-loader-spinner::after {
    animation-delay: -1s;
}

@keyframes corporate-pulse {

    0%,
    100% {
        transform: scale(0);
        opacity: 0.8;
    }

    50% {
        transform: scale(1);
        opacity: 0;
    }
}