/* --- Base & Global Styles --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.7;
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
    color: #3d4852;
    background-color: #f4f7f6;
}

a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}
a:hover { color: #0056b3; }

.header {
    color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.header h1 {
    color: white;
    margin: 0;
}

/* --- Page-Specific Header Colors --- */
.header.default-header { background-image: linear-gradient(to top, #28a745, #2ebf4f); }
.header.admin-header { background-image: linear-gradient(to top, #0056b3, #007bff); }
.header.warning-header { background-image: linear-gradient(to top, #ffc107, #ffd043); }
.header.warning-header h1 { color: #333; }

/* --- Homepage Styles --- */
.user-nav { text-align: right; padding-bottom: 10px; font-size: 0.9em; }
.user-nav a { color: white; text-decoration: none; margin-left: 15px; }
h2 { color: #218838; border-bottom: 2px solid #e0e6ed; padding-bottom: 10px; margin-top: 40px; }
.header-subtitle { margin: 8px 0 0; opacity: 0.9; font-weight: 300; } /* For the small text under main headers */
.intro-box { text-align: center; padding: 0 10px; margin-bottom: 40px; }
.intro-box h2 { border-bottom: none; margin-top: 0; color: #333; }
.search-box, .browse-box { background: #ffffff; padding: 25px; border: 1px solid #e0e6ed; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.search-box form { display: flex; }
.search-box input[type="text"] { flex-grow: 1; padding: 12px; border: 1px solid #ced4da; border-radius: 6px 0 0 6px; font-size: 1em; }
.search-box input[type="text"]:focus { outline: none; border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); }
.search-box button { padding: 12px 20px; border: none; background-color: #007bff; color: white; border-radius: 0 6px 6px 0; cursor: pointer; font-size: 1em; transition: background-color 0.2s; }
.search-box button:hover { background-color: #0056b3; }
.location-button { display: block; width: 100%; padding: 14px; background-color: #28a745; color: white; border: none; border-radius: 6px; font-size: 1.1em; cursor: pointer; margin-bottom: 20px; transition: all 0.2s ease-in-out; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.location-button:hover { background-color: #218838; box-shadow: 0 4px 8px rgba(0,0,0,0.15); transform: translateY(-2px); }
.state-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; list-style-type: none; padding: 0; }
.state-list a { display: block; padding: 12px; background: #f8f9fa; text-decoration: none; color: #007bff; border-radius: 6px; text-align: center; border: 1px solid #e0e6ed; transition: all 0.2s ease-in-out; }
.state-list a:hover { background-color: #e9ecef; border-color: #ced4da; transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

/* --- Venue & Location List Styles --- */
.venue-list { list-style-type: none; padding: 0; }
.venue-list li { background: #ffffff; margin-bottom: 15px; padding: 20px; border: 1px solid #e0e6ed; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.venue-list .name { font-weight: bold; font-size: 1.1em; }
.venue-list .distance { float: right; color: #6c757d; font-weight: bold; }
.venue-list .address { color: #555; font-size: 0.9em; }
.venue-list .details { margin-top: 5px; }
.venue-list .details a { text-decoration: none; color: #007bff; }
.venue-list .admin-actions { margin-top: 10px; font-size: 0.9em; }
.venue-list .admin-actions a { color: #dc3545; }
.no-venues, .no-submissions, .no-messages { text-align: center; color: #6c757d; padding: 30px; background: #fff; border: 1px solid #e0e6ed; border-radius: 12px; }

.location-list { list-style-type: none; padding: 0; }
.location-list a { display: block; padding: 15px; background: #fff; text-decoration: none; color: #007bff; border-radius: 6px; text-align: center; border: 1px solid #e0e6ed; margin-bottom: 10px; font-size: 1.1em; transition: all 0.2s ease-in-out; }
.location-list a:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

/* --- Admin & Inbox Styles --- */
.admin-body { max-width: 900px; }
.admin-header h1 { margin-bottom: 10px; }
.admin-header .user-nav { text-align: right; padding-bottom: 10px; font-size: 0.9em; }
.admin-header .user-nav a { color: white; text-decoration: none; margin-left: 15px; }
.admin-body h2 { color: #333; }

.form-container { background: #ffffff; padding: 30px; border: 1px solid #e0e6ed; border-radius: 12px; margin-top: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px; border: 1px solid #ced4da; border-radius: 6px; box-sizing: border-box; font-size: 1em; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); }
.submit-button { display: block; width: 100%; padding: 14px; background-color: #007bff; color: white; border: none; border-radius: 6px; font-size: 1.1em; cursor: pointer; transition: background-color 0.2s; }
.submit-button:hover { background-color: #0056b3; }

.submission-list { list-style-type: none; padding: 0; }
.submission-item { background: #ffffff; margin-bottom: 15px; padding: 20px; border: 1px solid #e0e6ed; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.submission-item .name { font-weight: bold; font-size: 1.2em; }
.submission-item .details { color: #555; margin: 10px 0; }
.actions { margin-top: 15px; display: flex; gap: 10px; }
.actions button { padding: 8px 15px; border: none; border-radius: 6px; cursor: pointer; color: white; font-weight: bold; transition: opacity 0.2s; }
.actions button:hover { opacity: 0.85; }
.approve-btn { background-color: #28a745; }
.reject-btn { background-color: #dc3545; }

.user-item .details { font-size: 0.9em; }
.user-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.user-table th, .user-table td { border: 1px solid #e0e6ed; padding: 12px; text-align: left; }
.user-table th { background-color: #f2f2f2; }
.online-status { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.online { background-color: #28a745; }
.offline { background-color: #ccc; }

.message-table { width: 100%; border-collapse: collapse; margin-top: 20px; background: #fff; }
.message-table th, .message-table td { border: 1px solid #ddd; padding: 12px; text-align: left; }
.message-table th { background-color: #f8f9fa; }
.message-table tr.unread { font-weight: bold; }
.message-table .actions { display: flex; gap: 10px; }
.message-table button { padding: 5px 10px; border: none; border-radius: 6px; cursor: pointer; color: white; transition: opacity 0.2s; }
.message-table button:hover { opacity: 0.85; }
.read-btn { background-color: #28a745; }
.delete-btn { background-color: #dc3545; }

/* --- Flash Messages --- */
.flash-message { padding: 15px; margin-bottom: 20px; border-radius: 8px; }
.flash-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.flash-error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* --- Special Pages --- */
.contact-overloaded-body { text-align: center; }
.special-message { text-align: center; color: #333; padding: 30px; background: #fff; border: 1px solid #e0e6ed; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.special-message h2 { color: #218838; margin-top: 0; }

/* --- Footer Styles --- */
.main-footer {
    text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee;
}
.footer-contact-info {
    margin-top: 20px; font-size: 0.9em; color: #666;
}

/* --- Responsive Design --- */
@media (max-width: 600px) {
    body { margin-top: 20px; }
    .search-box form { flex-direction: column; }
    .search-box input[type="text"] { border-radius: 6px; margin-bottom: 10px; }
    .search-box button { border-radius: 6px; width: 100%; }
}