/* ==========================================================
   1. GLOBAL BODY STYLES
   ========================================================== */
body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f0f2f5;
    font-family: Arial, sans-serif;
}

/* ==========================================================
   2. HEADER AND DROPDOWN STYLES
   ========================================================== */
.site-header {
    background-color: #2c3e50;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-family: Arial, sans-serif;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    z-index: 100;
}

.header-left { display: flex; align-items: center; gap: 20px; }
.header-logo a { color: #ffffff; text-decoration: none; font-size: 20px; font-weight: bold; letter-spacing: 0.5px; }

.header-search-form { display: flex; align-items: center; }
.header-search-input {
    background-color: #ffffff;
    border: 1px solid #bdc3c7;
    border-radius: 20px;
    color: #2c3e50;
    padding: 6px 16px;
    font-size: 14px;
    width: 250px;
    transition: border-color 0.2s ease;
}
.header-search-input:focus { outline: none; border-color: #3498db; background-color: #ffffff; }
.header-search-input::placeholder { color: #7f8c8d; }

.header-nav { display: flex; gap: 20px; align-items: center; }
.nav-link { color: #ecf0f1; text-decoration: none; font-size: 14px; transition: color 0.2s ease; }
.nav-link:hover { color: #3498db; }

.badge {
    background-color: #e74c3c;
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
    margin-left: 5px;
    display: inline-block;
}

.dropdown-container { position: relative; display: inline-block; }
.dropdown-toggle {
    color: #ecf0f1;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    padding: 5px 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.dropdown-toggle:hover { color: #3498db; }
.dropdown-toggle::after { content: '▼'; font-size: 9px; color: #bdc3c7; }

.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: #ffffff;
    min-width: 150px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 6px;
    padding: 6px 0;
    margin-top: 8px;
    border: 1px solid #e2e8f0;
    max-height: 400px;
    overflow-y: auto;
}
.dropdown-container.active .dropdown-menu { display: block; }

#msgDropdown .dropdown-menu,
#notifDropdown .dropdown-menu {
    width: 300px;
    padding: 10px;
    background: white;
    border: 1px solid #ccc;
    position: absolute;
    z-index: 1000;
}

.dropdown-item {
    color: #2c3e50;
    padding: 10px 16px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.dropdown-item:hover { background-color: #f8fafc; color: #3498db; }
.dropdown-item.logout-btn { border-top: 1px solid #edf2f7; color: #e74c3c; }
.dropdown-item.logout-btn:hover { background-color: #fff5f5; color: #c0392b; }
/* ==========================================================
   3. REGISTER PAGE STYLES
   ========================================================== */
.main-content-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    box-sizing: border-box;
}

.register-container {
    background-color: #ffffff;
    width: 100%;
    max-width: 420px;
    padding: 35px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

.register-header { text-align: center; margin-bottom: 28px; }
.register-header h1 { color: #1a202c; margin: 0 0 6px 0; font-size: 32px; font-weight: 700; letter-spacing: -0.5px; }
.register-header p { color: #718096; margin: 0; font-size: 14px; }

.form-group { margin-bottom: 18px; }
.form-label { display: block; margin-bottom: 6px; color: #4a5568; font-size: 13px; font-weight: 600; }
.form-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #cbd5e0;
    border-radius: 5px;
    font-size: 14px;
    color: #2d3748;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-input:focus { outline: none; border-color: #3182ce; box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15); }

.name-row { display: flex; gap: 15px; }
.name-col { flex: 1; }

.alert { padding: 12px; border-radius: 5px; font-size: 13px; margin-bottom: 20px; border: 1px solid; text-align: center; font-weight: 500; }
.alert-danger { background-color: #fff5f5; color: #c53030; border-color: #fed7d7; }
.alert-success { background-color: #f0fff4; color: #2f855a; border-color: #c6f6d5; }

.submit-btn {
    width: 100%;
    background-color: #2b6cb0;
    color: #ffffff;
    border: none;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    margin-top: 8px;
}
.submit-btn:hover { background-color: #2c5282; }

.register-footer { text-align: center; margin-top: 24px; border-top: 1px solid #e2e8f0; padding-top: 18px; font-size: 13px; color: #718096; }
.register-footer a { color: #3182ce; text-decoration: none; font-weight: 600; }
.register-footer a:hover { text-decoration: underline; }
/* ==========================================================
   4. LOGIN PAGE STYLES
   ========================================================== */
.login-wrapper { width: 100%; max-width: 400px; margin: 60px auto; padding: 20px; box-sizing: border-box; }
.login-card { background-color: #ffffff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.login-card h2 { margin-top: 0; margin-bottom: 20px; color: #2c3e50; font-size: 24px; text-align: center; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: #4a5568; }
.form-control { width: 100%; padding: 10px; border: 1px solid #cbd5e0; border-radius: 6px; font-size: 14px; color: #2d3748; box-sizing: border-box; }
.form-control:focus { outline: none; border-color: #3182ce; }
.login-btn { width: 100%; background-color: #3182ce; color: #ffffff; border: none; padding: 12px; font-size: 15px; font-weight: 600; border-radius: 6px; cursor: pointer; margin-top: 10px; transition: background-color 0.15s ease; }
.login-btn:hover { background-color: #2b6cb0; }
.switch-text { text-align: center; margin-top: 20px; font-size: 14px; color: #718096; }
.switch-text a { color: #3182ce; text-decoration: none; font-weight: bold; }
.status-banner { padding: 12px; border-radius: 5px; font-size: 14px; margin-bottom: 20px; text-align: center; border: 1px solid transparent; }
.banner-success { background-color: #f0fff4; color: #38a169; border-color: #c6f6d5; }
.banner-error { background-color: #fff5f5; color: #e53e3e; border-color: #fed7d7; }
/* ==========================================================
   5. INDEX/FEED PAGE STYLES
   ========================================================== */
.feed-wrapper { width: 100%; max-width: 600px; margin: 30px auto; padding: 0 15px; box-sizing: border-box; }
/* Sidebar fixed to far left */
.fixed-left-sidebar {
    position: fixed;
    left: 0;
    top: 54px; /* Header height */
    height: calc(100vh - 54px - 47px); 
    width: 200px;
    padding: 20px;
    background: #f0f2f5;
    z-index: 1000;
    overflow-y: auto;
    box-sizing: border-box;
}

/* Sidebar navigation list */
.sidebar-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Push only the profile down to close the gap */
.sidebar-item-profile {
    position: relative;
    top: 5px;
    margin-bottom: 12px;
}

/* Shared Sidebar Link styling and hover box effect */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.sidebar-link:hover {
    background-color: #e2e6eb; /* Hover box background color */
}

.sidebar-link span {
    font-weight: 600;
    color: #333;
}

/* Avatar and Icon containers */
.sidebar-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.sidebar-icon-box {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9ecef;
    border-radius: 50%;
}

.sidebar-icon-box i {
    font-size: 18px;
    color: #555;
}

/* Ensure the rest of the page moves over slightly */
body {
    margin-left: 240px;
}

/* Mobile: Reset if screen is small */
@media (max-width: 768px) {
    .fixed-left-sidebar {
        position: relative;
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }
    body {
        margin-left: 0;
    }
}
/* ==========================================================
   6. SEARCH PAGE STYLES
   ========================================================== */
.search-container {
    width: 100%;
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.search-header-title {
    font-size: 24px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 8px;
}

.search-subtitle {
    font-size: 14px;
    color: #7f8c8d;
    margin-bottom: 24px;
}

/* Results Grid */
.results-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Individual Result Item Row */
.result-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.result-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.result-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #cbd5e0;
    border: 1px solid #e2e8f0;
}

.result-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.result-name {
    font-size: 16px;
    font-weight: bold;
    color: #2c3e50;
    text-decoration: none;
}
.result-name:hover {
    color: #3498db;
}

.result-username {
    font-size: 13px;
    color: #7f8c8d;
}

/* View Profile Action Button */
.view-profile-btn {
    background-color: #3498db;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.view-profile-btn:hover {
    background-color: #2980b9;
}

/* Empty State Placeholder */
.no-results-box {
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 40px 20px;
    color: #7f8c8d;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.no-results-box h3 {
    margin-top: 0;
    color: #2c3e50;
}
/* ==========================================================
   7. MESSAGES PAGE STYLES
   ========================================================== */
.messages-master-container {
    display: grid;
    grid-template-columns: 320px 1fr;
    max-width: 1200px;
    height: 75vh;
    margin: 30px auto;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
}

.chat-sidebar {
    background-color: #ffffff;
    border-right: 1px solid #e4e6eb;
    display: flex;
    flex-direction: column;
}
.sidebar-header {
    padding: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #050505;
    border-bottom: 1px solid #edf2f7;
    margin: 0;
}
.friends-chat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    flex-grow: 1;
}
.friend-chat-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 1px solid #f7fafc;
    transition: background-color 0.15s ease;
}
.friend-chat-item:hover { background-color: #f0f2f5; }
.friend-chat-item.active { background-color: #e7f3ff; }

.chat-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
    background-color: #e4e6eb;
}
.chat-info {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}
.chat-name { font-weight: 600; color: #050505; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unread-badge { background-color: #1877f2; color: #ffffff; font-size: 11px; font-weight: bold; padding: 3px 7px; border-radius: 10px; }

.chat-main-panel {
    display: flex;
    flex-direction: column;
    background-color: #f0f2f5;
}
.chat-panel-header {
    background-color: #ffffff;
    padding: 15px 20px;
    font-weight: bold;
    font-size: 16px;
    border-bottom: 1px solid #e4e6eb;
    color: #050505;
}

.chat-body-history {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-message { display: flex; width: 100%; }
.chat-message .message-bubble { max-width: 60%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.4; position: relative; word-wrap: break-word; }
.message-time { display: block; font-size: 10px; margin-top: 4px; opacity: 0.7; text-align: right; }

.message-sent { justify-content: flex-end; }
.message-sent .message-bubble { background-color: #0084ff; color: #ffffff; border-bottom-right-radius: 4px; }

.message-received { justify-content: flex-start; }
.message-received .message-bubble { background-color: #e4e6eb; color: #050505; border-bottom-left-radius: 4px; }

.chat-footer-composer {
    background-color: #ffffff;
    padding: 15px 20px;
    border-top: 1px solid #e4e6eb;
}
.chat-input-form { display: flex; gap: 10px; }
.chat-textarea { flex-grow: 1; border: 1px solid #ced4da; border-radius: 20px; padding: 10px 18px; resize: none; font-size: 14px; height: 20px; outline: none; font-family: Arial, sans-serif; }
.chat-textarea:focus { border-color: #0084ff; }
.chat-send-btn { background-color: #0084ff; color: #ffffff; border: none; font-weight: bold; padding: 0 20px; border-radius: 20px; cursor: pointer; transition: background-color 0.2s; }
.chat-send-btn:hover { background-color: #0066cc; }

.no-chat-selected { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #65676b; font-size: 16px; }
.no-messages-placeholder { text-align: center; color: #65676b; margin-top: 40px; font-style: italic; }
/* ==========================================================
   8. NOTIFICATIONS PAGE STYLES
   ========================================================== */
.notif-container { 
    width: 90%; 
    max-width: 700px; 
    min-height: 500px; 
    margin: 30px auto; 
    background: white; 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
}

.notif-container h2 { 
    margin-top: 0; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 10px; 
    color: #007bff; 
}

/* Link styling for full-row clickability */
.notif-list a { display: block; text-decoration: none; color: inherit; }

.notif-item { 
    padding: 15px; 
    border-bottom: 1px solid #e9ecef; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    transition: background 0.2s ease-in-out; 
}

.notif-list a:hover .notif-item { background-color: #f8f9fa; cursor: pointer; }

.notif-text { font-size: 14px; line-height: 1.4; }
.notif-time { font-size: 11px; color: #999; margin-top: 4px; }
.unread-dot { width: 8px; height: 8px; background: #007bff; border-radius: 50%; margin-left: 10px; }

.no-notif { color: #777; text-align: center; padding: 20px 0; }
.back-link { display: inline-block; margin-bottom: 15px; color: #65676b; text-decoration: none; font-size: 14px; }
.back-link:hover { text-decoration: underline; }
/* ==========================================================
   9. PROFILE PAGE STYLES
   ========================================================== */

/* MASTER WRAPPER CONTAINER */
.profile-grid-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto 30px auto;
    padding: 0 32px;
    box-sizing: border-box;
}

/* TOP MAIN HEADER CARD BLOCK */
.user-identity-bar {
    display: flex;
    flex-direction: row;                
    justify-content: space-between;     
    align-items: flex-start;            
    box-sizing: border-box;
    margin-top: 40px;                   
    margin-bottom: 32px;
    width: 100%;
}

.name-line-wrapper {
    position: relative;
    width: 100%;                  
}

.identity-username {
    font-size: 32px;
    font-weight: bold;
    color: #050505;
    margin: 0 0 12px 0;
    margin-bottom: 3px;           
    white-space: nowrap;                 
}

.header-horizontal-line {
    width: 100%;                        
    height: 2px;                        
    background-color: #cbd5e0;          
    margin: 0;                          
}

/* Custom Profile Sub-Navigation Tabs */
.myplaces-profile-nav {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    width: 100%;
}

.profile-nav-tab {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #4a5568;
    text-decoration: none;
    background-color: #e2e8f0;
    border-radius: 20px;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.profile-nav-tab:hover {
    background-color: #cbd5e0;
    color: #2d3748;
}

.profile-nav-tab.active {
    background-color: #3182ce;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(49, 130, 206, 0.2);
}

.tab-icon {
    margin-right: 6px;
    font-size: 16px;
}

/* Loading Spinner for AJAX Requests */
.tab-loading-placeholder {
    text-align: center;
    padding: 60px;
    font-size: 16px;
    color: #4a5568;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ACTION BUTTON INLINE CSS CLASSES */
.profile-edit-btn-inline, .profile-add-btn-inline, .profile-accept-btn-inline, .profile-pending-btn-inline {
    position: absolute;
    right: 0;
    bottom: 8px; 
    padding: 10px 20px; 
    font-size: 15px;   
    font-weight: bold;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transition: background-color 0.2s ease;
    display: inline-block;
    line-height: 1.2;
}
.profile-edit-btn-inline, .profile-add-btn-inline { background-color: #1877f2; color: #ffffff; }
.profile-edit-btn-inline:hover, .profile-add-btn-inline:hover { background-color: #166fe5; }

.profile-accept-btn-inline { background-color: #2db84c; color: #ffffff; border: none; cursor: pointer; }
.profile-accept-btn-inline:hover { background-color: #24963b; }

.profile-pending-btn-inline { background-color: #cbd5e0; color: #4b4f56; border: none; cursor: not-allowed; }

.identity-avatar {
    width: 168px;
    height: 168px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    background-color: #e4e6eb;
    flex-shrink: 0;                          
}

.avatar-editable { cursor: pointer; transition: opacity 0.2s ease, filter 0.2s ease; }
.avatar-editable:hover { opacity: 0.85; filter: brightness(85%); }

/* LOWER TWO-COLUMN SPLIT GRID */
.profile-lower-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;   
    gap: 32px;
    align-items: flex-start;
}

.profile-main { grid-column: 1; }
.profile-sidebar { grid-column: 2; }

/* Card Elements */
.info-card { background-color: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.info-card h2 { font-size: 20px; font-weight: bold; color: #050505; margin: 0 0 16px 0; }
.personal-details-list { list-style: none; padding: 0; margin: 0; }
.personal-details-list li { font-size: 15px; color: #050505; margin-bottom: 16px; display: flex; align-items: center; }
.detail-icon { font-size: 18px; margin-right: 12px; width: 20px; text-align: center; }
.profile-bio { font-size: 14px; color: #65676b; line-height: 1.5; margin-top: 15px; padding-top: 15px; border-top: 1px solid #e4e6eb; }

.profile-sidebar-card { background-color: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-top: 20px; }
.profile-sidebar-card h2 { font-size: 20px; font-weight: bold; color: #050505; margin: 0 0 16px 0; }
.sidebar-grid-display { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.photo-grid-item { aspect-ratio: 1 / 1; background-color: #e4e6eb; border-radius: 4px; overflow: hidden; }
.photo-grid-item img { width: 100%; height: 100%; object-fit: cover; }

/* The dark background overlay */
.modal {
    display: none; /* Hidden by default */
    position: fixed; 
    z-index: 9999; /* Keeps it on top of all other page elements */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent black */
    align-items: center; 
    justify-content: center;
}

/* The image inside the modal */
.modal-content {
    max-width: 90%; 
    max-height: 90%;
    object-fit: contain;
}

/* The 'X' button */
.close-modal {
    position: absolute;
    top: 20px;
    right: 40px;
    color: #ffffff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.friend-grid-item { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; }
.friend-grid-avatar { width: 100%; aspect-ratio: 1 / 1; border-radius: 6px; object-fit: cover; background-color: #cbd5e0; margin-bottom: 6px; }
.friend-grid-name { font-size: 12px; font-weight: 600; color: #050505; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* FACEBOOK STYLE FLOATING POP-OUT CHAT TRAY BOX */
.fb-chat-wrapper {
    position: fixed;
    bottom: 0;
    right: 40px;
    width: 280px;
    height: 360px;
    background: #ffffff;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    z-index: 9999;
    font-family: Arial, sans-serif;
    border: 1px solid #ccd0d5;
}
.fb-chat-header {
    background-color: #1877f2;
    color: #ffffff;
    padding: 8px 12px;
    font-weight: bold;
    font-size: 14px;
    border-radius: 7px 7px 0 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.fb-chat-close { font-size: 18px; font-weight: bold; cursor: pointer; line-height: 1; }
.fb-chat-wrapper.minimized { height: 36px !important; }
.fb-chat-body {
    flex-grow: 1;
    padding: 10px;
    overflow-y: auto;
    background-color: #f0f2f5;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fb-chat-body .chat-message { display: flex; width: 100%; }
.fb-chat-body .chat-message .message-bubble { max-width: 75%; padding: 6px 10px; border-radius: 14px; font-size: 13px; line-height: 1.4; position: relative; word-wrap: break-word; }
.fb-chat-body .message-time { display: block; font-size: 9px; margin-top: 2px; opacity: 0.7; text-align: right; }
.fb-chat-body .message-sent { justify-content: flex-end; }
.fb-chat-body .message-sent .message-bubble { background-color: #0084ff; color: #ffffff; border-bottom-right-radius: 4px; }
.fb-chat-body .message-received { justify-content: flex-start; }
.fb-chat-body .message-received .message-bubble { background-color: #e4e6eb; color: #050505; border-bottom-left-radius: 4px; }
.fb-chat-body .no-messages-placeholder { text-align: center; color: #65676b; margin-top: 20px; font-size: 12px; font-style: italic; }
.fb-chat-footer { padding: 8px; background: #ffffff; border-top: 1px solid #e4e6eb; }
.fb-chat-input { width: 100%; border: 1px solid #ccd0d5; border-radius: 16px; padding: 6px 12px; font-size: 13px; outline: none; box-sizing: border-box; }
.fb-chat-input:focus { border-color: #1877f2; }

/* Responsive Breakpoints */
@media (max-width: 900px) {
    .profile-lower-layout { grid-template-columns: 1fr; gap: 20px; }
    .profile-sidebar { grid-column: 1; }
    .profile-main { grid-column: 1; }
    .user-identity-bar { flex-direction: column; align-items: center; text-align: center; }
    .name-line-wrapper { margin-right: 0; margin-bottom: 16px; width: 100%; }
    .profile-edit-btn-inline, .profile-add-btn-inline, .profile-pending-btn-inline, .profile-accept-btn-inline { position: static; display: inline-block; margin-top: 10px; }
    .header-horizontal-line { display: none; } 
    .profile-grid-container { padding: 0 15px; }
    .myplaces-profile-nav { justify-content: center; flex-wrap: wrap; margin-top: 20px; }
}
/* ==========================================================
   10. FRIENDS LIST PAGE
   ========================================================== */

.friends-wrapper {
    width: 100%;
    max-width: 850px;
    margin: 40px auto;
    padding: 20px;
    box-sizing: border-box;
}

.friends-card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.friends-card h2 {
    margin-top: 0;
    margin-bottom: 5px;
    color: #2c3e50;
    font-size: 24px;
}

.friend-count {
    color: #718096;
    font-size: 14px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e2e8f0;
}

.friend-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.friend-item {
    padding: 0;
    background-color: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.friend-link-wrapper {
    display: block;
    padding: 15px;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
}

.friend-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    border-color: #cbd5e0;
}

.friend-meta {
    display: flex;
    align-items: center;
}

.friend-avatar {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    margin-right: 15px;
    display: block;
    object-fit: cover;
    border: 1px solid #cbd5e0;
}

.friend-name {
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
    transition: color 0.15s ease;
}

.friend-item:hover .friend-name {
    color: #3182ce;
}

.no-friends {
    grid-column: 1 / -1;
    text-align: center;
    color: #718096;
    padding: 30px 0;
    font-size: 14px;
}
/* ==========================================================
   11. PHOTOS PAGE
   ========================================================== */

.gallery-container { font-family: Arial, sans-serif; max-width: 1000px; margin: 0 auto; }
.gallery-title { text-align: center; color: #333; }

/* Upload Section Styling */
#photo-upload-container { 
    background: #fff; 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    margin-bottom: 40px; 
}
#photo-upload-container h2 { margin-top: 0; color: #333; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-weight: bold; margin-bottom: 5px; color: #555; }
.form-group input[type="text"] { width: 100%; max-width: 400px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
.form-group button { background: #007bff; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; font-size: 14px; }
.form-group button:hover { background: #0056b3; }

hr { border: 0; height: 1px; background: #ddd; margin: 40px 0; }

/* Grid Layout for Photos */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.photo-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); overflow: hidden; }
.photo-card img { width: 100%; height: 250px; object-fit: cover; display: block; }
.photo-info { padding: 15px; }
.photo-caption { font-size: 16px; margin: 0 0 10px 0; color: #222; font-weight: bold; }
.photo-date { font-size: 12px; color: #777; }
.no-photos { text-align: center; color: #666; font-size: 18px; margin-top: 50px; }
/* ==========================================================
   12. EDIT PROFILE PAGE
   ========================================================== */

.edit-profile-wrapper {
    flex: 1;
    width: 100%;
    max-width: 500px;
    margin: 40px auto;
    padding: 20px;
    box-sizing: border-box;
}

.edit-card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.edit-card h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #2c3e50;
    font-size: 22px;
    border-bottom: 2px solid #f0f2f5;
    padding-bottom: 10px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #4a5568;
}

.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    font-size: 14px;
    color: #2d3748;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.form-select-custom {
    width: 250px;
    padding: 10px;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    font-size: 14px;
    color: #2d3748;
}

.form-control:focus {
    outline: none;
    border-color: #3182ce;
}

textarea.form-control {
    height: 100px;
    resize: none;
}

.btn-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
}

.save-btn {
    background-color: #2b6cb0;
    color: #ffffff;
    border: none;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.save-btn:hover {
    background-color: #2c5282;
}

.cancel-link {
    color: #718096;
    text-decoration: none;
    font-size: 14px;
}

.cancel-link:hover {
    text-decoration: underline;
}

.status-banner {
    padding: 12px;
    border-radius: 5px;
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center;
    border: 1px solid transparent;
}

.banner-success {
    background-color: #f0fff4;
    color: #38a169;
    border-color: #c6f6d5;
}

.banner-error {
    background-color: #fff5f5;
    color: #e53e3e;
    border-color: #fed7d7;
}
/* ==========================================================
   13. SETTINGS PAGE
   ========================================================== */

body {
    margin: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden;
}

.page-wrapper {
    display: flex; flex: 1; overflow: hidden;
}

.side-nav {
    width: 250px; background-color: #2c3e50; border-right: 1px solid #ddd; padding: 20px; box-sizing: border-box; flex-shrink: 0;
}

.settings-wrapper {
    flex: 1; overflow-y: auto; padding: 40px 20px; background: #f9f9f9;
}

.nav-item {
    padding: 15px; cursor: pointer; border-bottom: 1px solid #34495e; font-weight: bold; color: #ffffff; transition: 0.2s;
}

.nav-item:hover, .nav-item.active {
    background: #1C1717; color: #2b6cb0; border-left: 4px solid #2b6cb0;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.settings-card {
    background-color: #ffffff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); max-width: 500px; margin: 0 auto;
}

.settings-card h2 {
    margin-top: 0; margin-bottom: 20px; color: #2c3e50; font-size: 22px; border-bottom: 2px solid #f0f2f5; padding-bottom: 10px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: #4a5568;
}

.form-control {
    width: 100%; padding: 10px; border: 1px solid #cbd5e0; border-radius: 6px; font-size: 14px; color: #2d3748; box-sizing: border-box; transition: border-color 0.15s ease;
}

.form-control:focus {
    outline: none; border-color: #3182ce;
}

.btn-container {
    display: flex; justify-content: space-between; align-items: center; margin-top: 25px;
}

.save-btn {
    background-color: #2b6cb0; color: #ffffff; border: none; padding: 10px 24px; font-size: 14px; font-weight: 600; border-radius: 4px; cursor: pointer; transition: background-color 0.15s ease;
}

.save-btn:hover {
    background-color: #2c5282;
}

.cancel-link {
    color: #718096; text-decoration: none; font-size: 14px;
}

.cancel-link:hover {
    text-decoration: underline;
}

.section-title {
    margin-top: 30px; margin-bottom: 15px; font-size: 14px; font-weight: bold; color: #718096; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px dashed #e2e8f0; padding-bottom: 5px;
}

.danger-zone {
    margin-top: 35px; padding: 20px; border: 1px solid #fed7d7; background-color: #fff5f5; border-radius: 6px;
}

.danger-zone-title {
    color: #c53030; font-weight: bold; margin-top: 0; margin-bottom: 10px; font-size: 15px;
}

.danger-text {
    font-size: 13px; color: #742a2a; margin-bottom: 15px; line-height: 1.4;
}

.danger-actions {
    display: flex; gap: 10px;
}

.danger-btn {
    flex: 1; padding: 10px; font-size: 13px; font-weight: 600; border: 1px solid transparent; border-radius: 4px; cursor: pointer; text-align: center;
}

.btn-deactivate {
    background-color: #fff; border-color: #cbd5e0; color: #4a5568;
}

.btn-deactivate:hover {
    background-color: #f7fafc;
}

.btn-delete {
    background-color: #e53e3e; color: #fff;
}

.btn-delete:hover {
    background-color: #c53030;
}

.status-banner {
    padding: 12px; border-radius: 5px; font-size: 14px; margin-bottom: 20px; text-align: center; border: 1px solid transparent;
}

.banner-success {
    background-color: #f0fff4; color: #38a169; border-color: #c6f6d5;
}

.banner-error {
    background-color: #fff5f5; color: #e53e3e; border-color: #fed7d7;
}
/* ==========================================================
   15. FORGOT PASSWORD PAGE
   ========================================================== */

.main-content-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    box-sizing: border-box;
}

.forgot-container {
    background-color: #ffffff;
    width: 100%;
    max-width: 420px;
    padding: 35px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

.forgot-header {
    text-align: center;
    margin-bottom: 24px;
}

.forgot-header h1 {
    color: #1a202c;
    margin: 0 0 8px 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.forgot-header p {
    color: #718096;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.form-group {
    margin-bottom: 18px;
}

.form-label {
    display: block;
    margin-bottom: 6px;
    color: #4a5568;
    font-size: 13px;
    font-weight: 600;
}

.form-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #cbd5e0;
    border-radius: 5px;
    font-size: 14px;
    color: #2d3748;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus {
    outline: none;
    border-color: #3182ce;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

.alert {
    padding: 12px;
    border-radius: 5px;
    font-size: 13px;
    margin-bottom: 20px;
    border: 1px solid;
    text-align: center;
    font-weight: 500;
    line-height: 1.4;
}

.alert-danger {
    background-color: #fff5f5;
    color: #c53030;
    border-color: #fed7d7;
}

.alert-success {
    background-color: #f0fff4;
    color: #2f855a;
    border-color: #c6f6d5;
}

.submit-btn {
    width: 100%;
    background-color: #2b6cb0;
    color: #ffffff;
    border: none;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    margin-top: 8px;
}

.submit-btn:hover {
    background-color: #2c5282;
}

.forgot-footer {
    text-align: center;
    margin-top: 24px;
    border-top: 1px solid #e2e8f0;
    padding-top: 18px;
    font-size: 13px;
    color: #718096;
}

.forgot-footer a {
    color: #3182ce;
    text-decoration: none;
    font-weight: 600;
}

.forgot-footer a:hover {
    text-decoration: underline;
}
/* ==========================================================
   14. BUG REPORTS PAGE
   ========================================================== */
   
.report-list { width: 80%; margin: 20px auto; border-collapse: collapse; }
        .report-list th, .report-list td { padding: 10px; border: 1px solid #ddd; }
        .status-open { color: red; }
        .status-resolved { color: green; }
/* ==========================================================
   14. ADMIN REPORTS PAGE
   ========================================================== */
   
.report-container { width: 90%; margin: 20px auto; font-family: sans-serif; }
    table { width: 100%; border-collapse: collapse; margin-top: 20px; }
    th, td { padding: 12px; border: 1px solid #ddd; text-align: left; }
    th { background-color: #f4f4f4; }
    .btn { padding: 6px 12px; cursor: pointer; border: none; border-radius: 4px; }
    .btn-delete { background-color: #e53e3e; color: white; }
    .btn-resolve { background-color: #38a169; color: white; }
/* ==========================================================
   14. FOOTER AND MODAL
   ========================================================== */

.site-footer {
    background-color: #2c3e50;
    padding: 15px 20px;
    text-align: center;
    font-size: 13px;
    color: #7f8c8d;
    width: 100%;
    box-sizing: border-box;
    margin-top: auto;
}

/* This only changes the body background and basic text */
body.dark-mode {
    background-color: #2c2c2c !important;
}

/* We specifically do NOT include .settings-card or .tab-pane here */

/* Toggle Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 20px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:checked + .slider:before {
  transform: translateX(20px);
}
/* ==========================================================
   14. MEMBERS PAGE (Scoped)
   ========================================================== */

.members-page-scope { 
    background-color: #f0f2f5; 
    padding: 20px;
    min-height: 100vh;
}

.members-page-scope .members-page-wrapper { 
    max-width: 900px; 
    margin: 20px auto; 
}

.members-page-scope .members-container {
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    gap: 20px; 
}

.members-page-scope .user-card { 
    background: #ffffff; 
    padding: 25px; 
    border-radius: 15px; 
    text-align: center; 
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.members-page-scope .user-card img { 
    width: 110px; 
    height: 110px; 
    border-radius: 50%; 
    object-fit: cover; 
    border: 4px solid #fff;
    box-shadow: 0 0 0 2px #e4e6eb;
    margin-bottom: 10px;
}

.members-page-scope .user-card h3 { margin: 5px 0; font-size: 1.1em; color: #1c1e21; }
.members-page-scope .user-card small { color: #65676b; font-weight: 500; }

.members-page-scope .action-buttons { 
    margin-top: 15px; 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    width: 100%; 
}

.members-page-scope .btn-message, 
.members-page-scope .btn-add { 
    display: block;
    width: 100%;
    padding: 8px 0;
    border-radius: 6px; 
    text-decoration: none; 
    font-weight: 600; 
    font-size: 13px;
    text-align: center;
}

.members-page-scope .btn-message { background: #0084ff; color: white; }
.members-page-scope .btn-add { background: #e4e6eb; color: #050505; }