/* Pozorovania pri včelstve: skupiny polí vo formulári, posuvník, odznaky v zázname a karta aktuálneho stavu. */

.hv-obs-group {
    display: flex;
    flex-direction: column;
    gap: var(--hv-space-3);
}

.hv-obs-group__title {
    margin: 0;
    color: var(--hv-ink-muted);
    font-size: var(--hv-text-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.hv-obs {
    display: flex;
    flex-direction: column;
    gap: var(--hv-space-1);
    min-width: 0;
}

.hv-obs__label {
    color: var(--hv-stone-700);
    font-size: var(--hv-text-sm);
    font-weight: 600;
}

/* Pole pridané zo zoznamu: vedľa neho je tlačidlo, ktorým sa dá vyradiť (omylom pridané). */
.hv-obs-added {
    display: flex;
    align-items: flex-start;
    gap: var(--hv-space-2);
}

.hv-obs-added > .hv-obs {
    flex: 1 1 auto;
}

.hv-obs-added__remove {
    flex: none;
}

.hv-obs__select {
    min-height: var(--hv-touch);
    height: var(--hv-touch);
}

/* Posuvník: kým sa ho včelár nedotkne, je stlmený a nič neodosiela. */
.hv-slider {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--hv-space-3);
    min-height: var(--hv-touch);
}

.hv-range {
    width: 100%;
    height: var(--hv-touch);
    margin: 0;
    background: transparent;
    accent-color: var(--hv-amber-500);
    cursor: pointer;
}

.hv-slider__value {
    min-width: 5ch;
    color: var(--hv-ink);
    font-size: var(--hv-text-lg);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    text-align: right;
}

.hv-slider__max {
    color: var(--hv-ink-muted);
    font-size: var(--hv-text-sm);
    font-weight: 500;
}

.hv-slider--unset .hv-range {
    opacity: 0.45;
}

.hv-slider--unset .hv-slider__value {
    color: var(--hv-ink-muted);
}

.hv-obs-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hv-space-1);
}

/* Karta „Aktuálny stav“: názov vlastnosti vľavo, hodnota a kedy vpravo. */
.hv-current {
    display: flex;
    flex-direction: column;
    gap: var(--hv-space-2);
    margin: 0;
}

.hv-current__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hv-space-1) var(--hv-space-3);
}

.hv-current__when {
    color: var(--hv-ink-muted);
    font-size: var(--hv-text-sm);
}

/* Stavový pás v riadku včelstva: mierka sily, odznaky toho, čo si pýta pozornosť, a kedy bol posledný záznam. */
.hv-colony-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hv-space-1) var(--hv-space-2);
    margin-top: var(--hv-space-1);
    min-width: 0;
}

.hv-colony-state__strength {
    display: inline-flex;
    align-items: center;
    gap: var(--hv-space-1);
}

.hv-colony-state__num {
    font-size: var(--hv-text-sm);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.hv-colony-state__when {
    color: var(--hv-ink-subtle);
    font-size: var(--hv-text-xs);
}

/* Mierka v dielikoch; farbu určuje tón (sila pod hranicou je oranžová). */
.hv-meter {
    display: inline-flex;
    flex: none;
    gap: 2px;
}

.hv-meter__seg {
    width: 5px;
    height: 12px;
    border-radius: 1px;
    background: var(--hv-stone-200);
}

.hv-meter--ok .hv-meter__seg.is-on { background: var(--hv-ok); }
.hv-meter--warn .hv-meter__seg.is-on { background: var(--hv-warn); }
.hv-meter--bad .hv-meter__seg.is-on { background: var(--hv-bad); }

.hv-obs-title {
    margin: 0;
    font-size: var(--hv-text-base);
    font-weight: 700;
}

/* Výber pozorovaní v profile: dva zoznamy, položky sa presúvajú za úchyt (SortableJS) alebo tlačidlami. */
.hv-picklist {
    display: flex;
    flex-direction: column;
    gap: var(--hv-space-2);
    min-height: var(--hv-touch);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Prázdny zoznam ukáže, kam sa dá položka pustiť. */
.hv-picklist:not(:has(> .hv-pick)) {
    align-items: center;
    justify-content: center;
    padding: var(--hv-space-4);
    border: 1px dashed var(--hv-line-strong);
    border-radius: var(--hv-radius-sm);
}

.hv-picklist:not(:has(> .hv-pick))::before {
    content: attr(data-empty);
    color: var(--hv-ink-muted);
    font-size: var(--hv-text-sm);
    text-align: center;
}

.hv-pick {
    display: flex;
    align-items: center;
    gap: var(--hv-space-2);
    min-height: var(--hv-touch);
    padding: var(--hv-space-1) var(--hv-space-2) var(--hv-space-1) var(--hv-space-1);
    border-radius: var(--hv-radius-sm);
    background: var(--hv-surface);
    box-shadow: inset 0 0 0 1px var(--hv-line-strong);
}

.hv-pick--ghost {
    opacity: 0.4;
}

.hv-pick__handle,
.hv-pick__actions {
    display: none;
    flex: none;
}

.hv-picker--ready .hv-pick__handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--hv-touch);
    height: var(--hv-touch);
    color: var(--hv-ink-muted);
    cursor: grab;
    touch-action: none;
}

.hv-picker--ready .hv-pick__actions {
    display: flex;
    margin-left: auto;
}

/* Poradové číslo má zmysel len vo vybraných: je to poradie vo formulári. */
.hv-picklist[data-kind='selected'] {
    counter-reset: pick;
}

.hv-picklist[data-kind='selected'] .hv-pick {
    counter-increment: pick;
}

.hv-pick__num {
    display: none;
    flex: none;
    min-width: 1.5ch;
    color: var(--hv-ink-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.hv-picklist[data-kind='selected'] .hv-pick__num {
    display: inline;
}

.hv-pick__num::before {
    content: counter(pick);
}

.hv-pick__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.hv-pick__name {
    font-weight: 600;
}

.hv-pick__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--hv-space-2);
    min-width: 0;
    color: var(--hv-ink-muted);
    font-size: var(--hv-text-sm);
}

.hv-pick__group {
    flex: none;
    color: var(--hv-stone-700);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.hv-pick__values {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hv-picklist[data-kind='available'] :is(.hv-pick__up, .hv-pick__down, .hv-pick__remove),
.hv-picklist[data-kind='selected'] .hv-pick__add {
    display: none;
}

/* Na úzkej obrazovke sa o poradie postará ťahanie za úchyt; šípky zostanú pre klávesnicu a širšie okná. */
@media (max-width: 520px) {
    .hv-picker--ready .hv-pick__up,
    .hv-picker--ready .hv-pick__down {
        display: none;
    }
}