/* ==========================================================================
   HUGiiNE MOOD FACE — GLOBAL SVG COMPONENT
   One geometry for every browser, device and size.
   ========================================================================== */

.hugiine-mood-face {
    --hugiine-mood-size: 32px;
    --hugiine-mood-bg: #58c7c1;
    --hugiine-mood-ink: #081640;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: var(--hugiine-mood-size);
    height: var(--hugiine-mood-size);
    min-width: var(--hugiine-mood-size);
    min-height: var(--hugiine-mood-size);
    max-width: var(--hugiine-mood-size);
    max-height: var(--hugiine-mood-size);

    flex: 0 0 var(--hugiine-mood-size);
    aspect-ratio: 1 / 1;
    line-height: 0;
    vertical-align: middle;

    contain: layout paint;
}

.hugiine-mood-face--default {
    --hugiine-mood-size: 32px;
}

.hugiine-mood-face--choice {
    --hugiine-mood-size: 32px;
}

.hugiine-mood-face--filter {
    --hugiine-mood-size: 20px;
}

.hugiine-mood-face--pattern {
    --hugiine-mood-size: 48px;
}

.hugiine-mood-face--calendar {
    --hugiine-mood-size: 12px;
}

.hugiine-mood-face--last {
    --hugiine-mood-size: 24px;
}

.hugiine-mood-face[data-score="1"] {
    --hugiine-mood-bg: #6750d9;
}

.hugiine-mood-face[data-score="2"] {
    --hugiine-mood-bg: #8876ed;
}

.hugiine-mood-face[data-score="3"] {
    --hugiine-mood-bg: #6eacef;
}

.hugiine-mood-face[data-score="4"] {
    --hugiine-mood-bg: #58c7c1;
}

.hugiine-mood-face[data-score="5"] {
    --hugiine-mood-bg: #88d36a;
}

.hugiine-mood-face[data-score="6"] {
    --hugiine-mood-bg: #63c94e;
}

.hugiine-mood-face[data-score="7"] {
    --hugiine-mood-bg: #3bbb38;
}

.hugiine-mood-face[data-score="unknown"] {
    --hugiine-mood-bg: #e7eef7;
    --hugiine-mood-ink: #17365c;
}

.hugiine-mood-face__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;

    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
}

.hugiine-mood-face__disc {
    fill: var(--hugiine-mood-bg);
}

.hugiine-mood-face__shine {
    fill: rgba(255, 255, 255, 0.20);
    transform: rotate(-20deg);
    transform-origin: 23px 18px;
    pointer-events: none;
}

.hugiine-mood-face__expression {
    display: none;
    color: var(--hugiine-mood-ink);
}

.hugiine-mood-face[data-score="1"] .hugiine-mood-face__expression--1,
.hugiine-mood-face[data-score="2"] .hugiine-mood-face__expression--2,
.hugiine-mood-face[data-score="3"] .hugiine-mood-face__expression--3,
.hugiine-mood-face[data-score="4"] .hugiine-mood-face__expression--4,
.hugiine-mood-face[data-score="5"] .hugiine-mood-face__expression--5,
.hugiine-mood-face[data-score="6"] .hugiine-mood-face__expression--6,
.hugiine-mood-face[data-score="7"] .hugiine-mood-face__expression--7,
.hugiine-mood-face[data-score="unknown"] .hugiine-mood-face__expression--unknown {
    display: inline;
}

.hugiine-mood-face__eye,
.hugiine-mood-face__question-dot {
    fill: currentColor;
}

.hugiine-mood-face__brow,
.hugiine-mood-face__mouth,
.hugiine-mood-face__happy-eye,
.hugiine-mood-face__question {
    fill: none;
    stroke: currentColor;
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hugiine-mood-face__brow {
    stroke-width: 3;
}

.hugiine-mood-face__happy-eye {
    stroke-width: 3.2;
}

.hugiine-mood-face__open-mouth {
    fill: currentColor;
    stroke: none;
}

.hugiine-mood-face__question {
    stroke-width: 4;
}

/* Filter buttons already own the selection ring. Keep the SVG untouched. */
#moodHistoryFilterForm .mood-history-score-option .hugiine-mood-face {
    pointer-events: none;
}

/* Agenda slots are intentionally tiny; never transform the SVG itself. */
.mood-history-agenda-mood .hugiine-mood-face {
    position: static !important;
    transform: none !important;
}

/* Colleagues: keep the two people visually together as one icon. */
[data-context-value="colleagues_work"] .mood-user-context-option-icon,
[data-history-social="colleagues_work"] .mood-history-option-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    letter-spacing: -5px !important;
    padding-right: 5px !important;
}

@media (max-width: 700px) {
    .hugiine-mood-face--filter {
        --hugiine-mood-size: 19px;
    }

    .hugiine-mood-face--calendar {
        --hugiine-mood-size: 10px;
    }

    .hugiine-mood-face--pattern {
        --hugiine-mood-size: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hugiine-mood-face,
    .hugiine-mood-face * {
        transition: none !important;
        animation: none !important;
    }
}