/* ============================================================================
   FEATURE C: Squad chat (channel-style window) + squad challenge modal.
   Layers onto the existing .dm-panel / .dm-messages / .dm-input-row chat window.
   Theme: navy #0a1628 / #0f1a2e / #16223c, gold #c8a03c, white. No emoji.
   ============================================================================ */

/* Header subtitle (member count) under the squad name */
.sqc-subtitle {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 2px;
}

/* Sender name above other people's bubbles (group chat) */
.sqc-sender {
    font-size: 0.66rem;
    font-weight: 700;
    color: #c8a03c;
    margin: 0 4px 2px;
    letter-spacing: 0.02em;
}

/* System message line (e.g. "A challenge was set: ...") — centred, no bubble */
.sqc-system {
    align-self: center;
    max-width: 90%;
    text-align: center;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(200, 160, 60, 0.1);
    border: 1px solid rgba(200, 160, 60, 0.25);
    border-radius: 12px;
    padding: 5px 12px;
    margin: 6px auto;
}

/* Composer row: the Challenge button sits left of the input */
.sqc-input-row { align-items: center; }
.sqc-challenge-btn {
    flex-shrink: 0;
    background: transparent;
    color: #c8a03c;
    border: 1px solid rgba(200, 160, 60, 0.5);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.sqc-challenge-btn:hover {
    background: rgba(200, 160, 60, 0.15);
    color: #e0bf63;
}

/* Squad tag on the Challenges page cards */
.challenge-squad-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0a1628;
    background: #c8a03c;
    border-radius: 10px;
    vertical-align: middle;
}

/* Squad challenge modal — uses the navy .modal-content theme (was a tiny white .modal). */
.sqc-modal .sqc-ch-hint {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 1rem;
    line-height: 1.4;
}
.sqc-modal-content { max-width: 460px; }
.sqc-modal-content .modal-body { max-height: 70vh; overflow-y: auto; }

/* Inline squad chat (rendered inside the community #dc-main, like a channel).
   Reuses .dm-messages / .dc-feed / .dc-inline-composer. Keeps the Challenge button
   in line with the textarea + Send button. */
.dc-main-header .dc-dm-header-avatar.dc-squad-avatar { background: #16223c; color: #c8a03c; display: inline-flex; align-items: center; justify-content: center; }
.dc-main-header .dc-dm-header-avatar.dc-squad-avatar svg { width: 14px; height: 14px; }
.sqc-messages-main { flex: 1; min-height: 0; overflow-y: auto; }
.dc-ic-row.sqc-input-row { align-items: flex-end; }
.dc-ic-row.sqc-input-row .sqc-challenge-btn { flex: 0 0 auto; padding: 7px 12px; align-self: flex-end; }

/* ── PACK collective goals strip (#sqc-goals-main, above the message feed) ── */
#sqc-goals-main {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex: 0 0 auto;
    -webkit-overflow-scrolling: touch;
}
#sqc-goals-main:empty { display: none; }
.cg-card {
    flex: 0 0 auto;
    min-width: 200px;
    max-width: 260px;
    background: #16223c;
    border: 1px solid rgba(200, 160, 60, 0.25);
    border-radius: 12px;
    padding: 10px 12px;
}
.cg-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cg-title { font-size: 0.8rem; font-weight: 700; color: #fff; line-height: 1.25; }
.cg-del {
    flex: 0 0 auto; background: transparent; border: none; color: rgba(255, 255, 255, 0.4);
    font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 2px;
}
.cg-del:hover { color: #ff6b6b; }
.cg-sub { font-size: 0.7rem; color: rgba(255, 255, 255, 0.6); margin: 4px 0 6px; }
.cg-bar { height: 7px; background: rgba(255, 255, 255, 0.1); border-radius: 99px; overflow: hidden; }
.cg-bar-fill { height: 100%; background: linear-gradient(90deg, #c8a03c, #e0bf63); border-radius: 99px; transition: width 0.4s ease; }
.cg-new-btn {
    flex: 0 0 auto; align-self: center;
    background: transparent; color: #c8a03c;
    border: 1px dashed rgba(200, 160, 60, 0.5); border-radius: 12px;
    padding: 8px 14px; font-size: 0.76rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.cg-new-btn:hover { background: rgba(200, 160, 60, 0.12); }

/* ── Squad-vs-squad team leaderboard (.sqlb-* inside the leaderboard modal) ── */
.sqlb-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.sqlb-row {
    display: flex; align-items: center; gap: 10px;
    background: #16223c; border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px; padding: 9px 12px;
}
.sqlb-row.sqlb-mine { border-color: rgba(200, 160, 60, 0.55); background: rgba(200, 160, 60, 0.08); }
.sqlb-rank {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(200, 160, 60, 0.18); color: #c8a03c; font-weight: 800; font-size: 0.78rem;
}
.sqlb-name { flex: 1; min-width: 0; font-weight: 700; color: #fff; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sqlb-meta { flex: 0 0 auto; font-size: 0.68rem; color: rgba(255, 255, 255, 0.45); }
.sqlb-total { flex: 0 0 auto; font-weight: 800; color: #c8a03c; font-size: 0.9rem; }