:root {
    --primary: #1a73e8;
    --primary-dark: #0d47a1;
}

body { background-color: #f8f9fa; }

.card { border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.12); }

.avatar-sm { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.avatar-md { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.avatar-lg { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }

.membership-card {
    background: linear-gradient(135deg, #1a73e8, #0d47a1, #311b92);
    color: white;
    border-radius: 16px;
    padding: 24px;
    max-width: 440px;
    aspect-ratio: 1.58/1;
    position: relative;
    overflow: hidden;
}
.membership-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
}
.membership-card .member-id { font-family: 'Courier New', monospace; font-size: 1.1rem; letter-spacing: 2px; }

/* Role-based membership card tiers */
.membership-card.tier-super-admin {
    background: linear-gradient(135deg, #1a1a1a, #c9a227, #4d2f00);
}
.membership-card.tier-super-admin::before {
    background: radial-gradient(circle, rgba(255,224,102,0.18) 0%, transparent 70%);
}
.membership-card.tier-admin {
    /* Royal Purple + Silver. */
    background: linear-gradient(135deg, #4c1d95, #6b21a8, #c4b5fd);
}
.membership-card.tier-coordinator {
    background: linear-gradient(135deg, #0a3a2e, #0d9488, #0f766e);
}
/* Maroon + Blush — Professor. */
.membership-card.tier-professor {
    background: linear-gradient(135deg, #500724, #be123c, #fda4af);
}
.membership-card.tier-professor::before {
    background: radial-gradient(circle, rgba(248,225,183,0.15) 0%, transparent 70%);
}

/* Base cards for student / alumni / member — distinct hues so all three
   roles don't share the default blue-purple gradient. */
.membership-card.tier-student {
    background: linear-gradient(135deg, #312e81, #6366f1, #a78bfa);
}
.membership-card.tier-alumni {
    /* Graphite anchor (deeper than slate) for white-text legibility,
       copper + bronze accents preserve the alumni feel. */
    background: linear-gradient(135deg, #1e293b, #b87333, #d97706);
}
.membership-card.tier-member {
    /* Pitch + Stone — solid greys, deepest first. */
    background: linear-gradient(135deg, #000000, #525252, #a3a3a3);
}

/* Active-tier overlays (login frequency) — override role colors on the front. */
.membership-card.tier-pulse {
    /* Royal Blue + Cyan */
    background: linear-gradient(135deg, #1e3a8a, #2563eb, #67e8f9);
}
.membership-card.tier-heartbeat {
    /* Watermelon — wine red → rose → blush */
    background: linear-gradient(135deg, #9f1239, #f43f5e, #fed7e2);
}
.membership-card.tier-beacon {
    /* Sunset Orange — burnt umber → orange → cream */
    background: linear-gradient(135deg, #7c2d12, #f97316, #fed7aa);
}
.membership-card.tier-livewire {
    /* Emerald Pulse — deep emerald → forest → mint */
    background: linear-gradient(135deg, #022c22, #047857, #4ade80);
}
/* Apex — Charcoal + Burnt Copper, with a slow shimmer that loops the
   gradient so the top-tier card still feels alive. */
.membership-card.tier-apex {
    background: linear-gradient(135deg, #0f172a, #9a3412, #fb923c, #9a3412, #0f172a);
    background-size: 300% 300%;
    animation: apex-shimmer 6s ease-in-out infinite;
}
.membership-card.tier-apex::before {
    background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, transparent 70%);
}
@keyframes apex-shimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Tier badge (SUPER ADMIN / ADMIN / COORDINATOR / PROFESSOR pill) */
.membership-card .tier-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0,0,0,0.35);
    white-space: nowrap;
}
.membership-card.tier-super-admin .tier-badge { color: #ffd74a; }
.membership-card.tier-admin       .tier-badge { color: #bcd0ef; }
.membership-card.tier-coordinator .tier-badge { color: #aff2da; }
.membership-card.tier-professor   .tier-badge { color: #f8e1b7; }

/* Card flip container */
.card-flip-wrap {
    width: 100%;
    max-width: 440px;
    aspect-ratio: 1.58 / 1;
    margin: 0 auto;
    perspective: 1400px;
    cursor: pointer;
    user-select: none;
}
.card-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.card-flip-wrap.is-flipped .card-flip-inner {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

/* Each face must override .membership-card defaults that conflict with flip */
.card-face {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Hide the default pseudo-element pattern on the back — we use our own overlay */
.card-face-back::before { display: none !important; }

.card-face-back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    background-color: #1a1a1a; /* fallback if image fails to load */
    background-image: url('/assets/images/membership_card_back.jpeg') !important;
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 18px;
}
.card-back-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.78));
}
.card-back-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Avatar circle on back of card */
.card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    flex-shrink: 0;
}
.card-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1));
    color: #fff;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 1px;
}

.chat-container { height: calc(100vh - 260px); display: flex; flex-direction: column; }
.chat-messages { flex: 1; overflow-y: auto; padding: 12px; }
.chat-bubble { max-width: 75%; padding: 8px 14px; border-radius: 16px; margin-bottom: 6px; word-wrap: break-word; }
.chat-mine { background-color: var(--primary); color: white; margin-left: auto; border-bottom-right-radius: 4px; }
.chat-other { background-color: #e9ecef; margin-right: auto; border-bottom-left-radius: 4px; }
.chat-sender { font-size: 11px; font-weight: 600; color: var(--primary); }
.chat-time { font-size: 10px; opacity: 0.6; }

.stat-card { border-left: 4px solid var(--primary); }
.stat-card .stat-value { font-size: 2rem; font-weight: 700; color: var(--primary); }

.search-result-card { transition: transform 0.15s; cursor: pointer; }
.search-result-card:hover { transform: translateY(-2px); }