:root{
--primary-header : #218838;
--secondary-header : #28a745;
--black :#000;
--black-opacity: rgba(var(--black), 0.02);
--background-light:  #f4f4f9;
--light-grey:  #e3e6f0;
}

body { font-family: Arial, sans-serif; background-color: var(--background-light); margin: 0; padding: 0; height: 100vh;
        display: flex; flex-direction: column; overflow: hidden; }
.btn-trash { background: none; border: none; color: #d9534f; cursor: pointer; font-size: 14px; padding: 2px 5px; margin-top: 0; width: auto; }
.btn-trash:hover { color: #b52b27; transform: scale(1.1); }
.central { width: 600px; height: 100%; background-color: var(--background-light); box-sizing: border-box; display: flex; flex-direction: column; }
.eventCard { width: 280px; margin: auto; margin-top: 10px; background-color: white; padding: 10px; box-sizing: border-box; border: 1px solid #eee; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }
.event-date { font-size: 12px; color: var(--primary-header); font-weight: bold; }
.event-details { line-height: 1.3; }
.event-form-box { padding: 10px; margin: 10px; background: #fff; border: 1px solid var(--light-grey); border-radius: 4px; box-sizing: border-box; }
.event-form-box button { width: 100%; padding: 6px; font-size: 13px; margin-top: 0; }
.event-form-box input[type="text"], .event-form-box input[type="date"] { width: 100%; padding: 6px; margin-bottom: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 13px; }
.event-title { font-weight: bold; color: #333; font-size: 14px; word-break: break-word; }
.familyEvents { width: 300px; height: 100%; background-color: var(--background-light); border-left: 1px solid var(--light-grey); box-sizing: border-box; overflow-y: auto; }
.familyMembers { width: 300px; height: 100%; background-color: var(--background-light); border-right: 1px solid var(--light-grey); box-sizing: border-box; overflow-y: auto; }
.footer { width: 1200px; height: 35px; line-height: 35px; margin: auto; background-color: var(--primary-header); text-align: center; color: white; font-weight: bold; }
.footerOuter { width: 100%; height: 35px; background: var(--background-light); flex-shrink: 0; }
.form-controls { display: flex; justify-content: space-between; align-items: center; }
.form-controls button { width: auto; margin-top: 0; padding: 6px 15px; font-size: 14px; }
h2 { margin-top: 0; color: #333; text-align: center; }
header { width: 100%; background-color:var(--background-light) ; color: white; font-size: 34px; height: 70px; box-sizing: border-box;
        flex-shrink: 0; display: flex; align-items: center; }
.header-inner { width: 1200px; margin: auto; display: flex; justify-content: space-between; align-items: center;
                background-color: var(--primary-header); padding: 0 10px; box-sizing: border-box; }
.header-nav a { color: white; text-decoration: none; margin-left: 15px; font-size: 14px; font-weight: bold; }
.header-nav a:hover { text-decoration: underline; }
.informationArea { width: 580px; margin: 0 auto 10px auto; height: 50px; line-height: 50px; background-color: #e2e3e5; color: #383d41;
                text-align: center; font-weight: bold; border-radius: 6px; border: 1px solid #d6d8db; flex-shrink: 0; }
.main { width: 1200px; flex-grow: 1; margin: 20px auto; background-color: var(--background-light); display: flex; box-sizing: border-box; overflow: hidden; }
.memberAvatar { width: 45px; height: 45px; background-color: #FFFFFF; border-radius: 4px; display: flex; align-items: center;
            justify-content: center; font-weight: bold; color: #8a6d3b; flex-shrink: 0; }
.memberCard { width: 280px; margin: auto; margin-top: 10px; background-color: white; padding: 10px; box-sizing: border-box; border: 1px solid #eee;
            border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }
.member-name { font-weight: bold; color: #333; font-size: 15px; }
.messageArea { background-color: var(--background-light); box-sizing: border-box; flex-grow: 1; margin-top: 10px; overflow-y: auto; padding-bottom: 20px; width: 600px; }
.messageCard { background-color: #ffffff; border: 1px solid #e3e6f0; border-radius: 6px; box-sizing: border-box; box-shadow: 0 2px 4px var(--black-opacity);
            height: auto; margin: 0 auto 12px auto; min-height: 80px; padding: 15px; width: 580px; }
.msg-header-right { display: flex; align-items: center; gap: 10px; }
.msg-img { max-width: 100%; max-height: 250px; border-radius: 4px; margin-top: 8px; display: block; object-fit: contain; }
.msg-meta { font-size: 12px; color: #555; margin-bottom: 6px; display: flex; justify-content: space-between; }
.msg-text { font-size: 14px; color: #222; line-height: 1.4; word-break: break-word; }
.offline { background-color: #bbb; }
.online { background-color: var(--secondary-header); }
.post-form-box { background: #ffffff; border: 1px solid #e3e6f0; border-radius: 6px; box-sizing: border-box; box-shadow: 0 2px 4px var(--black-opacity);
                flex-shrink: 0; margin: 0 auto 10px auto; padding: 15px; width: 580px; }
.post-form-box textarea { border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-family: inherit; font-size: 14px; height: 60px;
                    margin-bottom: 10px; padding: 10px; resize: none; width: 100%; }
.private-badge { background: #6c757d; color: white; padding: 2px 5px; border-radius: 3px; font-size: 10px; text-transform: uppercase; font-weight: bold; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.status-text { font-size: 11px; color: #777; line-height: 1.3; }