/* The parent dashboard. Calmer than the child's page — this is a screen someone
   uses in a hurry, not one they linger on — but the same idea: numbers and
   shapes instead of sentences, and targets large enough for a thumb.

   These rules are global rather than scoped to Dashboard.razor because the award
   and pool sheets render inside MudBlazor's dialog provider, outside the page's
   DOM, where scoped styles would not reach them. Everything is prefixed qx- to
   keep that global surface obviously ours. */

.qx-section-title {
    margin: 0 0 12px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}

/* --- Waiting proposals -------------------------------------------------- */

.qx-proposal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border-radius: 16px;
    background: #ffffff;
    border: 2px solid #c8e6c9;
}

.qx-proposal__text {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.qx-proposal__title {
    font-size: 1.05rem;
    /* Wrap between words; split a word only when it alone cannot fit. */
    word-break: normal;
    overflow-wrap: break-word;
}

.qx-proposal__who {
    font-weight: 700;
    margin-right: 6px;
}

.qx-proposal__points {
    font-weight: 800;
    color: #2e7d32;
}

.qx-proposal__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Child switcher ----------------------------------------------------- */

.qx-children {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.qx-child {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 6px 16px 6px 10px;
    border-radius: 999px;
    border: 2px solid #c8e6c9;
    background: #ffffff;
    color: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.qx-child--on {
    border-color: #2e7d32;
    background: #e8f5e9;
    font-weight: 700;
}

/* A switched-off hero: still readable, visibly out of play. The word does the
   work; the dashed border and the paler face are the second signal (ADR-012). */
.qx-child--off {
    border-style: dashed;
    border-color: #bdbdbd;
}

.qx-child--off .qx-child__face {
    opacity: 0.55;
}

.qx-child__off {
    font-size: 0.75rem;
    font-weight: 400;
    color: #616161;
}

.qx-child__face {
    font-size: 1.6rem;
    line-height: 1;
}

/* --- Child bar and pool ------------------------------------------------- */

.qx-childbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

/* The hero's run of days, next to their name — small, because the parent came
   here to award, not to read statistics. */
.qx-streak {
    margin-left: 10px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #fff8e1;
    color: #8d6e00;
    border: 1px solid #ffd54f;
    font-size: 0.8rem;
    font-weight: 700;
    vertical-align: middle;
    white-space: nowrap;
}

.qx-childbar__right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.qx-poolchip {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    border: 2px solid #ffd54f;
    background: #fff8e1;
    color: #8d6e00;
    font-weight: 700;
    cursor: pointer;
}

.qx-empty {
    border: 2px dashed #c8e6c9;
    border-radius: 18px;
    background: transparent;
}

/* --- Goal cards --------------------------------------------------------- */

.qx-goal {
    padding: 16px;
    border-radius: 18px;
    background: #ffffff;
    border: 2px solid #c8e6c9;
}

.qx-goal--done {
    background: #f1f8e9;
    border-color: #7cb342;
}

.qx-goal__head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.qx-goal__text {
    flex: 1 1 auto;
    min-width: 0;
}

.qx-goal__name {
    font-size: 1.15rem;
    font-weight: 700;
    /* Wrap between words; split a word only when it alone cannot fit. */
    word-break: normal;
    overflow-wrap: break-word;
}

.qx-goal__done {
    font-weight: 700;
    color: #2e7d32;
}

.qx-goal--off {
    border-style: dashed;
    border-color: #bdbdbd;
}

.qx-goal__off {
    font-size: 0.85rem;
    color: #616161;
}

/* --- Progress ring ------------------------------------------------------ */

.qx-ring {
    position: relative;
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
}

.qx-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.qx-ring__track {
    fill: none;
    stroke: #e8f5e9;
    stroke-width: 4;
}

.qx-ring__fill {
    fill: none;
    stroke: #2e7d32;
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dasharray 400ms ease;
}

.qx-ring--done .qx-ring__fill {
    stroke: #7cb342;
}

.qx-ring__label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}

.qx-ring__value {
    font-size: 1.25rem;
    font-weight: 800;
}

.qx-ring__cost {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* --- Template chips (card fast path and award sheet) -------------------- */

.qx-templates,
.qx-sheet__templates {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.qx-template {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 52px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 2px solid #c8e6c9;
    background: #f1f8e9;
    color: #1b5e20;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
}

.qx-template:hover {
    border-color: #2e7d32;
}

.qx-template__name {
    font-weight: 700;
    /* Wrap between words; split a word only when it alone cannot fit. */
    word-break: normal;
    overflow-wrap: break-word;
}

.qx-template__points {
    font-size: 1.1rem;
    font-weight: 800;
    white-space: nowrap;
}

.qx-template--more {
    background: transparent;
    border-style: dashed;
    justify-content: center;
}

.qx-sheet__custom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* --- Pool sheet --------------------------------------------------------- */

.qx-pool-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #e8f5e9;
}

.qx-pool-row:last-child {
    border-bottom: none;
}

.qx-pool-row__text {
    flex: 1 1 140px;
    min-width: 0;
}

.qx-pool-row__name {
    font-weight: 700;
    /* Wrap between words; split a word only when it alone cannot fit. */
    word-break: normal;
    overflow-wrap: break-word;
}

.qx-pool-row__meta {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* --- Recent ------------------------------------------------------------- */

.qx-entry {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #e8f5e9;
}

.qx-entry:last-child {
    border-bottom: none;
}

.qx-entry__amount {
    min-width: 46px;
    font-weight: 800;
    color: #2e7d32;
}

.qx-entry__amount--minus {
    color: #c62828;
}

.qx-entry__reason {
    flex: 1 1 120px;
    /* Wrap between words; split a word only when it alone cannot fit. */
    word-break: normal;
    overflow-wrap: break-word;
}

.qx-entry__where,
.qx-entry__when {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* --- Phones ------------------------------------------------------------- */

@media (max-width: 599px) {
    .qx-proposal,
    .qx-proposal__actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* Ring and name stay on one line whatever the name's length — letting them
       wrap made two cards side by side look like two different layouts — and
       only the action drops to its own full-width row. */
    .qx-goal__head {
        flex-wrap: wrap;
    }

    .qx-goal__text {
        flex: 1 1 0;
    }

    .qx-goal__head > .mud-button-root {
        flex: 1 0 100%;
    }

    .qx-templates,
    .qx-sheet__templates {
        grid-template-columns: 1fr;
    }
}

/* --- Dark mode ---------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    .qx-proposal,
    .qx-goal,
    .qx-child {
        background: #1b2a1d;
        border-color: #2e7d32;
    }

    .qx-goal--done { background: #1f3a22; }
    .qx-child--on { background: #1f3a22; border-color: #81c784; }
    .qx-proposal__points, .qx-goal__done { color: #a5d6a7; }

    .qx-streak { background: #33291a; color: #ffd54f; border-color: #8d6e00; }
    .qx-child--off, .qx-goal--off { border-color: #616161; }
    .qx-child__off, .qx-goal__off { color: #bdbdbd; }

    .qx-poolchip { background: #33291a; color: #ffd54f; border-color: #8d6e00; }
    .qx-empty { border-color: #2e7d32; }

    .qx-ring__track { stroke: #24352a; }
    .qx-ring__fill { stroke: #66bb6a; }

    .qx-template { background: #1b2a1d; border-color: #2e7d32; color: #dcedc8; }
    .qx-template:hover { border-color: #81c784; }
    .qx-template--more { background: transparent; }

    .qx-pool-row, .qx-entry { border-bottom-color: #24352a; }
    .qx-entry__amount { color: #a5d6a7; }
    .qx-entry__amount--minus { color: #ef9a9a; }
}