/*
 * Header info-chip widgets
 *
 * Compact span elements rendered by helpers/header_sections/InfoChipBase.php
 * via HeaderSection classes (MoonPhase, SunRiseSet, LocalTime, Countdown,
 * OpenClosed, DayCounter, Weather, Tides, IssPass, PlanetsVisible).
 *
 * Every chip ships with .website-chip plus a type-specific modifier
 * (.website-chip-moon_phase, .website-chip-weather, ...). Styling here
 * targets only the shared envelope; per-type tweaks should be rare and
 * live under .website-chip-{key}.
 */

.website-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-base);
    font-size: var(--font-size-xs);
    line-height: 1.2;
    transition: var(--transition-colors);
    /* Inherit the strip's contrast color (surface/primary/dark/light/custom all
       publish a readable, theme-aware `color` on the strip). A Default text_color
       chip emits no inline color, so inheriting keeps it legible on every
       background; an explicitly picked color still wins via inline style. */
    color: inherit;
    background: transparent;
    cursor: default;
    user-select: none;
    white-space: nowrap;
}

.website-chip-labeled {
    font-size: var(--font-size-sm);
}

.website-chip-icon {
    display: inline-flex;
    align-items: center;
    font-size: 1.05em;
    line-height: 1;
}

.website-chip-label {
    /* Muted shade of the inherited strip color so the label adapts to the
       background/theme instead of a fixed grey that can wash out on dark strips. */
    color: inherit;
    opacity: 0.75;
    text-transform: none;
}

.website-chip-value {
    font-weight: 500;
}

/* Pointer affordance only when the chip is interactive (popover / tooltip). */
.website-chip[role="button"],
.website-chip[data-bs-toggle="tooltip"] {
    cursor: pointer;
}

.website-chip[role="button"]:hover,
.website-chip[data-bs-toggle="tooltip"]:hover {
    background: var(--bg-secondary);
}

.website-chip[role="button"]:focus-visible {
    outline: 2px solid var(--color-primary-500, currentColor);
    outline-offset: 2px;
}

/* Stale fallback indicator - a small warning dot at the chip's top-right
 * corner. Applied when a Tier 2 chip is rendering last-cached data
 * because the upstream API is down. */
.website-chip-stale {
    opacity: 0.65;
    position: relative;
}

.website-chip-stale::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-warning-500, #f0ad4e);
}

/* Active state when a popover is open against this chip. */
.website-chip[data-popover-open="true"] {
    background: var(--bg-secondary);
}

/* Manager-only "set your location" fallback for geo chips that have no
 * coordinates. Discreet by design: muted text, a warning-tinted pin, and
 * a dashed outline so it reads as a gentle config hint, not an error.
 * Only org admins ever see it (see InfoChipBase::geoMissingNotice). */
.website-chip-geo-missing,
.website-chip-geo-missing:hover,
.website-chip-geo-missing:focus {
    color: var(--text-secondary, #6c757d);
    text-decoration: none;
    border: 1px dashed var(--color-warning-500, #f0ad4e);
    opacity: 0.85;
    cursor: pointer;
}

.website-chip-geo-missing .website-chip-icon {
    color: var(--color-warning-500, #f0ad4e);
}

.website-chip-geo-missing:hover {
    opacity: 1;
    background: var(--bg-secondary);
}

/* Tighter padding on small screens so chips fit a narrow header. */
@media (max-width: 768px) {
    .website-chip {
        padding: 2px var(--space-1);
        font-size: var(--font-size-xs);
    }
    .website-chip-labeled .website-chip-label {
        display: none;
    }
}