:root {
    --ab-ink: #172033;
    --ab-muted: #6d7381;
    --ab-panel: rgba(255, 255, 255, 0.82);
    --ab-accent: #d27a2d;
    --ab-border: rgba(23, 32, 51, 0.08);
}

html,
body {
    font-family: "Segoe UI Variable Display", "Segoe UI", sans-serif;
    margin: 0;
}

a,
.rz-link {
    color: #9f5413;
}

.rz-card {
    background: var(--ab-panel);
    border: 1px solid var(--ab-border);
    border-radius: 20px;
    box-shadow: 0 18px 45px rgba(26, 34, 49, 0.08);
}

.ab-hero-card {
    background:
        radial-gradient(circle at top right, rgba(210, 122, 45, 0.18), transparent 25%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(245, 238, 229, 0.95) 100%);
}

.ab-kpi-card {
    min-height: 7.5rem;
}

.ab-overline {
    color: #9f5413;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ab-muted {
    color: var(--ab-muted);
}

.ab-collection-row {
    align-items: center;
    border-bottom: 1px solid rgba(23, 32, 51, 0.06);
    display: flex;
    justify-content: space-between;
    padding: 0.8rem 0;
}

.ab-collection-name {
    color: var(--ab-ink);
    font-weight: 600;
}

.ab-collection-meta {
    color: var(--ab-muted);
    font-size: 0.85rem;
}

.ab-day-card {
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(23, 32, 51, 0.06);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 0.9rem 0;
    text-align: left;
    width: 100%;
}

.ab-day-date {
    color: var(--ab-ink);
    font-weight: 600;
}

.ab-day-meta,
.ab-day-stats,
.ab-buyer-meta {
    color: var(--ab-muted);
    font-size: 0.85rem;
}

.ab-buyer-cell {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.ab-avatar {
    background: linear-gradient(135deg, #d27a2d 0%, #172033 100%);
    border-radius: 50%;
    height: 2.5rem;
    object-fit: cover;
    width: 2.5rem;
}

.ab-buyer-name {
    color: var(--ab-ink);
    font-weight: 600;
}

.ab-buyer-flag {
    align-items: center;
    color: var(--ab-muted);
    display: inline-flex;
    font-size: 0.9rem;
    gap: 0.45rem;
}

/* ── Mobile-responsive helpers ─────────────────────────────── */

@media (max-width: 768px) {
    /* Hide header and sidebar on mobile — bottom nav replaces them */
    .rz-header,
    header.rz-header,
    .ab-header,
    .rz-layout > .rz-header {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .rz-sidebar,
    aside.rz-sidebar,
    .ab-sidebar,
    .rz-layout > .rz-sidebar {
        display: none !important;
        width: 0 !important;
    }

    .rz-body {
        padding: 0.75rem;
    }

    /* Make all DataGrids horizontally scrollable on small screens */
    .rz-datatable-scrollable-wrapper,
    .rz-data-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Slightly smaller cards on mobile */
    .rz-card {
        border-radius: 14px;
        padding: 0.75rem !important;
    }

    /* Stack hero card content */
    .ab-hero-card .rz-stack[style*="Horizontal"],
    .ab-hero-card > .rz-stack {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Let tab headers scroll when there are many */
    .rz-tabview-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
    }

    .rz-tabview-nav li {
        flex-shrink: 0;
    }

    /* Reduce heading sizes */
    .rz-text-h4 {
        font-size: 1.25rem !important;
    }

    .rz-text-h6 {
        font-size: 1rem !important;
    }

    /* Full-width buttons on mobile */
    .rz-button {
        min-width: unset;
    }

    /* Reduce avatar size */
    .ab-avatar {
        height: 2rem;
        width: 2rem;
    }
}

.mr-krabs-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(7, 16, 28, 0.82);
    backdrop-filter: blur(4px);
    z-index: 2000;
}

.mr-krabs-overlay.is-visible {
    display: flex;
}

.mr-krabs-modal {
    position: relative;
    width: min(90vw, 640px);
    border-radius: 1.25rem;
    overflow: hidden;
    background: #0d2239;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.mr-krabs-gif {
    display: block;
    width: 100%;
    height: auto;
}

.mr-krabs-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 999px;
    background: rgba(10, 17, 27, 0.78);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.mr-krabs-close:hover {
    background: rgba(10, 17, 27, 0.95);
}