/* ithive.values -- profile column block + side-panel form                   */
/* Zone colour tokens: defined here so the form works even if :root is bare.  */
/* ARCHITECTURE NOTE: --values-zone-* is the module's sole CSS-variable       */
/* namespace. Hex values are a domain exception to the UI-canon rule against  */
/* custom colours -- they represent semantic score zones (negative/neutral/   */
/* positive) that have no equivalent in the Bitrix UI Kit palette.            */
:root {
    --values-zone-negative: #FF5752;
    --values-zone-neutral:  #FFA900;
    --values-zone-positive: #9DCF00;
}

/* ========== Profile column block button ========== */

/*
 * "Assess values" button -- styled to match the native gamification "Thanks"
 * (SPASIBO) button: a filled cyan pill that lightens on hover. It sits below
 * the mini-analytics; the top margin only applies when the analytics above it
 * is present (a colleague with no analytics access sees the button alone).
 */
.ithive-values-assess-block .ithive-values-assess-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 34px;
    padding: 0 18px;
    border: 1px solid #3bc8f5;
    border-radius: 100px;
    background: #3bc8f5;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ithive-values-mini:not(:empty) + .ithive-values-assess-btn {
    margin-top: 14px;
}

.ithive-values-assess-block .ithive-values-assess-btn:hover {
    background: #3eddff;
    border-color: #3eddff;
}

.ithive-values-assess-block .ithive-values-assess-btn:active {
    background: #12b1e3;
    border-color: #12b1e3;
}

.ithive-values-assess-block .ithive-values-assess-btn:focus {
    outline: 2px solid #3bc8f5;
    outline-offset: 2px;
}

/* ========== Form wrapper (inside SidePanel) ========== */

/*
 * Local design tokens scoped to the form: a soft, airy, Bitrix24 AIR-flavoured
 * surface. Hex tokens here are neutral chrome (ink/lines/surfaces), distinct
 * from the score-zone colours, which stay in the --values-zone-* :root namespace.
 */
.ithive-values-form {
    --ivf-ink:      #1f2329;
    --ivf-ink-soft: #828b9a;
    --ivf-line:     #e7e9ee;
    --ivf-surface:  #f6f7f9;
    --ivf-accent:   #2e8fff;

    position: relative;
    padding: 28px 28px 26px;
    font-family: var(--ui-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-size: 14px;
    color: var(--ivf-ink);
    box-sizing: border-box;
    /* gentle tinted glow in the top corners, fading into white */
    background:
        radial-gradient(120% 80% at 18% -10%, rgba(59, 200, 245, 0.10), rgba(59, 200, 245, 0) 60%),
        radial-gradient(120% 90% at 95% -20%, rgba(157, 207, 0, 0.10), rgba(157, 207, 0, 0) 55%),
        #ffffff;
    /* the whole form floats up on open */
    animation: ivf-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ivf-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Staggered reveal of the title and each row */
.ithive-values-form__title,
.ithive-values-form__group,
.ithive-values-form__actions {
    animation: ivf-fade 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ithive-values-form__title                { animation-delay: 0.02s; }
.ithive-values-form__group:nth-of-type(1) { animation-delay: 0.06s; }
.ithive-values-form__group:nth-of-type(2) { animation-delay: 0.10s; }
.ithive-values-form__group:nth-of-type(3) { animation-delay: 0.14s; }
.ithive-values-form__group:nth-of-type(4) { animation-delay: 0.18s; }
.ithive-values-form__actions              { animation-delay: 0.22s; }
@keyframes ivf-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ithive-values-form,
    .ithive-values-form__title,
    .ithive-values-form__group,
    .ithive-values-form__actions { animation: none; }
}

.ithive-values-form__title {
    margin: 0 0 22px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ivf-ink);
}

/* ========== Field groups (ui-ctl-compatible wrapper) ========== */

.ithive-values-form__group {
    margin-bottom: 22px;
}

/* Micro-label: small, uppercase, tracked -- the AIR system's field caption */
.ithive-values-form__label {
    display: block;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ivf-ink-soft);
}

/* ========== Value icons row ========== */

.ithive-values-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

/*
 * Balanced multi-row layout. When the badges do not fit one row, the JS
 * (_renderForm) pre-splits them into evenly filled rows and adds --rows here,
 * so we stack those row groups vertically and left-align them. A single row
 * keeps the default wrap behaviour above.
 */
.ithive-values-icons--rows {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.ithive-values-icons-row {
    display: flex;
    gap: 10px;
}

/*
 * Value badge: a glossy rounded squircle whose fill colour comes from the DB
 * COLOR field. The JS sets that via inline `background-color` (not the
 * `background` shorthand) so the diagonal sheen `background-image` below layers
 * on top of it. The springy cubic-bezier gives the hover/select a playful pop.
 */
.ithive-values-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    -webkit-user-select: none;
    user-select: none;
    box-sizing: border-box;
    background-color: #cccccc; /* fallback when COLOR is empty */
    background-image: linear-gradient(155deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 55%);
    box-shadow: 0 4px 10px rgba(20, 30, 50, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease, opacity 0.2s ease;
}

.ithive-values-icon:hover {
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 9px 20px rgba(20, 30, 50, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.ithive-values-icon:active {
    transform: translateY(-1px) scale(1.0);
}

/* Selected: lift, accent ring, and a popped-in check badge */
.ithive-values-icon--active {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 0 0 4px rgba(46, 143, 255, 0.18),
                0 10px 22px rgba(20, 30, 50, 0.26),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.ithive-values-icon--active::after {
    content: '';
    position: absolute;
    right: -5px;
    top: -5px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #ffffff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%232e8fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
        center / 11px 11px no-repeat;
    box-shadow: 0 2px 6px rgba(20, 30, 50, 0.28);
    animation: ivf-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes ivf-pop {
    0%   { transform: scale(0);    opacity: 0; }
    60%  { transform: scale(1.25);             }
    100% { transform: scale(1);    opacity: 1; }
}

/* All-others-dimmed state (applied to non-selected icons when any is active) */
.ithive-values-icon--dimmed {
    opacity: 0.34;
    transform: scale(0.94);
    box-shadow: 0 2px 6px rgba(20, 30, 50, 0.10);
}

.ithive-values-icon__letter,
.ithive-values-icon__symbol {
    line-height: 1;
    pointer-events: none;
}

/* Uploaded icon file (task 78336): fills the badge, same rounding as the
   badge itself so it reads as one shape, not a photo pasted on a swatch. */
.ithive-values-icon__image {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    pointer-events: none;
}

/* Name of the selected value, shown below the row as a soft chip */
.ithive-values-icon__selected-name {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin-top: 2px;
    padding: 5px 14px;
    border-radius: 100px;
    background: var(--ivf-surface);
    border: 1px solid var(--ivf-line);
    font-size: 13px;
    font-weight: 600;
    color: var(--ivf-ink);
}

/* Hidden when per-badge captions are shown (the chip would be redundant). */
.ithive-values-icon__selected-name--hidden {
    display: none;
}

/*
 * Per-badge name captions (admin option panel_show_value_names = Y).
 * Each badge sits in a fixed-width column cell with its name beneath it; the
 * JS drops the per-row cap to 5 so the wider cells still fit the SidePanel.
 * Names vary in length (one to three words) so captions wrap and centre.
 */
.ithive-values-icon-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 82px;
}

.ithive-values-icon__caption {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
    color: var(--ivf-ink-soft, #828b9a);
    overflow-wrap: break-word;
    word-break: break-word;
    transition: color 0.2s ease, opacity 0.2s ease;
}

/* Caption follows its badge as the immediate sibling, so mirror the badge's
 * selected / dimmed states onto it without any extra JS. */
.ithive-values-icon--active + .ithive-values-icon__caption {
    color: var(--ivf-ink);
    font-weight: 600;
}

.ithive-values-icon--dimmed + .ithive-values-icon__caption {
    opacity: 0.4;
}

/* ========== Score slider with coloured zones ========== */

.ithive-values-score {
    padding-top: 8px;
}

/*
 * The slider lane is position:relative and reserves headroom (padding-top) for
 * the floating score bubble (.__output) that rides above the thumb.
 */
.ithive-values-score__row {
    position: relative;
    padding-top: 46px;
    margin-bottom: 12px;
}

/*
 * Range track fill uses two CSS custom properties injected by JS on the form
 * container element:
 *   --ivf-fill-pct  : percentage width of the filled part (e.g. "44.4%")
 *   --ivf-zone-color: current zone colour (read from --values-zone-* variables)
 * Initial values (score=5, neutral zone) are set in _applyScoreZone().
 */
.ithive-values-score__range {
    display: block;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 100px;
    outline: none;
    cursor: pointer;
    /* Gradient produces the filled-track effect without extra DOM elements */
    background: linear-gradient(
        to right,
        var(--ivf-zone-color, var(--values-zone-neutral)) var(--ivf-fill-pct, 44.4%),
        #e9ecf1                                            var(--ivf-fill-pct, 44.4%)
    );
}

/* Webkit track + thumb (white knob ringed in the active zone colour) */
.ithive-values-score__range::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 100px;
}
.ithive-values-score__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    margin-top: -8px;   /* centre the 24px knob on the 8px track */
    border-radius: 50%;
    background: #ffffff;
    cursor: grab;
    border: 5px solid var(--ivf-zone-color, var(--values-zone-neutral));
    box-shadow: 0 3px 10px rgba(20, 30, 50, 0.25);
    transition: border-color 0.15s ease, transform 0.12s ease;
}
.ithive-values-score__range::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.12);
}

/* Firefox track and thumb */
.ithive-values-score__range::-moz-range-track {
    height: 8px;
    border-radius: 100px;
    background: #e9ecf1;
}
.ithive-values-score__range::-moz-range-progress {
    height: 8px;
    border-radius: 100px 0 0 100px;
    background: var(--ivf-zone-color, var(--values-zone-neutral));
}
.ithive-values-score__range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    cursor: grab;
    border: 5px solid var(--ivf-zone-color, var(--values-zone-neutral));
    box-shadow: 0 3px 10px rgba(20, 30, 50, 0.25);
}

/*
 * Floating score bubble. It glides above the thumb: its centre is positioned
 * with calc() using the unitless --ivf-fill-frac (0..1) so it stays locked to
 * the thumb at every value, including the track ends. The little rotated square
 * below forms a tail pointing at the knob. Colour follows the active zone.
 */
.ithive-values-score__output {
    position: absolute;
    top: 0;
    left: calc(12px + (100% - 24px) * var(--ivf-fill-frac, 0.444));
    transform: translateX(-50%);
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--ivf-zone-color, var(--values-zone-neutral));
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 6px 16px rgba(20, 30, 50, 0.22);
    transition: left 0.14s cubic-bezier(0.22, 1, 0.36, 1), background 0.15s ease;
}
.ithive-values-score__output::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 12px;
    height: 12px;
    transform: translateX(-50%) rotate(45deg);
    background: inherit;
    border-radius: 3px;
}

/* Tick marks 1..10 below the track */
.ithive-values-score__ticks {
    display: flex;
    justify-content: space-between;
    /* 11px inset aligns ticks with thumb centres at the range endpoints */
    padding: 0 11px;
    margin-bottom: 12px;
}

.ithive-values-score__ticks span {
    font-size: 10px;
    color: #b7bdc7;
    line-height: 1;
    text-align: center;
}

/*
 * Zone legend below the ticks: soft pastel pills with the zone colour as text,
 * gapped (not a single hard bar). Flex values match the proportional width of
 * each zone relative to the track, using mid-point boundaries:
 *   Negative end = midpoint(3,4) = 27.8%  -> flex 27.8
 *   Neutral end  = midpoint(6,7) = 61.1%  -> flex 33.3
 *   Positive end = 100%                    -> flex 38.9
 * Pastel fills are static (a fixed legend); the live zone signal is carried by
 * the slider fill, thumb ring, and bubble, which all follow --values-zone-*.
 */
.ithive-values-score__zones {
    display: flex;
    gap: 8px;
    font-size: 11px;
    line-height: 1.25;
}

.ithive-values-score__zone {
    padding: 7px 8px;
    border-radius: 10px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ithive-values-score__zone--negative { flex: 27.8; background: #ffe7e7; color: #e0463f; }
.ithive-values-score__zone--neutral  { flex: 33.3; background: #fff1d6; color: #c98600; }
.ithive-values-score__zone--positive { flex: 38.9; background: #edf6d1; color: #6f9000; }

/* ========== Anonymity select (custom chevron; rounded; focus glow) ========== */

.ithive-values-form__select {
    width: 100%;
    height: 48px;
    padding: 0 44px 0 16px;
    border: 1.5px solid var(--ivf-line);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: var(--ivf-ink);
    background-color: var(--ivf-surface);
    /* chevron drawn as an inline SVG so no icon font / image asset is needed */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23828b9a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

/* Hover/focus tint the chevron with the accent colour (swapped SVG stroke). */
.ithive-values-form__select:hover {
    border-color: #d3d7df;
    background-color: #eef0f3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232e8fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.ithive-values-form__select:focus {
    outline: none;
    border-color: var(--ivf-accent);
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232e8fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    box-shadow: 0 0 0 4px rgba(46, 143, 255, 0.14);
}

/* Honour native option styling where the browser allows it (Firefox; Chrome partial) */
.ithive-values-form__select option {
    color: var(--ivf-ink);
    background: #ffffff;
}

/* ========== Comment textarea (rounded; focus glow) ========== */

.ithive-values-form__textarea {
    width: 100%;
    min-height: 84px;
    padding: 14px 16px;
    border: 1.5px solid var(--ivf-line);
    border-radius: 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ivf-ink);
    background: var(--ivf-surface);
    box-sizing: border-box;
    resize: vertical;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.ithive-values-form__textarea::placeholder {
    color: #aab0bb;
}

.ithive-values-form__textarea:focus {
    outline: none;
    border-color: var(--ivf-accent);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(46, 143, 255, 0.14);
}

/* ========== Comment emoji quick-insert bar ========== */

/*
 * A compact palette under the comment box. Glyphs are injected at runtime from
 * BX.message('..._COMMENT_EMOJI_SET') (the bundle source stays ASCII); a click
 * inserts the emoji at the caret. The chips pop on hover for a little joy.
 */
.ithive-values-emoji {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.ithive-values-emoji__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--ivf-line);
    border-radius: 10px;
    background: #ffffff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.ithive-values-emoji__btn:hover {
    transform: translateY(-2px) scale(1.12);
    background: var(--ivf-surface);
    border-color: #d3d7df;
    box-shadow: 0 6px 14px rgba(20, 30, 50, 0.14);
}

.ithive-values-emoji__btn:active {
    transform: translateY(0) scale(1.0);
}

/* ========== Status message (animated pill) ========== */

.ithive-values-form__status {
    min-height: 22px;
    margin-bottom: 14px;
    font-size: 13px;
}

.ithive-values-form__msg--ok,
.ithive-values-form__msg--err {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 100px;
    font-weight: 600;
    animation: ivf-pop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ithive-values-form__msg--ok  { color: #2e7d18; background: rgba(157, 207, 0, 0.16); }
.ithive-values-form__msg--err { color: #d23a35; background: rgba(255, 87, 82, 0.14); }

/* ========== Action buttons ========== */

/*
 * The buttons keep their Bitrix UI Kit classes (.ui-btn .ui-btn-primary/-link)
 * for behaviour, but are restyled here. Overrides are #id-scoped so they beat
 * the single-class UI Kit rules on specificity alone -- no !important needed.
 */
.ithive-values-form__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 6px;
}

#ivf-submit {
    height: 46px;
    padding: 0 26px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #3bc8f5 0%, #2e8fff 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(46, 143, 255, 0.34);
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
#ivf-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(46, 143, 255, 0.42);
    filter: saturate(1.08);
}
#ivf-submit:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(46, 143, 255, 0.34);
}

#ivf-cancel {
    height: 46px;
    padding: 0 18px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--ivf-ink-soft);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}
#ivf-cancel:hover {
    background: var(--ivf-surface);
    color: var(--ivf-ink);
}

/* ========== Block head action buttons (eye / gear) ========== */

/*
 * The Bitrix profile block-head is block-level by default; we turn it flex so
 * the title sits on the left and our icon buttons float to the right via
 * margin-left:auto on .ithive-values-head-actions.
 */
.ithive-values-assess-block .intranet-user-profile-column-block-head {
    display: flex;
    align-items: center;
}

/* Match the native block title size (e.g. the "Bonus program" block == 18px). */
.ithive-values-assess-block .intranet-user-profile-column-block-title {
    font-size: 18px;
    line-height: 24px;
    color: #333333;
}

.ithive-values-head-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}

.ithive-values-head-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #a8adb4;
    padding: 0;
    transition: color 0.15s ease, background 0.15s ease;
    line-height: 1;
}

.ithive-values-head-btn:hover {
    color: #525c69;
    background: #f0f1f3;
}

.ithive-values-head-btn svg {
    display: block;
    pointer-events: none;
}

/* ========== Profile mini-analytics (Phase 5B/5C) ========== */

/*
 * Compact analytics shown in the profile "Assess employee" block: a value rose
 * (radar) on the left and, to its right, a total count plus a scrollable list
 * of per-value averages. A zone-distribution bar sits below. The whole block is
 * kept under 360px tall. The host collapses (display:none) when access is
 * denied, so a colleague sees only the assess button.
 */
.ithive-values-mini:empty {
    display: none;
}

.ithive-values-mini__empty {
    font-size: 12px;
    color: #525c69;
    text-align: left;
    padding: 8px 0;
    line-height: 1.45;
}

/* Radar (left) + info column (right) */
.ithive-values-mini__top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* Radar: left-aligned, fixed width; hover surfaces its tooltip. */
.ithive-values-mini__radar {
    flex-shrink: 0;
    width: 160px;
    cursor: help;
}

.ithive-values-mini__radar-svg {
    display: block;
    width: 100%;
    height: auto;
}

.ithive-values-mini__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ithive-values-mini__total {
    font-size: 12px;
    color: #5b5b5b;
    margin-bottom: 6px;
}

.ithive-values-mini__total b {
    color: #333333;
    font-weight: 600;
}

/*
 * Per-value list. Row height is radar-height / 8 (160 / 8 = 20px), so eight
 * rows fill the radar; a ninth value triggers the scrollbar (overflow-y:auto).
 * The 5px right padding keeps the scrollbar clear of the text.
 */
.ithive-values-mini__list {
    max-height: 160px;
    overflow-y: auto;
    margin: 0;
    padding: 0 5px 0 0;
    list-style: none;
    scrollbar-width: thin;
    box-sizing: border-box;
}

.ithive-values-mini__list::-webkit-scrollbar {
    width: 6px;
}

.ithive-values-mini__list::-webkit-scrollbar-thumb {
    background: #d4d7dc;
    border-radius: 3px;
}

.ithive-values-mini__row {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 20px;
    font-size: 11px;
    color: #5b5b5b;
}

.ithive-values-mini__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ithive-values-mini__name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ithive-values-mini__avg {
    flex-shrink: 0;
    font-weight: 600;
    color: #333333;
}

/* Zone-distribution bar: taller, counts written inside, tooltip on hover. */
.ithive-values-mini__bar {
    display: flex;
    width: 100%;
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
    background: #eef0f2;
    margin-top: 12px;
    cursor: help;
}

.ithive-values-mini__bar-seg {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ithive-values-mini__bar-val {
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}