/* --- style.css --- */

/* ============================================================ */
/* --- BASIC RESET & DEFAULTS --- */
/* ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.6;
    color: #333;
    background-color: #f4f7f6;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ============================================================ */
/* --- GENERAL ELEMENTS --- */
/* ============================================================ */
h1, h2, h3 { margin-bottom: 0.75em; line-height: 1.3; font-weight: 600; }
h1 { font-size: 2.1em; color: #2c3e50; text-align: center; margin-top: 1em; }
h2 { font-size: 1.7em; color: #34495e; }
h3 { font-size: 1.3em; color: #34495e; }
p { margin-bottom: 1em; }
a { color: #3498db; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; color: #2980b9; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; font-size: inherit; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ============================================================ */
/* --- HEADER & NAVBAR --- */
/* ============================================================ */
header {
    background-color: #2c3e50; color: #ecf0f1; padding: 0.5em 0; position: sticky;
    top: 0; z-index: 1000; width: 100%; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.navbar { max-width: 1200px; margin: 0 auto; padding: 0 15px; display: flex; justify-content: space-between; align-items: center; min-height: 50px; position: relative; }
.navbar-brand { color: #ecf0f1; font-size: 1.4em; font-weight: bold; text-decoration: none; }
.navbar-brand:hover, .navbar-brand:focus { color: #fff; text-decoration: none; }
.navbar ul { display: none; flex-direction: column; width: 100%; position: absolute; top: 100%; left: 0; background-color: #34495e; padding: 5px 0; border-top: 1px solid #46627f; z-index: 999; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
/* --- JS will toggle this class --- */
.navbar.active ul { display: flex; }
.navbar li { text-align: center; margin: 0; width: 100%; border-bottom: 1px solid #46627f; }
.navbar li:last-child { border-bottom: none; }
.navbar li a { color: #ecf0f1; padding: 14px 15px; display: block; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; font-size: 1.05em; }
.navbar li a:hover, .navbar li a:focus { background-color: #4a6886; text-decoration: none; color: #fff; }
.navbar li a.active { font-weight: bold; color: #fff; }
.menu-toggle { display: block; background: none; border: none; color: #ecf0f1; font-size: 1.8em; line-height: 1; cursor: pointer; padding: 5px 8px; margin-left: 10px; }
.menu-toggle:hover, .menu-toggle:focus { color: #fff; background-color: rgba(255, 255, 255, 0.1); border-radius: 3px; }
.menu-toggle:focus { outline: 2px solid #3498db; outline-offset: 2px; }
.nav-reminder { display: inline-block; margin-right: 10px; padding: 2px 6px; background-color: #fff3cd; color: #856404; border-radius: 3px; font-size: 0.85em; vertical-align: middle; }
.nav-reminder a { color: #856404 !important; text-decoration: none !important; font-weight: 500; }
.nav-reminder a:hover, .nav-reminder a:focus { text-decoration: underline !important; background-color: #ffeeba; }
.nav-reminder a.active { font-weight: bold; }

/* ============================================================ */
/* --- MAIN CONTENT & PAGE WRAPPERS --- */
/* ============================================================ */
main, /* Default wrapper for pages WITH max-width */
.forum-container, /* Wrapper for full-width forum */
.contact-page-wrapper, /* Wrapper for full-width contacts */
.admin-container /* Wrapper for admin pages */
{
    margin: 25px auto; /* Centering for main */
    padding: 20px; /* Default mobile padding */
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-radius: 6px;
    flex-grow: 1; /* Allow content area to grow */
}

main,
.admin-container /* Apply max-width to standard main and admin content */
{
     max-width: 1200px;
}

/* Forum and Contact wrappers don't get max-width by default */
.forum-container,
.contact-page-wrapper {
    margin-left: 0; /* Override auto margin for full width */
    margin-right: 0; /* Override auto margin for full width */
    border-radius: 0; /* Optional: remove radius for full width */
    box-shadow: none; /* Optional: remove shadow for full width */
    /* Add horizontal padding to keep content from touching edges */
    padding-left: 15px;
    padding-right: 15px;
}


/* ============================================================ */
/* --- SHARED COMPONENTS (Forms, Buttons, Messages, etc.) --- */
/* ============================================================ */
.welcome-login-container { display: flex; flex-direction: column; gap: 30px; margin-bottom: 30px; }
.welcome-message, .login-section { flex: 1; padding: 20px; border: 1px solid #e0e0e0; border-radius: 5px; background-color: #fff; }
.welcome-message strong { color: #2c3e50; }
.login-section h3 { text-align: center; margin-top: 0; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.95em; }
/* Extended input types */
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group input[type="file"], /* Added for photo upload */
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    transition: border-color 0.2s ease;
    font-family: inherit;
}
/* Specific style for file input */
.form-group input[type="file"] { padding: 8px 10px; /* Adjust padding for file input */ }

.form-group input[type="checkbox"], .form-group input[type="radio"] { width: auto; margin-right: 5px; vertical-align: middle; }
.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="tel"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="file"]:focus, /* Added */
.form-group textarea:focus,
.form-group select:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}
.form-group textarea { min-height: 100px; resize: vertical; }
/* General Button in form group */
.form-group button {
    width: 100%; /* Default mobile */
    padding: 12px 15px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: 500;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group button:hover, .form-group button:focus { background-color: #2980b9; box-shadow: 0 2px 4px rgba(0,0,0,0.1); outline: none; }

/* Generic button style */
button[type="submit"], .button-link, .add-contact-btn, .action-button /* Include admin button class */
{
    display: inline-block;
    padding: 8px 15px;
    color: white !important;
    text-decoration: none !important; /* Ensure links don't get underlined */
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    vertical-align: middle;
    margin-right: 5px;
    margin-bottom: 10px;
    font-weight: bold;
    background-color: #3498db; /* Default button color */
    line-height: 1.4; /* Consistent vertical align */
}
button[type="submit"]:hover, .button-link:hover, .add-contact-btn:hover, .action-button:hover {
    color: white !important;
    text-decoration: none !important;
    background-color: #2980b9; /* Darker default hover */
    opacity: 0.85; /* Slight fade for hover */
}

/* Specific button styles */
.button-link { background-color: #5cb85c; } /* Original green for generic links */
.button-link:hover { background-color: #4cae4c; }
.button-link.info { background-color: #5bc0de; }
.button-link.info:hover { background-color: #31b0d5; }
.add-contact-btn { background-color: #5cb85c; padding: 10px 18px; }
.add-contact-btn:hover { background-color: #4cae4c; }

/* Admin Action Button Colors (override generic button styles) */
.action-button { padding: 5px 10px; font-size: 0.9em; margin: 2px; font-weight: 500; margin-bottom: 2px; /* Reduce bottom margin */ } /* Tweak admin buttons */
.btn-approve { background-color: #28a745 !important; } /* Green */
.btn-approve:hover { background-color: #218838 !important; }
/* Reject button uses delete style now for consistency */
.btn-reject, .btn-delete { background-color: #dc3545 !important; } /* Red */
.btn-reject:hover, .btn-delete:hover { background-color: #c82333 !important; }
/* Archive button uses expire style now for consistency */
.btn-archive, .btn-expire { background-color: #6c757d !important; } /* Gray */
.btn-archive:hover, .btn-expire:hover { background-color: #5a6268 !important; }
/* Unarchive button uses approve style */
.btn-unarchive { background-color: #28a745 !important; } /* Green */
.btn-unarchive:hover { background-color: #218838 !important; }
/* View button uses edit style */
.btn-view, .btn-edit { background-color: #17a2b8 !important; } /* Teal/Info */
.btn-view:hover, .btn-edit:hover { background-color: #117a8b !important; }


.form-group-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.form-group-radio label { font-weight: normal; margin-right: 15px; display: inline-block; margin-bottom: 5px; }
.form-group-radio div { margin-bottom: 5px; }
.form-group-radio > label:first-of-type { font-weight: 600; display: block; margin-bottom: 8px; }
.visibility-note { font-size: 0.9em; color: #555; margin-top: 5px; margin-bottom: 15px; display: block; padding-left: 5px; }
/* Feedback messages */
.feedback-message { padding: 12px 15px; margin-bottom: 18px; border-radius: 4px; text-align: left; border: 1px solid transparent; font-size: 1em; font-weight: bold; }
.success-message { background-color: #e9f7ef; color: #155724; border-color: #c3e6cb; }
.error-message { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }
.warning-message { background-color: #fff3cd; color: #856404; border-color: #ffeeba; } /* Added for warnings */
/* Admin notices (used on photo detail) */
.admin-notice {
    background-color: #fff3cd; color: #856404; border: 1px solid #ffeeba;
    padding: 8px 12px; border-radius: 4px; font-size: 0.9em; margin-bottom: 15px;
}
.admin-notice strong { color: #664d03; } /* Darker text for strong */

/* Ensure form error messages are distinct if needed */
.form-group .error-message { background-color: transparent; color: #dc3545; border: none; text-align: left; padding: 0; font-size: 0.9em; margin-top: 5px; font-weight: normal; }

.fetch-error { text-align: center; color: #d9534f; font-weight: bold; padding: 15px; border: 1px solid #d9534f; background-color: #f2dede; border-radius: 4px; margin: 20px 0; }
.login-links-footer { text-align: center; margin-top: 25px; padding-top: 15px; border-top: 1px solid #eee; font-size: 0.95em; line-height: 1.6; }
.login-links-footer a { margin: 0 6px; color: #0056b3; text-decoration: none; }
.login-links-footer a:hover, .login-links-footer a:focus { text-decoration: underline; }
.login-links-footer span.separator { margin: 0 5px; color: #bbb; }
.quick-links { margin-top: 35px; padding-top: 25px; border-top: 1px solid #eee; }
.quick-links ul { padding-left: 0; }
.quick-links li { margin-bottom: 10px; padding-left: 20px; position: relative; font-size: 1.05em; }
.quick-links li::before { content: '→'; position: absolute; left: 0; color: #3498db; font-weight: bold; }

/* Container for forms like register, create announcement, upload photo, etc. */
.form-container { max-width: 700px; margin: 25px auto; padding: 25px 30px; border: 1px solid #e0e0e0; border-radius: 6px; background-color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.form-container h1, .form-container h2 { margin-top: 0; margin-bottom: 1.2em; text-align: center; font-size: 1.8em; }
.form-container h2 { font-size: 1.6em; } /* Slightly smaller for H2 */
.form-container p { text-align: center; margin-bottom: 20px; font-size: 1em; color: #555; }
.form-actions { text-align: center; margin-top: 25px; padding-top: 15px; border-top: 1px solid #eee; }
.form-actions button { padding: 10px 25px; font-size: 1.1em; } /* Specific button size in form actions */
.form-actions a { margin-left: 20px; color: #6c757d; text-decoration: none; display: inline-block; padding: 10px 15px; vertical-align: middle; }
.form-actions a:hover { text-decoration: underline; color: #333; }

/* ============================================================ */
/* --- ANNOUNCEMENT STYLES (Index Page) --- */
/* ============================================================ */
.announcements-section {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 5px;
}
.announcements-section h2 {
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.announcement {
    border-bottom: 1px dashed #eee;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.announcement:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.announcement h3 {
    margin-top: 0;
    margin-bottom: 8px;
    color: #333;
    font-size: 1.4em;
}
.announcement-meta {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 8px;
}
.announcement-content {
    color: #444;
    line-height: 1.7;
    word-wrap: break-word; /* Ensure long words break */
}
.no-announcements {
    text-align: center;
    color: #777;
    padding: 25px 15px;
    font-style: italic;
}
.create-announcement-link {
    display: block;
    text-align: right;
    margin-top: 15px;
    font-weight: bold;
    font-size: 1.05em;
}

/* ============================================================ */
/* --- CONTACT PAGE STYLES (CARDS) --- */
/* ============================================================ */
/* Applied via .contact-page-wrapper in HTML */
.contact-card-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 20px; }
.contact-card { background-color: #fff; border: 1px solid #e0e0e0; border-radius: 6px; padding: 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); transition: box-shadow 0.2s ease-in-out; position: relative; overflow: hidden; }
.contact-card:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.contact-summary { cursor: pointer; padding-bottom: 10px; border-bottom: 1px dashed #eee; margin-bottom: 10px; }
.contact-summary h3 { margin-bottom: 5px; font-size: 1.2em; color: #2c3e50; }
.contact-summary .contact-phone { color: #555; font-size: 1em; margin-bottom: 8px; }
.contact-summary .contact-phone .label { font-weight: 600; color: #333; margin-right: 5px; }
.expand-toggle { background: none; border: none; color: #3498db; cursor: pointer; padding: 3px 0; font-size: 0.9em; text-align: left; width: 100%; display: block; }
.expand-toggle:hover { text-decoration: underline; color: #2980b9; }
.expand-icon { display: inline-block; margin-right: 4px; font-weight: bold; transition: transform 0.2s ease-in-out; }
.contact-card.expanded .expand-icon { transform: rotate(180deg); }
.contact-details { font-size: 0.95em; line-height: 1.7; max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, padding-top 0.4s ease-out, margin-top 0.4s ease-out; margin-top: 0; padding-top: 0; }
.contact-card.expanded .contact-details { max-height: 500px; padding-top: 15px; margin-top: 10px; transition: max-height 0.5s ease-in, padding-top 0.5s ease-in, margin-top 0.5s ease-in; }
.contact-details.hidden { max-height: 0; padding-top: 0; margin-top: 0; border-top: none; overflow: hidden; }
.contact-details p { margin-bottom: 8px; }
.contact-details .label { font-weight: 600; color: #333; display: inline-block; min-width: 90px; }
.contact-details span[class^="visibility-"] { font-weight: bold; padding: 2px 5px; border-radius: 3px; font-size: 0.9em; }
.visibility-private { color: #6c757d; background-color: #f8f9fa; border: 1px solid #dee2e6; }
.visibility-public { color: #1d643b; background-color: #d1e7dd; border: 1px solid #badbcc; }
.contact-owner { font-style: italic; color: #555; font-size: 0.9em; }
.contact-actions { margin-top: 15px; padding-top: 10px; border-top: 1px solid #eee; text-align: right; }
/* Use .action-button for contact actions too for consistency */
.contact-actions a, .contact-actions button {
    margin-left: 5px;
    font-size: 0.9em; /* Keep slightly smaller */
    padding: 5px 10px; /* Keep slightly smaller */
    /* Inherit .action-button styles */
}
.contact-actions form { display: inline-block; margin: 0; padding: 0; vertical-align: middle; }
/* Specific colors for contact edit/delete if needed, otherwise use btn-edit/btn-delete */
/* .contact-actions .button-edit { background-color: #f0ad4e !important; border-color: #eea236 !important; } */
/* .contact-actions .button-edit:hover { background-color: #ec971f !important; border-color: #d58512 !important; } */
/* .contact-actions .button-delete { background-color: #d9534f !important; border: 1px solid #d43f3a !important; } */
/* .contact-actions .button-delete:hover { background-color: #c9302c !important; border-color: #ac2925 !important; } */

.no-contacts { text-align: center; padding: 30px 20px; background-color: #f9f9f9; border: 1px dashed #ccc; border-radius: 4px; margin-top: 20px; color: #555; }
.no-contacts p { margin-bottom: 0.5em; }

/* ============================================================ */
/* --- CALENDAR STYLES --- */
/* ============================================================ */
/* Applied via <main> element on calendar.php */
.calendar-container { margin-top: 20px; }
.calendar-grid-desktop { display: none; width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 15px; }
.calendar-list-mobile { display: block; margin-top: 20px; }
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 10px; background-color: #eee; border-radius: 4px; }
.calendar-header h2 { margin: 0; font-size: 1.4em; text-align: center; flex-grow: 1; }
.calendar-nav a { text-decoration: none; padding: 5px 10px; background-color: #ddd; color: #333; border-radius: 3px; transition: background-color 0.2s; white-space: nowrap; }
.calendar-nav a:hover { background-color: #ccc; }
.calendar-grid-desktop th, .calendar-grid-desktop td { border: 1px solid #ccc; padding: 5px; vertical-align: top; height: 120px; overflow: hidden; position: relative; }
.calendar-grid-desktop th { background-color: #f5f5f5; text-align: center; font-weight: bold; height: auto; font-size: 0.9em; }
.calendar-grid-desktop td { background-color: #fff; }
.calendar-grid-desktop .day-number { font-weight: bold; font-size: 0.9em; text-align: right; display: block; margin-bottom: 3px; color: #555; }
.calendar-grid-desktop .other-month { background-color: #f9f9f9; }
.calendar-grid-desktop .other-month .day-number { color: #bbb; }
.calendar-grid-desktop .today { background-color: #ffffdd; }
.calendar-grid-desktop .today .day-number { color: #000; font-weight: bold; }
.event-item { display: block; font-size: 0.8em; padding: 3px 5px; margin-bottom: 3px; border-radius: 3px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid rgba(0,0,0,0.1); line-height: 1.3; cursor: pointer; transition: box-shadow 0.2s; }
.event-item:hover { box-shadow: 0 0 5px rgba(0,0,0,0.3); }
.mobile-event-item { white-space: normal; margin-bottom: 5px; position: relative; padding-left: 15px; }
.mobile-event-item::before { content: ''; position: absolute; left: 3px; top: 5px; bottom: 5px; width: 5px; background-color: var(--event-color, #ccc); border-radius: 3px; }
.events-list { margin-top: 2px; max-height: 85px; overflow-y: auto; padding-right: 5px; scrollbar-width: thin; scrollbar-color: #aaa #eee; }
.events-list::-webkit-scrollbar { width: 5px; }
.events-list::-webkit-scrollbar-track { background: #eee; border-radius: 3px;}
.events-list::-webkit-scrollbar-thumb { background-color: #aaa; border-radius: 3px; }
.calendar-list-mobile .mobile-event-day { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
.calendar-list-mobile .mobile-event-day-header { font-weight: bold; font-size: 1.1em; margin-bottom: 8px; color: #333; }
.calendar-list-mobile .mobile-event-time { font-size: 0.8em; color: #555; display: block; margin-top: 2px; }
.modal { display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); padding-top: 60px; align-items: center; justify-content: center; }
.modal-content { background-color: #fefefe; margin: auto; padding: 25px; border: 1px solid #888; width: 80%; max-width: 600px; border-radius: 8px; position: relative; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); max-height: 85vh; overflow-y: auto; }
.modal-close-btn { color: #aaa; position: absolute; top: 10px; right: 15px; font-size: 28px; font-weight: bold; line-height: 1; cursor: pointer; }
.modal-close-btn:hover, .modal-close-btn:focus { color: black; text-decoration: none; }
.modal-header { border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 15px; display: flex; align-items: center; }
.modal-header-color-indicator { width: 15px; height: 15px; border-radius: 3px; margin-right: 10px; display: inline-block; flex-shrink: 0; }
.modal-header h3 { margin: 0; font-size: 1.5em; }
.modal-body p { margin: 10px 0; line-height: 1.6; }
.modal-body strong { color: #555; }
.modal-body .event-description { margin-top: 15px; padding-top: 15px; border-top: 1px dashed #eee;}

/* ============================================================ */
/* --- FORUM STYLES --- */
/* ============================================================ */
/* Applied via .forum-container in HTML */
.new-post-box { background-color: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 30px; border: 1px solid #dee2e6; }
.new-post-box h2 { margin-top: 0; margin-bottom: 15px; font-size: 1.5em; color: #333; }
/* --- Generic Comment Form Style (Used in Forum and Photo Detail) --- */
.comment-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee;}
.comment-form h4 { margin-bottom: 15px; } /* Heading for comment form */
.comment-form textarea { min-height: 80px; margin-bottom: 10px;}
.comment-form button { /* Uses general form button style .form-group button */ }
/* --- Forum Specific Comment Form Actions --- */
.forum-container .comment-form .form-group-inline { justify-content: flex-end; }
.forum-container .comment-form button { padding: 8px 15px; background-color: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 0.95em; transition: background-color 0.2s; }
.forum-container .comment-form button:hover { background-color: #5a6268; }
.forum-container .comment-form button[type="submit"] { background-color: #007bff; margin-left: 10px; }
.forum-container .comment-form button[type="submit"]:hover { background-color: #0056b3; }
/* --- End Forum Specific --- */

/* --- Generic Comment List Styles (Used in Forum and Photo Detail) --- */
.comments-section { margin-top: 30px; }
.comments-section h3 { margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px;}
.comment-list { margin-top: 20px; }
/* --- Forum Specific Header --- */
.forum-container .comment-list > h2 { margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; font-size: 1.4em; }
/* --- Generic Comment Item Style --- */
.comment {
    border: 1px solid #e5e5e5;
    background-color: #f9f9f9;
    padding: 12px 15px; /* Increased padding slightly */
    margin-bottom: 12px; /* Increased spacing */
    border-radius: 4px;
    overflow: hidden; /* Added for safety */
    box-shadow: 0 1px 2px rgba(0,0,0,0.04); /* Subtle shadow */
}
/* --- Forum Specific Nested Comment Style --- */
.forum-container .comment-container .comment-container { margin-top: 15px; border-left: 3px solid #eee; border-top: 1px solid #eee; border-right: none; border-bottom: none; box-shadow: none; border-radius: 0 6px 6px 0; }
/* --- Generic Comment Header/Meta --- */
.comment-header { display: flex; align-items: center; margin-bottom: 10px; gap: 10px; flex-wrap: wrap;}
.profile-pic-placeholder { width: 40px; height: 40px; border-radius: 50%; background-color: #6c757d; color: white; display: inline-flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1em; flex-shrink: 0;}
.comment-author { font-weight: bold; color: #007bff; }
.comment-timestamp { font-size: 0.85em; color: #6c757d; margin-left: auto; white-space: nowrap; }
/* --- Generic Comment Body --- */
.comment-body { margin-bottom: 10px; }
.comment-content, .comment-text /* Use both for compatibility */
{
    line-height: 1.6;
    word-wrap: break-word;
}
/* --- Forum Specific Actions --- */
.comment-actions { margin-top: 10px; text-align: right; }
.reply-button { background: none; border: none; color: #007bff; cursor: pointer; font-size: 0.9em; padding: 3px 5px; }
.reply-button:hover { text-decoration: underline; }
.reply-form-container { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #eee; }
.reply-form-container.hidden { display: none; }
/* --- Generic No Comments Message --- */
.no-comments { color: #777; font-style: italic; padding: 15px 0; }

/* ============================================================ */
/* --- PHOTO GALLERY STYLES (Category View) --- */
/* ============================================================ */
.gallery-category-covers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Desktop cover grid */
    gap: 20px;
    margin-bottom: 30px;
}
.category-cover-item {
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s ease-in-out;
    cursor: pointer;
    position: relative;
}
.category-cover-item:hover {
    box-shadow: 0 5px 12px rgba(0,0,0,0.15);
}
.category-cover-item img {
    width: 100%;
    height: 200px; /* Cover image height */
    object-fit: cover;
    display: block;
    border-bottom: 1px solid #eee;
}
.category-cover-info {
    padding: 12px 15px;
    text-align: left;
}
.category-cover-title {
    font-weight: bold;
    font-size: 1.1em;
    color: #333;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.category-cover-count {
    font-size: 0.9em;
    color: #555;
}

/* Container for the full grid of photos within a category */
.category-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Grid for revealed photos */
    gap: 15px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed #ccc;
    /* Add animation/transition if desired */
    /* transition: opacity 0.3s ease-in-out; */
}

/* Initially hide the photo grids */
.category-photos-grid.hidden {
    display: none;
    /* opacity: 0; */ /* For transition effect */
    /* visibility: hidden; */ /* For transition effect */
}

/* Styles for individual photo items (likely already exist) */
.photo-item {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    text-align: center;
}
.photo-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.photo-item a { display: block; text-decoration: none; color: inherit; }
.photo-item img { width: 100%; height: 180px; object-fit: cover; display: block; background-color: #eee; border:none; }
.photo-info { padding: 10px; font-size: 0.9em; }
.photo-title { font-weight: bold; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-uploader { color: #666; font-size: 0.85em; }
.no-photos { text-align: center; padding: 30px; color: #777; background-color: #f9f9f9; border: 1px dashed #ccc; border-radius: 4px; }


/* --- PHOTO DETAIL PAGE STYLES --- */
.photo-container { /* Wrapper for single photo content */
    max-width: 900px; /* Or adjust as needed */
    margin: 20px auto;
    background-color: #fff;
    padding: 20px 30px; /* Slightly more padding */
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    /* Default: children stack vertically */
}

.photo-image-area {
    margin-bottom: 25px; /* Space below image on mobile */
}

.photo-image-area img { /* The main photo */
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Center image within its area */
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* Subtle shadow */
}

.photo-details-area {
    /* Styles specific to the details column can go here */
}

.photo-details h2 { /* Photo Title */
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.8em;
    color: #333;
    text-align: center; /* Default: Center title */
}
.photo-meta {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    text-align: center; /* Default: Center metadata */
    line-height: 1.5;
}
.photo-meta span {
    margin: 0 10px; /* Spacing between meta items */
    display: inline-block; /* Ensure spacing works */
}
.photo-meta strong { color: #444; }
.photo-description {
    margin-bottom: 25px;
    line-height: 1.7;
    background-color: #fdfdfd; /* Slight background for description */
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #eee;
}
.photo-description strong {
    display: block;
    margin-bottom: 8px;
    font-size: 1.1em;
    color: #333;
}
.download-link {
    margin-top: 15px;
    display: inline-block;
    /* Inherits .button-link styles */
}

/* --- PHOTO COMMENT STYLES (Use generic comment styles defined in FORUM section) --- */


/* ============================================================ */
/* --- ADMIN AREA STYLES --- */
/* ============================================================ */
/* Uses .admin-container defined in MAIN CONTENT section */
.admin-section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fdfdfd;
}
.admin-section h2 {
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px; /* Increased spacing after heading */
    font-size: 1.6em; /* Slightly larger admin headings */
}

/* Generic Admin Table Style */
table.admin-table, /* General class for admin tables */
table.announcements-table, /* Specific */
table.photos-table /* Specific */
{
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 0.95em; /* Slightly smaller table font */
    table-layout: auto; /* Let browser decide column widths */
}
.admin-table th, .admin-table td,
.announcements-table th, .announcements-table td,
.photos-table th, .photos-table td
{
    border: 1px solid #ddd;
    padding: 10px 12px; /* Increased padding */
    text-align: left;
    vertical-align: middle; /* Default to middle align for admin tables */
}
.admin-table th,
.announcements-table th,
.photos-table th
{
    background-color: #f2f2f2;
    font-weight: 600; /* Bold */
    white-space: nowrap; /* Prevent header text wrapping */
    vertical-align: bottom; /* Align headers to bottom */
}
.admin-table tr:nth-child(even),
.announcements-table tr:nth-child(even),
.photos-table tr:nth-child(even)
{
    background-color: #f9f9f9;
}
.admin-table td.actions,
.announcements-table td.actions,
.photos-table td.actions
{
    white-space: nowrap; /* Prevent buttons wrapping */
    width: 1%; /* Try to keep column narrow */
    text-align: center; /* Centers the buttons horizontally */
    vertical-align: middle; /* Ensure buttons are centered */
}
.admin-table td.actions form,
.announcements-table td.actions form,
.photos-table td.actions form
{
    display: inline-block;
    margin: 0 2px;
}
.admin-table td.actions .action-button,
.announcements-table td.actions .action-button,
.photos-table td.actions .action-button
{
    padding: 4px 8px;
    font-size: 0.85em;
}

/* Specific Cell Styles */
.announcements-table td.content-cell {
    max-width: 300px; /* Limit max width */
    min-width: 150px; /* Ensure minimum width */
    word-wrap: break-word; /* Allow long content to wrap */
    vertical-align: top; /* Align content to top for announcements */
}
/* Cell Styles for Photo Management Table */
.photos-table td.title-cell, .photos-table td.category-cell {
    white-space: normal; /* Allow wrapping */
    min-width: 120px;
}

/* --- Photo Management Table Specific Styles --- */
.status-filters { margin-bottom: 20px; }
.status-filters a {
    display: inline-block;
    padding: 8px 15px;
    margin: 0 5px 5px 0; /* Added bottom margin for wrapping */
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9em; /* Slightly smaller */
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.status-filters a.active, .status-filters a:hover {
    background-color: #3498db;
    color: white;
    border-color: #3498db;
    font-weight: bold;
}
.photos-table img.thumbnail {
    max-width: 80px;
    max-height: 60px;
    height: auto;
    border-radius: 3px;
    vertical-align: middle;
    border: 1px solid #eee; /* Add slight border */
}
.no-photos-admin { /* Different from gallery .no-photos */
    text-align: center;
    padding: 20px;
    color: #777;
    font-style: italic;
}


/* ============================================================ */
/* --- FOOTER --- */
/* ============================================================ */
footer { text-align: center; margin-top: auto; /* Push footer down */ padding: 25px 15px; background-color: #e9ecef; color: #6c757d; font-size: 0.9em; border-top: 1px solid #dee2e6; }

/* ============================================================ */
/* --- RESPONSIVE ADJUSTMENTS (Media Queries) --- */
/* ============================================================ */

/* Medium screens (Tablets, smaller laptops) - 768px and up */
@media (min-width: 768px) {
    html { font-size: 17px; }
    main, .admin-container { padding: 30px; } /* Standard padding */
    .forum-container, .contact-page-wrapper { padding: 30px; } /* Wider page padding */

    /* Desktop Navbar Styles */
    .navbar ul { display: flex; flex-direction: row; position: static; width: auto; background-color: transparent; border-top: none; padding: 0; z-index: auto; box-shadow: none; }
    .navbar li { width: auto; margin-left: 10px; border-bottom: none; }
    .navbar li:first-child { margin-left: 0; }
    .navbar li a { padding: 8px 15px; font-size: 1em; }
    .navbar li a:hover, .navbar li a:focus { background-color: transparent; color: #bdc3c7; text-decoration: underline; }
    .navbar li a.active { /* Keep mobile active style for desktop too, just remove background */
        background-color: transparent !important;
        font-weight: bold;
        color: #fff; /* Active color on desktop */
        text-decoration: underline; /* Indicate active with underline */
    }
    .menu-toggle { display: none; }

    /* Other Desktop Layouts */
    .welcome-login-container { flex-direction: row; gap: 35px; }
    .form-group button { width: auto; min-width: 120px; padding: 10px 25px; }
    .add-contact-btn { width: auto; }
    .contact-actions a, .contact-actions button { font-size: 0.95em; padding: 5px 10px; }

    /* --- Contact Card Desktop Grid (Ensure 3 columns) --- */
    .contact-card-container {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    /* Calendar Desktop Display */
    .calendar-grid-desktop { display: table; }
    .calendar-list-mobile { display: none; }
    .calendar-grid-desktop td { height: 120px; }
    .events-list { max-height: 85px; }

    /* Admin table desktop adjustments */
    .admin-table td, .announcements-table td, .photos-table td { font-size: 1em; } /* Reset font size for readability */
    .admin-table td.actions, .announcements-table td.actions, .photos-table td.actions { text-align: right; } /* Right-align actions on desktop */

    /* Photo Gallery Desktop */
    .gallery-category-covers { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
    .category-cover-item img { height: 200px; }
    .category-photos-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
    .photo-item img { height: 200px; }

    /* Photo Detail Side-by-Side Layout */
    .photo-container {
        display: flex;
        gap: 25px; /* Space between image and details */
        align-items: flex-start; /* Align tops */
    }
    .photo-image-area {
        flex: 0 1 50%; /* Adjust % as needed */
        margin-bottom: 0; /* Remove mobile margin */
    }
    .photo-details-area {
        flex: 1 1 50%; /* Adjust % as needed */
    }
    .photo-details-area .photo-details h2,
    .photo-details-area .photo-meta {
        text-align: left; /* Align text left in details column */
    }
    .photo-meta span {
        margin-left: 0; /* Adjust spacing if needed */
        margin-right: 15px;
    }
}

/* Large screens (Desktops) - 992px and up */
@media (min-width: 992px) {
    main, .admin-container { padding: 40px 50px; }
    .forum-container, .contact-page-wrapper { padding: 40px 50px; }
    .welcome-login-container { gap: 45px; }
    .navbar li { margin-left: 18px; }
    .navbar .navbar-brand { font-size: 1.5em; }

    /* --- Contact Card Grid (Explicitly 3 columns) --- */
    .contact-card-container {
        grid-template-columns: repeat(3, 1fr); /* Force 3 columns */
    }

    .calendar-grid-desktop td { height: 140px; }
    .events-list { max-height: 105px; }

    /* Admin container max-width (adjust if needed) */
    .admin-container { max-width: 1100px; }

    /* Photo Gallery Desktop */
    .gallery-category-covers { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 25px; }
    .category-cover-item img { height: 220px; }
    .category-photos-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 25px; }
    .photo-item img { height: 220px; }

    /* Refine Photo Detail Layout for Larger Screens */
    .photo-container {
        gap: 35px; /* Increase gap */
    }
    .photo-image-area {
        flex-basis: 55%; /* Give image slightly more space */
    }
    .photo-details-area {
        flex-basis: 45%;
    }
}

/* Mobile specific overrides (max-width 767px) */
@media (max-width: 767px) {
    main, .forum-container, .contact-page-wrapper, .admin-container { padding: 15px; } /* Consistent mobile padding */

    .navbar li a.active { background-color: #4a6886; } /* Keep background for mobile active */
    .nav-reminder { font-size: 0.8em; margin-right: 5px; }

    .contact-card-container { grid-template-columns: 1fr; gap: 15px; }
    .contact-card { padding: 12px; }
    .contact-summary h3 { font-size: 1.1em; }
    .contact-details { font-size: 0.9em; }
    .contact-actions a, .contact-actions button { padding: 4px 8px; font-size: 0.9em; margin-bottom: 3px; }

    .add-contact-btn { width: 100%; text-align: center; }
    .form-container { padding: 20px 15px; }
    .form-container h1, .form-container h2 { font-size: 1.5em; }

    .calendar-grid-desktop { display: none; }
    .calendar-list-mobile { display: block; }
    .mobile-event-item { white-space: normal; }
    .modal-content { width: 90%; padding: 20px; }
    .modal-header h3 { font-size: 1.3em; }

    /* Forum Comment Mobile */
    .comment-form .form-group-inline { flex-direction: column; align-items: stretch; }
    .comment-form button[type="submit"] { width: 100%; margin-top: 10px; margin-left: 0; }
    .comment-header { font-size: 0.9em; }
    .comment-timestamp { margin-left: 0; width: 100%; text-align: left; font-size: 0.8em; margin-top: 5px;}
    .profile-pic-placeholder { width: 35px; height: 35px; }
    .comment-container { padding: 10px; }
    .comment-container .comment-container { margin-left: 15px !important; }

    /* Announcement mobile */
    .announcement h3 { font-size: 1.25em; }
    .announcement-meta { font-size: 0.85em; }

    /* Photo Gallery Mobile */
    .gallery-category-covers { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; }
    .category-cover-item img { height: 140px; /* Adjust cover height for mobile */ }
    .category-photos-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .photo-item img { height: 130px; }
    .photo-info { padding: 8px; }
    .photo-title { font-size: 0.95em; }
    .photo-uploader { font-size: 0.8em; }
    .no-photos { padding: 20px; }

    /* Photo Detail Mobile */
    .photo-container {
        display: block; /* Override flex */
        padding: 15px;
    }
    .photo-image-area {
         margin-bottom: 25px; /* Ensure bottom margin exists */
    }
    .photo-details h2 {
         font-size: 1.5em;
         text-align: left; /* Align title left on mobile */
    }
    .photo-meta {
        font-size: 0.85em;
        text-align: left;
    }
    .photo-meta span {
        display: block; /* Stack meta items on mobile */
        margin: 5px 0;
    }
    .photo-description { padding: 10px; }
    .photo-description strong { font-size: 1em; }

    /* Admin Table Mobile */
    .admin-section h2 { font-size: 1.4em; }
    /* Force table to scroll horizontally on small screens if needed */
    .admin-table-wrapper, /* Add a wrapper div around tables in HTML if needed */
    .admin-section /* Or apply directly to section if only tables are inside */
    {
         overflow-x: auto; /* Add horizontal scroll */
         -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
    table.admin-table, table.announcements-table, table.photos-table {
        width: max-content; /* Allow table to grow beyond screen width */
        min-width: 600px; /* Example minimum width - may need adjustment */
    }
    .admin-table th, .admin-table td,
    .announcements-table th, .announcements-table td,
    .photos-table th, .photos-table td
    {
        padding: 8px 10px; /* Adjust padding */
        font-size: 0.9em;
        white-space: nowrap; /* Prevent wrapping inside cells */
    }
    /* Allow specific cells to wrap if needed */
    .admin-table td.wrap,
    .announcements-table td.content-cell,
    .photos-table td.title-cell, /* Add class="title-cell" to title td in HTML */
    .photos-table td.category-cell /* Add class="category-cell" to category td in HTML */
    {
        white-space: normal;
        min-width: 120px; /* Ensure minimum width for wrapped cells */
    }
    .action-button { padding: 4px 7px; font-size: 0.85em; margin: 1px; }
    .status-filters a { padding: 6px 10px; font-size: 0.85em; }
}