/*
 * health-team.css — MyBest24 Health Team Sharing Styles
 *
 * Owns: health team stage panel, invite builder, member list, link display.
 * CSS prefix: .health-team-* (no abbreviations — see share-data.md naming rules)
 *
 * DOES NOT overlap with share.css (.share-*) — those are for event sharing.
 * Load after report-mood.css in index.html.
 */


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

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


/* ── View containers ──────────────────────────────────────────────────────── */

/* Each view is shown/hidden by toggling .hidden — only one visible at a time */
.health-team-view {
    padding: 0 0 16px;
}


/* ── Section label ────────────────────────────────────────────────────────── */

.health-team-section-heading {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 16px 0 8px;
    display: block;
}


/* ── Empty state ──────────────────────────────────────────────────────────── */

.health-team-empty {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 12px 0 4px;
}


/* ── Member list ──────────────────────────────────────────────────────────── */

.health-team-member-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.health-team-member-card {
    display: flex;
    align-items: center;
    gap: 12px;
    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: 11px 12px;
}

.health-team-member-info {
    flex: 1;
    min-width: 0;
}

.health-team-member-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.health-team-member-role {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 2px;
}

.health-team-member-meta {
    font-size: 0.71rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.health-team-member-meta--warning {
    color: var(--color-report-warning, #c9913d);
}

.health-team-member-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}

.health-team-view-link-btn {
    background: none;
    border: 1px solid color-mix(in srgb, var(--accent-color) 50%, transparent);
    border-radius: 6px;
    color: var(--accent-color);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.health-team-view-link-btn:hover {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
}

.health-team-revoke-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.health-team-revoke-btn:hover {
    border-color: var(--color-report-danger, #c0535a);
    color: var(--color-report-danger, #c0535a);
}


/* ── Add buttons ──────────────────────────────────────────────────────────── */

.health-team-add-row {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.health-team-add-btn {
    flex: 1;
    padding: 10px 0;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 50%, transparent);
    background: none;
    color: var(--accent-color);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.health-team-add-btn:hover {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    border-color: var(--accent-color);
}


/* ── Invite builder ───────────────────────────────────────────────────────── */

.health-team-invite-role-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    border-radius: 4px;
    padding: 2px 8px;
    margin-bottom: 16px;
}

.health-team-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 16px;
}

.health-team-field-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.health-team-name-input {
    /* reflect-textarea provides bg, border, color, font */
    font-size: 0.88rem;
}

/* Section toggles */
.health-team-sections {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}

.health-team-section-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px 0;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.health-team-section-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-color);
    cursor: pointer;
    flex-shrink: 0;
}

.health-team-section-toggle-label {
    font-size: 0.84rem;
    color: var(--text-main);
    line-height: 1.2;
}

.health-team-section-toggle-hint {
    font-size: 0.71rem;
    color: var(--text-muted);
    display: block;
    margin-top: 1px;
}

/* Generate link button — matches mood log button pattern */
.health-team-generate-btn {
    width: 100%;
    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;
    margin-bottom: 12px;
}

.health-team-generate-btn:hover  { opacity: 0.85; }
.health-team-generate-btn:active { opacity: 0.70; }

.health-team-back-btn {
    width: 100%;
    padding: 9px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    background: none;
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.health-team-back-btn:hover {
    color: var(--text-main);
    border-color: rgba(255, 255, 255, 0.25);
}


/* ── Link display (after generation) ─────────────────────────────────────── */

.health-team-link-card {
    background: color-mix(in srgb, var(--accent-color) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 25%, transparent);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}

.health-team-link-headline {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 4px;
}

.health-team-link-sub {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    line-height: 1.4;
}

.health-team-link-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.health-team-link-input {
    flex: 1;
    min-width: 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    /* reflect-textarea handles bg, border */
    cursor: text;
}

.health-team-copy-btn {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid var(--accent-color);
    background: none;
    color: var(--accent-color);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.health-team-copy-btn:hover {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
}

.health-team-copy-btn--copied {
    color: var(--text-muted);
    border-color: rgba(255, 255, 255, 0.15);
}

.health-team-link-expiry {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 8px;
    font-style: italic;
}

.health-team-done-btn {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    background: none;
    color: var(--accent-color);
    border: 1px solid color-mix(in srgb, var(--accent-color) 50%, transparent);
    cursor: pointer;
    transition: background 0.15s;
}

.health-team-done-btn:hover {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}


/* ── Inline status messages ───────────────────────────────────────────────── */

.health-team-status {
    font-size: 0.78rem;
    text-align: center;
    padding: 8px 0 4px;
    min-height: 24px;
}

.health-team-status--error   { color: var(--color-report-danger,  #c0535a); }
.health-team-status--success { color: var(--accent-color); }
.health-team-status--working { color: var(--text-muted); font-style: italic; }


/* ── Confirm revoke dialog ────────────────────────────────────────────────── */

.health-team-revoke-confirm {
    background: color-mix(in srgb, var(--color-report-danger, #c0535a) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-report-danger, #c0535a) 35%, transparent);
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 8px;
}

.health-team-revoke-confirm p {
    font-size: 0.8rem;
    color: var(--text-main);
    margin: 0 0 10px;
    line-height: 1.4;
}

.health-team-revoke-confirm-row {
    display: flex;
    gap: 8px;
}

.health-team-revoke-confirm-yes {
    flex: 1;
    padding: 8px;
    border-radius: 6px;
    border: none;
    background: var(--color-report-danger, #c0535a);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.health-team-revoke-confirm-no {
    flex: 1;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: none;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}


/* ── Expanded cally row padding ───────────────────────────────────────────── */

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


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

@media (max-width: 600px) {
    .health-team-add-row       { flex-direction: column; }
    .health-team-section-toggle-label { font-size: 0.8rem; }
}