/* public/assets/css/app.css — Bondal Family Platform custom styles */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
    --bondal-primary:   #2c3e50;
    --bondal-accent:    #e67e22;
    --bondal-success:   #27ae60;
    --bondal-w1-blue:   #3498db;
    --bondal-w2-purple: #9b59b6;
    --bondal-deceased:  #95a5a6;
}

/* ── Navigation ─────────────────────────────────────────────── */
.bg-bondal {
    background-color: var(--bondal-primary) !important;
}

.navbar-brand img {
    border-radius: 6px;
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
    border-radius: 12px;
}

/* ── Feed Post ──────────────────────────────────────────────── */
.post-media img,
.post-media video {
    border-radius: 0;
    display: block;
}

.reaction-btn {
    border-radius: 20px;
    font-size: 0.8rem;
    line-height: 1.2;
}

/* ── Urgent banner ───────────────────────────────────────────── */
.urgent-banner {
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

/* ── Family Tree ────────────────────────────────────────────── */
#tree {
    cursor: grab;
}
#tree:active {
    cursor: grabbing;
}

/* ── Member profile card ────────────────────────────────────── */
.member-profile-card .profile-photo {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.badge-deceased {
    background-color: var(--bondal-deceased);
    color: #fff;
}

/* ── Messages ───────────────────────────────────────────────── */
.message-bubble {
    max-width: 80%;
    border-radius: 18px;
    padding: 10px 14px;
    margin-bottom: 6px;
}

.message-bubble.sent {
    background: var(--bondal-primary);
    color: #fff;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.message-bubble.received {
    background: #f1f3f4;
    color: #222;
    border-bottom-left-radius: 4px;
}

/* ── Notifications ──────────────────────────────────────────── */
.notif-urgent   { border-left: 4px solid #e74c3c; }
.notif-high     { border-left: 4px solid #f39c12; }
.notif-broadcast{ border-left: 4px solid #3498db; }
.notif-normal   { border-left: 4px solid #bdc3c7; }

/* ── Admin panel ────────────────────────────────────────────── */
.admin-stat-card {
    border-left: 4px solid var(--bondal-accent);
}

/* ── Mobile tweaks ──────────────────────────────────────────── */
@media (max-width: 576px) {
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }
    .card-body {
        padding: 1rem;
    }
    .message-bubble {
        max-width: 92%;
    }
}

/* ── Alpine.js cloak ────────────────────────────────────────── */
[x-cloak] { display: none !important; }