/* ── Manrope font (Latin + Cyrillic) ─────────────────── */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/manrope/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/manrope/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/manrope/manrope-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/manrope/manrope-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* ── Base ─────────────────────────────────────────────── */
html, body, .rz-application {
    font-family: var(--az-font-family) !important;
    height: 100%;
    margin: 0;
    background: var(--rz-body-background-color);
    color: var(--rz-text-color);
}

/* Disable text selection + iOS long-press callout on TOUCH devices only —
   the mobile/tablet app is a tool, not a reading surface, and the long-press
   callout fights with our gestures. Desktop (hover-capable mouse) keeps
   normal selectability so users can copy addresses, hashes, amounts, etc.
   `(hover: none) and (pointer: coarse)` is the standard touch-only query;
   it fires on phones + tablets (incl. iPad Pro) and skips desktop + Surface
   with mouse attached. Inputs/textareas/contenteditable are restored below
   so typing/paste keeps working on mobile. */
@media (hover: none) and (pointer: coarse) {
    html, body, .rz-application {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    input, textarea, select, [contenteditable="true"], [contenteditable=""] {
        -webkit-user-select: text;
        user-select: text;
        -webkit-touch-callout: default;
    }
}

/* ── Links — gold everywhere (project-wide rule, client + admin) ───────
   --az-gold is theme-aware (#FFD700 dark / #D4AF00 light). This is a
   low-specificity base rule, so it only colours plain content anchors
   (e.g. the Users-grid link); Radzen chrome — nav, pager, tabs, buttons
   rendered as <a> — keeps its own class-scoped colours via higher
   specificity, so this does not turn navigation gold. RadzenLink already
   uses --rz-link-color (also gold), so links are consistent everywhere. */
a {
    color: var(--az-gold);
}

a:hover,
a:focus {
    color: var(--az-gold-light);
}

a:visited {
    color: var(--az-gold);
}

/* ── Radzen overrides ─────────────────────────────────── */
:root {
    --rz-body-font-family: var(--az-font-family);
    --rz-border-radius: var(--az-radius-md);
    --rz-border-radius-lg: var(--az-radius-lg);
    --rz-card-border-radius: var(--az-radius-lg);
}

.rz-button {
    border-radius: 12px !important;
}

/* ── Body padding ─────────────────────────────────────── */
.rz-body {
    padding: 1.5rem;
}

/* ── Page layout ──────────────────────────────────────── */
.page-title {
    margin-bottom: 1.5rem;
}

.page-title-row {
    margin-bottom: 1rem;
}

.section-title {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* ── Update info label ────────────────────────────────── */
.update-info {
    opacity: 0.65;
    font-size: 0.85rem;
}

/* ── Portfolio page header ───────────────────────────── */
.portfolio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.portfolio-controls {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .portfolio-controls {
        margin-bottom: 1rem;
    }
}

/* Space out the individual 7D / 30D / 90D buttons inside the RadzenSelectBar */
.days-selector .rz-button {
    margin-inline: 0.25rem;
}

.days-selector .rz-button:first-child {
    margin-left: 0;
}

.days-selector .rz-button:last-child {
    margin-right: 0;
}

/* Wallet filter dropdown item — logo + label */
.wallet-filter-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wallet-filter-logo {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

/* ── Portfolio chart card — fixed height so the layout never jumps during reloads ── */
.chart-card {
    min-height: 360px;
}

@media (max-width: 768px) {
    .chart-card {
        min-height: 300px;
        padding: 0.5rem !important;
    }

    .chart-card .apexcharts-title-text {
        font-size: 14px !important;
    }

    .chart-card .apexcharts-legend-text {
        font-size: 11px !important;
    }
}

/* ApexCharts forces Theme.Mode = Dark server-side (fixed axis contrast on dark
   surfaces), so axis labels / tick text come out light and vanish on light
   theme backgrounds. Override fill via CSS when the user is in light mode.
   Targets any apexcharts instance (Home mini chart + Portfolio full chart). */
@media (prefers-color-scheme: light) {
    .apexcharts-xaxis text,
    .apexcharts-yaxis text,
    .apexcharts-xaxis-label,
    .apexcharts-yaxis-label,
    .apexcharts-legend-text,
    .apexcharts-text tspan {
        fill: #1A1714 !important;
        color: #1A1714 !important;
    }

    .apexcharts-gridline {
        stroke: rgba(0, 0, 0, 0.08) !important;
    }
}

.chart-skeleton {
    position: relative;
    height: 320px;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(201, 168, 76, 0.04), rgba(255, 255, 255, 0.02));
}

.chart-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(201, 168, 76, 0.08),
        transparent
    );
    animation: chart-skeleton-shimmer 1.6s ease-in-out infinite;
}

@keyframes chart-skeleton-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.chart-skeleton-bars {
    position: absolute;
    inset: 16px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
}

.chart-skeleton-bar {
    flex: 1;
    background: rgba(201, 168, 76, 0.12);
    border-radius: 4px 4px 0 0;
    min-height: 6px;
}

.modal-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.modal-fields .rz-form-field {
    display: block !important;
    width: 100% !important;
}

.modal-fields .rz-form-field > * {
    width: 100% !important;
}

.modal-divider {
    border: none;
    border-top: 1px solid rgba(128, 128, 128, 0.25);
    margin: 0 0 1.25rem 0;
}