/*
 * report-mood.css — MyBest24 Mood Panel Styles
 *
 * Owns: face picker, depth section, tag pills, log button, log entries,
 *       streak badge, weekly sparkline, correlation cards.
 * Does NOT own: stage shell (.stage-panel, .stage-panel-body, etc.) → stage.css
 *               shared tab bar (.report-tab-bar, .report-tab) → report-food.css
 *               shared log list (.stage-log-list, .stage-log-empty) → stage.css
 *
 * Load after stage.css in index.html:
 *   <link rel="stylesheet" href="report-mood.css">
 *
 * CRITICAL — emoji filter rule:
 *   Face images (.mood-face-img) must NEVER receive --icon-accent-filter.
 *   emojiApplyToElement() already sets filter:none inline (Layer 1 defense).
 *   The .mood-face-img rule below sets filter:none !important (Layer 2 defense).
 *   Do not add any class to .mood-face-img that carries filter:var(--icon-accent-filter).
 */


/* ── Panel body ───────────────────────────────────────────────────────────── */

#mood-panel .stage-panel-body {
    padding-bottom: 56px;
    min-height: 60vh;
    min-height: 60dvh;
}


/* ── Streak badge ─────────────────────────────────────────────────────────── */

.mood-streak-wrap {
    display: flex;
    justify-content: center;
    padding: 8px 0 4px;
    min-height: 28px; /* reserve space so layout doesn't shift on first log */
}

.mood-streak-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-color);
    letter-spacing: 0.02em;
}

.mood-weekly-streak {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
}


/* ── Face picker ──────────────────────────────────────────────────────────── */

.mood-face-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 0 4px;
}

.mood-face-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    padding: 8px 4px;
    background: none;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
}

.mood-face-btn:hover {
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.mood-face-btn--selected {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    border-color: var(--accent-color);
    transform: scale(1.06);
}

/* Emoji images — filter:none is required and enforced at two layers:
   (1) emojiApplyToElement() sets el.style.filter = 'none' inline
   (2) This CSS rule adds !important as a second line of defense */
.mood-face-img {
    display: block;
    width: 40px;
    height: 40px;
    image-rendering: pixelated;
    filter: none !important; /* CRITICAL: emojis must never be tinted by accent filter */
}

.mood-face-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
}

.mood-face-btn--selected .mood-face-label {
    color: var(--accent-color);
}

@media (prefers-reduced-motion: reduce) {
    .mood-face-btn { transition: none; }
}


/* ── Depth toggle ─────────────────────────────────────────────────────────── */

.mood-depth-toggle-wrap {
    display: flex;
    justify-content: flex-start;
    padding: 4px 0 2px;
}

.mood-depth-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 0;
    letter-spacing: 0.02em;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.mood-depth-toggle:hover { color: var(--text-main); }

.mood-depth-caret {
    font-size: 0.65rem;
    margin-left: 3px;
    opacity: 0.7;
}


/* ── Depth section: tags + note ───────────────────────────────────────────── */

.mood-depth-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 0 4px;
}

.mood-depth-hidden {
    display: none;
}


/* ── Tag pills ────────────────────────────────────────────────────────────── */

.mood-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.mood-tag-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-muted);
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

.mood-tag-pill:hover {
    border-color: var(--accent-color);
    color: var(--text-main);
}

.mood-tag-pill--selected {
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    border-color: var(--accent-color);
    color: var(--accent-color);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .mood-tag-pill { transition: none; }
}


/* ── Note input ───────────────────────────────────────────────────────────── */

/* reflect-textarea provides background, border, color, font.
   This override removes resize handle (not needed for short notes). */
.mood-note-input {
    resize: none;
    font-size: 0.85rem;
    padding: 7px 10px;
}


/* ── Log button ───────────────────────────────────────────────────────────── */

.mood-log-btn {
    width: 100%;
    margin-top: 12px;
    padding: 11px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    background: var(--accent-color);
    color: var(--bg-dark, #0a0a0a);
    border: none;
    cursor: pointer;
    transition: opacity 0.15s;
    letter-spacing: 0.3px;
}

.mood-log-btn:hover:not(:disabled)  { opacity: 0.85; }
.mood-log-btn:active:not(:disabled) { opacity: 0.7; }

.mood-log-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .mood-log-btn { transition: none; }
}


/* ── Log confirmation ─────────────────────────────────────────────────────── */

.mood-log-confirm {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-color);
    margin: 6px 0 0;
    min-height: 20px;
}

.mood-log-confirm[hidden] { display: none; }


/* ── Log entries ──────────────────────────────────────────────────────────── */

.mood-log-entry {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.mood-log-face {
    font-size: 16px;
    line-height: 1.3;
    flex-shrink: 0;
    /* Unicode emoji — no filter needed */
}

.mood-log-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mood-log-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main);
}

.mood-log-detail {
    font-size: 0.73rem;
    color: var(--text-muted);
    line-height: 1.3;
    overflow-wrap: break-word;
}


/* ── Weekly wrapper ───────────────────────────────────────────────────────── */

.mood-weekly-wrap {
    padding: 0 0 16px;
}


/* ── Sparkline ────────────────────────────────────────────────────────────── */

.mood-sparkline-section {
    margin-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 4px;
}

.mood-sparkline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.mood-sparkline-empty {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
    margin: 6px 0 4px;
}

.mood-net {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Positive delta = mood improved (good) */
.mood-net--up   { color: var(--accent-color); }
/* Negative delta = mood declined */
.mood-net--down { color: var(--color-report-warning, #c9913d); }

.mood-sparkline {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.mood-sparkline-line {
    stroke: var(--accent-color);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.mood-sparkline-dot {
    fill: var(--accent-color);
    opacity: 0.65;
}

.mood-sparkline-dot--today {
    opacity: 1;
}

.mood-day-label {
    fill: var(--text-muted, rgba(255, 255, 255, 0.5));
    font-size: 7px;
    text-anchor: middle;
    font-family: inherit;
}

.mood-day-label--today {
    fill: var(--accent-color);
    font-weight: 700;
}

.mood-val-label {
    fill: var(--text-main, #fff);
    font-size: 7.5px;
    font-weight: 600;
    text-anchor: middle;
    font-family: inherit;
}


/* ── Correlation cards ────────────────────────────────────────────────────── */

.mood-correlation-section {
    margin-top: 16px;
}

.mood-correlation-note {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-style: italic;
    margin: 4px 0 10px;
}

.mood-correlation-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mood-correlation-card {
    background: color-mix(in srgb, var(--accent-color) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 20%, transparent);
    border-radius: 8px;
    padding: 10px 12px;
}

.mood-correlation-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.mood-correlation-values {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.mood-correlation-with,
.mood-correlation-without {
    font-size: 0.82rem;
    color: var(--text-main);
    font-weight: 600;
}

.mood-correlation-without {
    color: var(--text-muted);
    font-weight: 500;
}

.mood-correlation-delta {
    font-size: 0.78rem;
    font-weight: 700;
}

.mood-correlation-delta--pos { color: var(--accent-color); }
.mood-correlation-delta--neg { color: var(--color-report-warning, #c9913d); }

.mood-correlation-unlock {
    background: color-mix(in srgb, var(--accent-color) 5%, transparent);
    border: 1px dashed color-mix(in srgb, var(--accent-color) 30%, transparent);
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 8px;
}

.mood-correlation-unlock-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}


/* ── Expanded mode ────────────────────────────────────────────────────────── */

#mood-panel.stage-panel-expanded .stage-cally-row {
    padding-left: 100px;
    padding-right: 100px;
}


/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .mood-face-label { font-size: 0.58rem; }
    .mood-tag-pill   { font-size: 0.68rem; padding: 3px 8px; }
}