/*
 * Community design system — premium polish layer
 * MK-2026-05-21
 *
 * Inspired by /admin/b2b-prospector/momentum.php (visual reference only — no
 * shared business logic). Provides a single source of truth for cards, shadows,
 * radii, semantic section colors, and motion across every /community page.
 *
 * Token naming: `--cm-*` for community-scoped to avoid collision with admin
 * variables. Compatible with the existing `--theme-*` tokens that come from
 * the per-tenant theme palette.
 */

:root {
    /* ── Surfaces ─────────────────────────────────────────────────── */
    --cm-bg:                #f8f9fb;
    --cm-card:              #ffffff;
    --cm-card-raised:       #f1f5f9;
    --cm-card-hover:        #fafbfc;
    --cm-border:            #e2e8f0;
    --cm-border-soft:       #eef2f7;

    /* ── Radius ───────────────────────────────────────────────────── */
    --cm-radius:            16px;
    --cm-radius-sm:         10px;
    --cm-radius-xs:         8px;

    /* ── Shadow ───────────────────────────────────────────────────── */
    --cm-shadow:            0 2px 8px rgba(15, 23, 42, 0.04);
    --cm-shadow-hover:      0 8px 28px rgba(15, 23, 42, 0.08);
    --cm-shadow-lg:         0 16px 40px rgba(15, 23, 42, 0.10);

    /* ── Text ─────────────────────────────────────────────────────── */
    --cm-text:              #0f172a;
    --cm-muted:             #64748b;
    --cm-light:             #94a3b8;

    /* ── Semantic section colors (MK-2026-05-22 — brand palette only: orange / green / black)
       Purple/blue/gold/red retired. Notifications keeps red as conventional danger color. */
    --cm-feed:              #f97316;     --cm-feed-light:#fff7ed;
    --cm-academy:           #1f2937;     --cm-academy-light:#f3f4f6;   /* was purple → black */
    --cm-calendar:          #059669;     --cm-calendar-light:#ecfdf5;  /* green — kept */
    --cm-members:           #1f2937;     --cm-members-light:#f3f4f6;   /* was purple → black */
    --cm-leaderboard:       #f97316;     --cm-leaderboard-light:#fff7ed; /* was gold → orange */
    --cm-notifications:     #ef4444;     --cm-notifications-light:#fef2f2; /* red — kept (danger semantic) */
    --cm-messages:          #1f2937;     --cm-messages-light:#f3f4f6;  /* was blue → black */

    /* ── Status ───────────────────────────────────────────────────── */
    --cm-success:           #059669;
    --cm-success-light:     #ecfdf5;
    --cm-warning:           #d97706;
    --cm-warning-light:     #fffbeb;
    --cm-danger:            #ef4444;
    --cm-danger-light:      #fef2f2;
}

/* ═════════════════════════════════════════════════════════════════════════
 * TEXT-SAFETY GLOBAL — MK-2026-05-22
 * Module-wide protection against:
 *   - Long unbroken strings (URLs, "wwwwwwwww") breaking horizontal layout
 *   - Flex children expanding beyond their parents
 *   - User-pasted content with no spaces
 *
 * Applies to EVERY user-rendered text container in the community module
 * (post bodies, titles, comment text, display names, DM bodies, bios,
 * member names). One-stop fix — adding new pages? .cm-shell descendant
 * = automatically safe.
 * ═════════════════════════════════════════════════════════════════════════ */
.cm-shell .post-body,
.cm-shell .post-title,
.cm-shell .post-head .who,
.cm-shell .comment-text,
.cm-shell .comment-who,
.cm-shell .comment-card,
.cm-shell .reply,
.cm-shell .pf-name,
.cm-shell .pf-bio,
.cm-shell .dm-bubble,
.cm-shell .dm-preview,
.cm-shell .av-name,
.cm-shell .member-name,
.cm-shell .rail-event-row b,
.cm-shell h1, .cm-shell h2, .cm-shell h3 {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}
/* Flex children inside comment rows must allow shrinking */
.cm-shell .comment-row > div { min-width: 0; }
.cm-shell .composer-mid { min-width: 0; }

/* Long inline links/URLs in user content — force them to wrap */
.cm-shell .post-body a, .cm-shell .comment-text a, .cm-shell .dm-bubble a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ─────────────────────────────────────────────────────────────────────────
 * CARD
 * The base widget. Use everywhere a "panel" exists in the community shell.
 * ───────────────────────────────────────────────────────────────────────── */
.cm-w-card {
    background: var(--cm-card);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    box-shadow: var(--cm-shadow);
    padding: 18px 20px;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.cm-w-card.interactive { cursor: pointer; }
.cm-w-card.interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--cm-shadow-hover);
    border-color: color-mix(in oklab, var(--cm-border) 50%, transparent);
}
.cm-w-card-raised {
    background: var(--cm-card-raised);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-sm);
    padding: 14px 16px;
}

.cm-w-card h3,
.cm-w-card .cm-w-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--cm-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.cm-w-card h3 i,
.cm-w-card .cm-w-title i {
    font-size: 12px;
    width: 22px; height: 22px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Section-tinted icon chips (paired with semantic colors above) */
.cm-w-icon-feed         { background: var(--cm-feed-light);         color: var(--cm-feed); }
.cm-w-icon-academy      { background: var(--cm-academy-light);      color: var(--cm-academy); }
.cm-w-icon-calendar     { background: var(--cm-calendar-light);     color: var(--cm-calendar); }
.cm-w-icon-members      { background: var(--cm-members-light);      color: var(--cm-members); }
.cm-w-icon-leaderboard  { background: var(--cm-leaderboard-light);  color: var(--cm-leaderboard); }
.cm-w-icon-notifications{ background: var(--cm-notifications-light);color: var(--cm-notifications); }
.cm-w-icon-messages     { background: var(--cm-messages-light);     color: var(--cm-messages); }
.cm-w-icon-success      { background: var(--cm-success-light);      color: var(--cm-success); }
.cm-w-icon-warning      { background: var(--cm-warning-light);      color: var(--cm-warning); }

/* ─────────────────────────────────────────────────────────────────────────
 * COMMUNITY PULSE — top-of-feed at-a-glance stats grid.
 * 4 tiles: active members / posts this week / next event / academy progress.
 * ───────────────────────────────────────────────────────────────────────── */
.cm-pulse {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.cm-pulse-tile {
    background: var(--cm-card);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-sm);
    padding: 14px 16px;
    box-shadow: var(--cm-shadow);
    transition: box-shadow .2s ease, transform .2s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.cm-pulse-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--cm-shadow-hover);
}
.cm-pulse-tile .icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin-bottom: 6px;
}
.cm-pulse-tile .v {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--cm-text);
    line-height: 1.1;
}
.cm-pulse-tile .l {
    font-size: 11.5px;
    color: var(--cm-muted);
    font-weight: 600;
    letter-spacing: .02em;
}
.cm-pulse-tile .sub {
    font-size: 11px;
    color: var(--cm-light);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 760px) {
    .cm-pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cm-pulse-tile .v { font-size: 19px; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * MOMENTUM-STYLE TABS — horizontal pill row, scrolls on mobile.
 * Use inside .cm-tabs-wrap (the existing layout shell already wraps the row).
 * ───────────────────────────────────────────────────────────────────────── */
.cm-pill-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
@media (max-width: 720px) {
    .cm-pill-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .cm-pill-row::-webkit-scrollbar { display: none; }
}
.cm-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 99px;
    background: var(--cm-card);
    border: 1px solid var(--cm-border);
    color: var(--cm-muted);
    font: 600 12.5px/1 'Inter', sans-serif;
    text-decoration: none;
    white-space: nowrap;
    transition: all .15s ease;
    cursor: pointer;
}
.cm-pill:hover {
    color: var(--cm-text);
    border-color: color-mix(in oklab, var(--cm-text) 25%, var(--cm-border));
    transform: translateY(-1px);
}
.cm-pill.active {
    background: var(--cm-text);
    color: #fff;
    border-color: var(--cm-text);
}
.cm-pill i { font-size: 11px; }
.cm-pill .count {
    background: rgba(15, 23, 42, .08);
    color: inherit;
    padding: 1px 7px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 700;
}
.cm-pill.active .count { background: rgba(255, 255, 255, .2); }

/* ─────────────────────────────────────────────────────────────────────────
 * BUTTONS (small set — uses semantic tokens)
 * ───────────────────────────────────────────────────────────────────────── */
.cm-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: var(--cm-radius-xs);
    font: 600 13px/1 'Inter', sans-serif;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    transition: filter .12s ease, transform .08s ease, box-shadow .12s ease;
}
.cm-btn:active { transform: translateY(1px); }
.cm-btn-primary {
    background: linear-gradient(180deg,
        color-mix(in oklab, var(--theme-500, var(--cm-feed)) 85%, white) 0%,
        var(--theme-500, var(--cm-feed)) 50%,
        var(--theme-600, var(--cm-feed)) 100%);
    color: white;
    border-color: var(--theme-700, var(--cm-feed));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35),
                0 4px 10px color-mix(in oklab, var(--theme-500, var(--cm-feed)) 35%, transparent);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}
.cm-btn-primary:hover { filter: brightness(1.04); color: white; }
.cm-btn-ghost {
    background: var(--cm-card);
    border-color: var(--cm-border);
    color: var(--cm-muted);
}
.cm-btn-ghost:hover {
    background: var(--cm-card-raised);
    color: var(--cm-text);
}
.cm-btn-success {
    background: var(--cm-success-light);
    color: var(--cm-success);
    border-color: color-mix(in oklab, var(--cm-success) 30%, var(--cm-border));
}
.cm-btn-lg { padding: 12px 22px; font-size: 14px; border-radius: var(--cm-radius-sm); }

/* ─────────────────────────────────────────────────────────────────────────
 * EMPTY STATE — premium, actionable. Always has a CTA, never dead text.
 * ───────────────────────────────────────────────────────────────────────── */
.cm-empty {
    background: var(--cm-card);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    padding: 40px 28px;
    text-align: center;
    box-shadow: var(--cm-shadow);
}
.cm-empty .icon-circle {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg,
        var(--theme-500, var(--cm-feed)),
        var(--theme-accent, var(--cm-academy)));
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 14px;
    box-shadow: 0 8px 20px color-mix(in oklab,
        var(--theme-500, var(--cm-feed)) 28%, transparent);
}
.cm-empty h3 {
    font-size: 19px;
    font-weight: 800;
    margin: 0 0 6px;
    letter-spacing: -.02em;
    color: var(--cm-text);
}
.cm-empty p {
    margin: 0 0 18px;
    color: var(--cm-muted);
    font-size: 14px;
    line-height: 1.55;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}
.cm-empty-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────────────────
 * SKELETON LOADING — used while async data loads (post feed, notif list).
 * ───────────────────────────────────────────────────────────────────────── */
.cm-skel {
    display: block;
    background: linear-gradient(90deg, var(--cm-card-raised) 0%, var(--cm-border) 50%, var(--cm-card-raised) 100%);
    background-size: 200% 100%;
    animation: cmShimmer 1.2s ease-in-out infinite;
    border-radius: 6px;
    height: 12px;
    width: 100%;
}
@keyframes cmShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * ENTRANCE ANIMATIONS — subtle stagger when page first renders.
 * Add .cm-stagger to a parent; each direct child gets a delayed fade-in.
 * ───────────────────────────────────────────────────────────────────────── */
.cm-stagger > * {
    animation: cmRise .45s ease-out both;
}
.cm-stagger > *:nth-child(1) { animation-delay: .02s; }
.cm-stagger > *:nth-child(2) { animation-delay: .08s; }
.cm-stagger > *:nth-child(3) { animation-delay: .14s; }
.cm-stagger > *:nth-child(4) { animation-delay: .20s; }
.cm-stagger > *:nth-child(5) { animation-delay: .26s; }
.cm-stagger > *:nth-child(6) { animation-delay: .32s; }
.cm-stagger > *:nth-child(n+7) { animation-delay: .38s; }
@keyframes cmRise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .cm-stagger > * { animation: none; }
    .cm-w-card.interactive:hover { transform: none; }
}