/* Shared UI component styles (reused across pages) */

/* Legend */
.rp-legend--with-action {
    position: relative;
    padding: 1rem;
    padding-right: 4.5rem; /* keep space for top-right action */
    width: 100%;
}

.rp-legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    align-items: flex-start;
    flex-direction: column;
}

.rp-legend-actions {
    position: absolute;
    right: 1rem;
    top: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rp-legend-actions[hidden] {
    display: none;
}

.rp-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-xxs);
    color: var(--dark-text-secondary);
    font-weight: 500;
    text-transform: capitalize;
    letter-spacing: 0.02em;
}

.rp-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rp-legend-label {
    display: inline-block;
}

.rp-legend-action {
    position: relative;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--dark-card-border);
    background: var(--dark-btn-ghost-bg);
    color: var(--dark-text-secondary);
    text-decoration: none;
    line-height: 0;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.rp-legend-action:hover {
    background: var(--dark-btn-ghost-hover);
    color: var(--secondary-color);
}

.rp-legend-action:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .rp-legend-items {
        gap: var(--space-1);
    }

    .rp-legend-item {
        font-size: var(--text-xxs);
    }
}

/* Date range navigator (parity with training-log-nav) */
.date-range-navigator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgb(var(--color-white-rgb) / 0.03);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--dark-card-border);
}

/* Card */
.rp-card {
    background: var(--dark-card-bg);
    border: 1px solid var(--dark-card-border);
    border-radius: 12px;
    overflow: hidden;
    display: block;
}

.overview-card .rp-card {
    background: none;
    border: none;
}

.overview-card .rp-detail-card__row {
    justify-content: space-around;
}

.rp-card__content {
    position: relative;
    min-height: 280px;
}

.rp-card__header[hidden] {
    display: none;
}

.rp-card__content[hidden] {
    display: none;
}

.rp-card__skeleton[hidden] {
    display: none;
}

.rp-card__footer[hidden] {
    display: none;
}

.rp-card--progress .rp-card__content {
    min-height: auto;
}

/* Detail card (extends base rp-card) */
.rp-card--detail {
    background: radial-gradient(circle at top left, var(--primary-color) 0, var(--dark-card-bg) 55%);
    color: var(--dark-text-primary);
    width: 100%;
    height: auto;
    will-change: transform, opacity, filter;
}

.rp-card--detail .rp-card__header,
.rp-card--detail .rp-card__content,
.rp-card--detail .rp-card__footer,
.rp-card--detail .rp-card__skeleton {
    padding: 1rem 1.25rem;
}

.rp-card--detail .rp-card__header {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.rp-card--detail .rp-card__content {
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: 0;
}

.rp-card--detail .rp-card__skeleton {
    padding-top: 1rem;
}

@media (min-width: 768px) {
    .rp-card--detail .rp-card__header,
    .rp-card--detail .rp-card__content,
    .rp-card--detail .rp-card__footer,
    .rp-card--detail .rp-card__skeleton {
        padding: 1.25rem 1.5rem;
    }

    .rp-card--detail .rp-card__header {
        gap: 0.2rem;
    }

    .rp-card--detail .rp-card__content {
        gap: var(--space-4);
        padding-top: 0;
    }

    .rp-detail-card-skeleton {
        gap: 0.8rem;
    }

    .rp-detail-card-skeleton__items {
        gap: 1.25rem 1.75rem;
    }

    .rp-card--detail .card-subtitle {
        font-size: var(--text-sm);
    }

    .rp-card--detail .card-title,
    .rp-card--detail .rp-detail-card__title {
        font-size: var(--text-md);
    }

    .rp-card--detail .rp-detail-card__pill {
        font-size: var(--text-xs);
        padding: 0.25rem 0.7rem;
    }

    .rp-card--detail .rp-detail-card__item-label {
        font-size: var(--text-xs);
    }

    .rp-card--detail .rp-detail-card__item-value {
        font-size: var(--text-md);
    }
}

/* Detail card content animation (weekly snapshot data) */
.rp-detail-content {
    animation: rpDetailContentUpdate 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes rpDetailContentUpdate {
    0% {
        opacity: 0.56;
        transform: translateY(6px);
    }

    72% {
        opacity: 1;
        transform: translateY(-1px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* When loading, the card hides header/content; keep skeleton non-interactive. */
.rp-card--detail[loading] {
    pointer-events: none;
}

.rp-detail-card-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.rp-detail-card-skeleton__line {
    height: 0.9rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(
        90deg,
        rgb(var(--color-white-rgb) / 0.06) 0%,
        rgb(var(--color-white-rgb) / 0.12) 50%,
        rgb(var(--color-white-rgb) / 0.06) 100%
    );
    background-size: 200% 100%;
    animation: rpSkeletonShimmer 1.1s ease-in-out infinite;
}

.rp-detail-card-skeleton__line--subtitle {
    width: 38%;
    height: 0.75rem;
}

.rp-detail-card-skeleton__line--title {
    width: 26%;
}

.rp-detail-card-skeleton__gap {
    height: var(--space-2);
}

.rp-detail-card-skeleton__pill {
    height: 1.05rem;
    width: 60%;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        rgb(var(--color-white-rgb) / 0.06) 0%,
        rgb(var(--color-white-rgb) / 0.12) 50%,
        rgb(var(--color-white-rgb) / 0.06) 100%
    );
    background-size: 200% 100%;
    animation: rpSkeletonShimmer 1.1s ease-in-out infinite;
}

.rp-detail-card-skeleton__items {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-top: 0.25rem;
}

.rp-detail-card-skeleton__item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 120px;
}

.rp-detail-card-skeleton__line--label {
    width: 58%;
    height: 0.6rem;
}

.rp-detail-card-skeleton__line--value {
    width: 92%;
}

@keyframes rpSkeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .rp-detail-card-skeleton__line {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rp-detail-content.is-updating {
        animation: none;
    }
}

@keyframes rpDetailFade {
    from {
        opacity: 0.5;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rp-detail-card__title {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--accent-orange, var(--secondary-color));
}

.rp-detail-card__header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.rp-detail-card__headings {
    min-width: 0;
}

.rp-detail-card__actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.rp-detail-card__pill {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: var(--text-xxs);
    font-weight: 650;
    letter-spacing: 0.02em;
    line-height: 1;
    margin-top: var(--space-1);
}

.rp-detail-card__pill--orange {
    color: var(--secondary-color);
    background: var(--secondary-color-transparent-20);
    border: 1px solid var(--secondary-color-transparent-30);
    will-change: transform;
    animation: rpDetailCardPillPulse 2.6s ease-in-out infinite;
}

@keyframes rpDetailCardPillPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgb(var(--color-secondary-rgb) / 0);
    }
    50% {
        transform: scale(1.04);
        box-shadow: 0 0 0 6px rgb(var(--color-secondary-rgb) / 0.06);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgb(var(--color-secondary-rgb) / 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rp-detail-card__pill--orange {
        animation: none;
        box-shadow: none;
        transform: none;
    }
}

.rp-detail-card__row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.rp-detail-card__item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.rp-detail-card__item-label {
    font-size: var(--text-xxs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dark-text-secondary);
}

.rp-detail-card__item-value {
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.1;
}

.date-range-navigator__arrow {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--dark-text-secondary);
    padding: 0.5rem;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.date-range-navigator__arrow:hover {
    background-color: rgb(var(--color-white-rgb) / 0.1);
    color: var(--dark-text-primary);
}

.date-range-navigator__arrow:focus-visible {
    outline: 2px solid var(--secondary-color-transparent-30);
    outline-offset: 2px;
}

.date-range-navigator__arrow svg {
    width: 24px;
    height: 24px;
}

.date-range-navigator__label {
    font-size: var(--text-sm);
    color: var(--dark-text-secondary);
    font-weight: 500;
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 360px) {
    .date-range-navigator {
        gap: 0.5rem;
        padding-inline: 0.25rem;
    }

    .date-range-navigator__arrow {
        padding: 0.35rem;
    }

    .date-range-navigator__arrow svg {
        width: 20px;
        height: 20px;
    }
}

.rp-detail-content.is-updating .rp-detail-card__item-value {
    animation: rpDetailValuePulse 280ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

@keyframes rpDetailValuePulse {
    0% {
        transform: scale(0.98);
        color: var(--dark-text-secondary);
    }
    68% {
        transform: scale(1.03);
        color: var(--white-color);
    }
    100% {
        transform: scale(1);
        color: var(--dark-text-primary);
    }
}

/* Base input field */
.rp-input {
    width: 100%;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

/* Light variant – matches onboarding survey inputs/selects */
.rp-input--light {
    padding: 1rem;
    background-color: var(--dark-btn-ghost-bg);
    border: 1px solid var(--dark-input-border);
    color: var(--white-color);
}

.rp-input--light:hover {
    background-color: var(--dark-btn-ghost-hover);
    border-color: var(--dark-input-border-hover);
}

.rp-input--light:focus {
    border-color: var(--secondary-color);
    background-color: rgb(var(--color-white-rgb) / 0.15);
    box-shadow: 0 0 0 2px rgb(var(--color-secondary-rgb) / 0.2);
}

/* Dark variant – matches dashboard/settings inputs */
.rp-input--dark {
    padding: 0.5rem 0.75rem;
    background-color: var(--dark-input-bg);
    border: 1px solid var(--dark-input-border);
    color: var(--dark-text-primary);
}

.rp-input--dark:focus {
    border-color: var(--dark-input-border-focus);
}

/* Error state + message for base inputs */
.rp-input-error {
    border-color: var(--cancel-red);
}

.rp-input + .rp-input-error-message {
    display: block;
    min-height: 1.1rem;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--light-red);
}

/* Hide native number spinners for rp-input number fields */
.rp-input[type="number"]::-webkit-inner-spin-button,
.rp-input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.rp-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Select (dropdown) */
.rp-select {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
}

/* Trigger uses rp-input styles; keep icon alignment consistent */
.rp-select-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    text-align: left;
    cursor: pointer;
    box-shadow: var(--shadow-button);
    transition:
        transform var(--duration-fast) ease,
        box-shadow var(--duration-normal) ease,
        border-color var(--duration-normal) ease,
        background-color var(--duration-normal) ease,
        color var(--duration-normal) ease;
}

.rp-select-trigger:focus {
    outline: none;
}

.rp-select-trigger:focus-visible {
    outline: 2px solid var(--secondary-color-transparent-30);
    outline-offset: 2px;
}

.rp-select-trigger:disabled {
    opacity: 0.65;
    cursor: default;
}

.rp-select-trigger-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dark-text-primary);
}

.rp-select-trigger.rp-input--light .rp-select-trigger-label {
    color: var(--white-color);
}

.rp-select-trigger.rp-input--light {
    padding-block: var(--space-4);
    padding-inline: var(--space-4);
}

.rp-select--compact.rp-select-trigger {
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    height: 100%;
    border-radius: var(--radius-xl);
}

.rp-select--compact .rp-select-trigger-label {
    font-size: var(--text-xs);
}

.rp-select--compact .rp-select-icon {
    color: var(--white-transparent-90);
}

.rp-select-native.rp-select--compact {
    height: var(--space-6);
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
}

.rp-select-trigger:hover:not(:disabled) {
    border-color: var(--dark-input-border-hover);
    background-color: var(--dark-btn-ghost-hover);
}

.rp-select-trigger.rp-input--light:hover:not(:disabled) {
    background-color: var(--dark-btn-ghost-hover);
    border-color: var(--dark-input-border-hover);
}

.rp-select-trigger[aria-expanded="true"]:not(:disabled) {
    border-color: var(--secondary-color);
    box-shadow: var(--shadow-button-hover);
}

.rp-select-trigger .rp-select-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: var(--dark-text-secondary);
    transform: rotate(0deg);
    transition: transform var(--duration-normal) ease;
}

.rp-select-trigger.rp-input--light .rp-select-icon {
    color: var(--white-transparent-90);
}

.rp-select-trigger[aria-expanded="true"] .rp-select-icon {
    transform: rotate(180deg);
}

.rp-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.rp-select-panel {
    position: fixed;
    z-index: 9999;
    border-radius: var(--radius-md);
    border: 1px solid var(--dark-card-border);
    box-shadow: var(--tooltip-shadow);
    padding: var(--space-1);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-height: min(320px, calc(100vh - 24px));
    overflow: auto;
    backdrop-filter: blur(10px);
}

.rp-select-panel[hidden] {
    display: none;
}

.rp-select-panel--light {
    background: rgb(var(--color-primary-rgb) / 0.92);
}

.rp-select-option {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    color: var(--dark-text-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    cursor: pointer;
    text-align: left;
}

.rp-select-panel--light .rp-select-option {
    color: var(--white-color);
}

.rp-select-panel--light .rp-select-option:hover:not(.is-disabled),
.rp-select-panel--light .rp-select-option:focus-visible:not(.is-disabled) {
    background: rgb(var(--color-white-rgb) / 0.12);
    border-color: rgb(var(--color-white-rgb) / 0.22);
}

.rp-select-panel--light .rp-select-option.is-selected:not(.is-disabled) {
    background: rgb(var(--color-secondary-rgb) / 0.22);
    border-color: rgb(var(--color-secondary-rgb) / 0.32);
}
.rp-select-option:hover:not(.is-disabled),
.rp-select-option:focus-visible:not(.is-disabled) {
    background: rgb(var(--color-white-rgb) / 0.06);
    border-color: var(--dark-card-border);
    outline: none;
}

.rp-select-option.is-selected:not(.is-disabled) {
    background: var(--secondary-color-transparent-10);
    border-color: var(--secondary-color-transparent-20);
}

.rp-select-option.is-disabled {
    opacity: 0.55;
    cursor: default;
}

racepace-menu-item {
    display: none;
}

/* Two-label toggle unit (dark variant) */
.rp-toggle-unit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rp-toggle-unit-track {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.25rem;
    padding: 0.15rem 0.35rem;
    border-radius: 999px;
    background-color: var(--dark-input-bg);
    border: 1px solid var(--dark-input-border);
    min-width: 140px;
}

.rp-toggle-unit--disabled {
    opacity: 0.6;
}

.rp-toggle-unit--disabled .rp-toggle-unit-label--active {
    color: rgb(var(--color-white-rgb) / 0.65) !important;
}

.rp-toggle-unit--disabled .rp-toggle-unit-thumb {
    background-color: rgb(var(--color-white-rgb) / 0.35) !important;
}

.rp-toggle-unit-label {
    position: relative;
    z-index: 2;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--white-color);
    cursor: pointer;
    border-radius: 999px;
    white-space: nowrap;
}

.rp-toggle-unit-thumb {
    position: absolute;
    z-index: 1;
    top: 2px;
    bottom: 2px;
    border-radius: 999px;
    background-color: var(--secondary-color);
    box-shadow: var(--shadow-button);
    transition: left 0.2s ease, width 0.2s ease;
}

/* Light variant – matches onboarding survey look */
.rp-toggle-unit--light .rp-toggle-unit-track {
    background-color: var(--dark-btn-ghost-bg);
    border-color: var(--dark-input-border);
    box-shadow: var(--shadow-input);
    padding: 0.2rem 0.4rem;
    min-width: 160px;
}

.rp-toggle-unit .rp-toggle-unit-label {
    color: var(--white-transparent-90);
    font-size: 0.8rem;
}

.rp-toggle-unit .rp-toggle-unit-label--active {
    color: var(--white-color);
}

.rp-toggle-unit .rp-toggle-unit-label:focus-visible {
    outline: 2px solid var(--secondary-color-transparent-30);
    outline-offset: 2px;
}

.rp-toggle-unit .rp-toggle-unit-thumb {
    background-color: var(--secondary-color);
}

/* Generic chip component */
.rp-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
    margin-right: 0.15rem;
    padding: 0.1rem 1rem;
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    border-radius: 24px;
    width: 6rem;
    box-sizing: border-box;
    user-select: none;
    cursor: default;
}

.rp-chip--two-line {
    flex-direction: column;
    gap: 0.1rem;
}

.rp-chip--compact {
    padding: 0.05rem 0.75rem;
    width: auto;
}

.rp-chip-main {
    font-size: 0.65rem;
    font-weight: 500;
}

.rp-chip-sub {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
}

/* Info tooltip icon used next to labels and toggles */
.rp-info-tooltip {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    color: var(--dark-text-secondary);
    cursor: default;
    transition: color 0.2s;
    margin: 0;
    transform: translateY(-0.5rem);
}

.rp-info-tooltip:hover {
    color: var(--white-transparent-90);
}

/* Generic toggle switch */
.rp-toggle-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.rp-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.rp-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--dark-input-bg);
    transition: 0.3s;
    border-radius: 34px;
    border: 1px solid var(--dark-input-border);
}

.rp-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: var(--white-transparent-90);
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px var(--primary-color-shadow-dark);
}

.rp-toggle-switch input:checked + .rp-toggle-slider {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.rp-toggle-switch input:checked + .rp-toggle-slider:before {
    transform: translateX(18px);
    background-color: var(--white-color);
}

.rp-toggle-switch input:focus + .rp-toggle-slider {
    box-shadow: 0 0 0 2px var(--secondary-color-transparent-30);
}

.rp-toggle-switch input:disabled + .rp-toggle-slider {
    opacity: 0.5;
    cursor: default;
}

/* Light variant – matches onboarding survey inputs */
.rp-toggle-switch--light .rp-toggle-slider {
    background-color: var(--dark-btn-ghost-bg);
    border-color: var(--dark-input-border);
}

.rp-toggle-switch--light input:checked + .rp-toggle-slider {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

/* Generic toggle layout wrapper */
.rp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Generic tooltip */
.rp-tooltip-trigger {
    position: relative;
    display: inline-flex;
    cursor: help;
    margin-left: 4px;
}

.rp-tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    color: var(--dark-text-secondary);
}

.rp-tooltip {
    visibility: hidden;
    width: 280px;
    background-color: var(--tooltip-bg-dark);
    border: 1px solid var(--dark-card-border);
    color: var(--dark-text-primary);
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 9999;
    top: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.8rem;
    line-height: 1.4;
    font-weight: normal;
    box-shadow: var(--tooltip-shadow);
    pointer-events: none;
}

.rp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    line-height: 1;
    vertical-align: middle;
}

.rp-badge--orange {
    color: var(--secondary-color);
    background-color: var(--secondary-color-transparent-20);
}

.rp-badge--blue {
    color: var(--tertiary-color);
    background-color: var(--tertiary-color-transparent-20);
}

.rp-tooltip--floating {
    position: fixed;
    pointer-events: auto;
}

.rp-tooltip-trigger:hover .rp-tooltip,
.rp-tooltip-trigger:focus-within .rp-tooltip {
    visibility: visible;
    opacity: 1;
}

.rp-tooltip::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--dark-card-border) transparent;
}

/* Alert */
.rp-alert {
    display: block;
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 10000;
    max-width: min(420px, calc(100vw - (var(--space-4) * 2)));
    opacity: 0;
    transform: translateY(var(--space-1));
    pointer-events: none;
    transition: opacity var(--duration-normal) ease, transform var(--duration-normal) ease;
}

.rp-alert[hidden] {
    display: none;
}

.rp-alert.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.rp-alert__content {
    border: 1px solid var(--dark-card-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--dark-text-primary);
    background: var(--dark-card-bg);
    box-shadow: var(--shadow-button);
}

.rp-alert--success .rp-alert__content {
    border-color: var(--success-green);
    background: var(--success-green);
    color: var(--white-color);
}

.rp-alert--error .rp-alert__content {
    border-color: var(--cancel-red);
    background: var(--cancel-red-transparent);
    color: var(--cancel-red);
}

/* Tabs component */

.rp-tabs {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

@media (max-width: 768px) {
    .rp-tabs {
       
        gap: var(--space-1);
    }
}

/* Tabs list – same style as .rp-toggle-unit-track */
.rp-tabs .tabs__list {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.25rem;
    margin: 0;
    padding: 0 0.35rem;
    height: 40px;
    border-radius: 999px;
    background-color: var(--dark-input-bg);
    border: 1px solid var(--dark-input-border);
    min-width: 140px;
    --rp-tabs-pill-left: 3px;
    --rp-tabs-pill-width: 0px;
}

.rp-tabs .tabs__list::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 2px;
    bottom: 2px;
    left: var(--rp-tabs-pill-left);
    width: var(--rp-tabs-pill-width);
    border-radius: 999px;
    background-color: var(--secondary-color);
    box-shadow: var(--shadow-button);
    opacity: 0;
    transition: left 0.2s ease, width 0.2s ease, opacity 0.2s ease;
}

.rp-tabs .tabs__list.has-active-pill::before {
    opacity: 1;
}

/* Tabs – same base style as .rp-toggle-unit-label */
.rp-tabs .tabs__tab {
    position: relative;
    z-index: 2;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--white-transparent-90);
    cursor: pointer;
    border-radius: 999px;
    white-space: nowrap;
    outline: none;
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    min-width: 0;
    height: 100%;
}

/* On smaller screens, keep the strip size fixed and allow horizontal scrolling. */
@media (max-width: 768px) {
    .rp-tabs .tabs__list {
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        /* Lets scroll positioning leave room for pill expansion at edges */
        scroll-padding-inline: 6px;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }

    .rp-tabs .tabs__list::-webkit-scrollbar {
        display: none; /* WebKit */
    }

    .rp-tabs .tabs__tab {
        flex: 0 0 auto;
    }
}

.rp-tabs .tabs__tab:hover {
    color: var(--white-color);
}

.rp-tabs .tabs__tab:focus-visible {
    outline: 2px solid var(--secondary-color-transparent-30);
    outline-offset: 2px;
}

/* Active tab – same as .rp-toggle-unit-label--active + pill (orange bg) */
.rp-tabs .tabs__tab.is-active,
.rp-tabs [role="tab"][aria-selected="true"] {
    color: var(--white-color);
    background-color: transparent;
    border-top: none;
    border-bottom: none;
    box-shadow: none;
    animation: rpTabsPillPop 180ms ease-out;
}

.rp-tabs .tabs__panel {
    padding-block: var(--space-3);
    background: var(--dark-card-bg);
    border-radius: var(--radius-md);
    color: var(--dark-text-primary);
}

/* Compact variant – denser tabs for tight spaces */

.rp-tabs--compact {
    gap: var(--space-2);
}

.rp-tabs--compact .tabs__list {
    gap: 0;
}

.rp-tabs--compact .tabs__tab {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
}

@keyframes rpTabsPillPop {
    0% {
        transform: scale(0.98);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    70% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

@media (min-width: 768px) {
    .rp-tabs {
        gap: var(--space-2);
    }

    .rp-tabs .tabs__panel {
        padding-inline: var(--space-4);
        padding-block: var(--space-4);
    }
}