// ========== NOTIFICATION FUNCTIONS ==========
function toggleNotifications() {
    var panel = document.getElementById('notificationPanel');
    if (panel) {
        panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
    }
}

function markAllRead() {
    fetch('api/mark_notifications_read.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Reload the page to update notification count
            location.reload();
        } else {
            console.error('Failed to mark notifications as read');
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

// Close notification panel when clicking outside
document.addEventListener('click', function(event) {
    var panel = document.getElementById('notificationPanel');
    var bell = document.querySelector('.notification-bell');
    if (panel && bell && !panel.contains(event.target) && !bell.contains(event.target)) {
        panel.style.display = 'none';
    }
});* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; background: #f0f2f5; padding: 20px; }
.container { max-width: 1400px; margin: 0 auto; }
.header { background: #1e3c72; color: white; padding: 15px 20px; border-radius: 10px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 15px; margin-bottom: 20px; }
.stat-card { background: white; padding: 15px; border-radius: 10px; text-align: center; }
.stat-card h3 { color: #666; font-size: 12px; margin-bottom: 5px; }
.stat-card .value { font-size: 20px; font-weight: bold; }
.tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.tab-btn { padding: 10px 20px; background: white; border: none; cursor: pointer; border-radius: 5px; font-size: 14px; }
.tab-btn.active { background: #1e3c72; color: white; }
.tab-content { display: none; background: white; padding: 20px; border-radius: 10px; }
.tab-content.active { display: block; }
.table-wrapper { overflow-x: auto; margin-top: 15px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; }
th { background: #f8f9fa; }
.btn { padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; margin: 2px; }
.btn-primary { background: #1e3c72; color: white; }
.btn-success { background: #28a745; color: white; }
.btn-danger { background: #dc3545; color: white; }
.btn-warning { background: #ffc107; color: #333; }
.btn-info { background: #17a2b8; color: white; }
.phone-badge { display: inline-flex; align-items: center; background: #e9ecef; padding: 2px 8px; border-radius: 12px; font-size: 11px; margin: 2px; gap: 4px; }
.delete-phone-btn { background: none; border: none; cursor: pointer; color: #dc3545; font-size: 10px; padding: 0; margin-left: 4px; }
.delete-phone-btn:hover { color: #a71d2a; }
.badge-occupied { background: #28a745; color: white; padding: 2px 8px; border-radius: 12px; font-size: 11px; display: inline-block; }
.badge-vacant { background: #dc3545; color: white; padding: 2px 8px; border-radius: 12px; font-size: 11px; display: inline-block; }
.badge-maintenance { background: #ffc107; color: #333; padding: 2px 8px; border-radius: 12px; font-size: 11px; display: inline-block; }
.plot-card { border: 1px solid #ddd; margin: 15px 0; border-radius: 10px; overflow: hidden; }
.plot-header { background: #1e3c72; color: white; padding: 10px 15px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center; }
.modal-content { background: white; padding: 20px; width: 90%; max-width: 450px; border-radius: 10px; max-height: 90vh; overflow-y: auto; }
.modal-content h2 { margin-bottom: 15px; font-size: 20px; }
.form-group { margin-bottom: 12px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
.logout-btn { background: rgba(255,255,255,0.2); padding: 6px 12px; border-radius: 5px; text-decoration: none; color: white; }
.refresh-btn { background: #28a745; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; margin-left: 10px; }

@media (max-width: 768px) {
    body { padding: 10px; }
    .stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .stat-card { padding: 8px; }
    .stat-card h3 { font-size: 10px; }
    .stat-card .value { font-size: 14px; }
    .tabs { overflow-x: auto; white-space: nowrap; flex-wrap: nowrap; }
    .tab-btn { display: inline-block; white-space: nowrap; }
    th, td { padding: 5px; font-size: 10px; }
    .plot-header { flex-direction: column; align-items: flex-start; }
}
/* Force landscape overlay */
.orientation-warning {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1e3c72;
    color: white;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
    text-align: center;
    font-size: 20px;
    padding: 20px;
}
.orientation-warning .icon {
    font-size: 60px;
    margin-bottom: 20px;
}
.orientation-warning p {
    margin-bottom: 10px;
}
.orientation-warning small {
    font-size: 14px;
    opacity: 0.8;
}
/* Hide main content when in portrait mode on mobile */
body.portrait .container,
body.portrait .header,
body.portrait .stats,
body.portrait .tabs,
body.portrait .tab-content {
    display: none;
}
body.portrait .orientation-warning {
    display: flex;
}
body.landscape .orientation-warning {
    display: none;
}
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    padding: 10px;
}
.modal-content {
    background: white;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    border-radius: 10px;
    max-height: 90vh;
    overflow-y: auto;
    margin: auto;
}
@media (max-width: 600px) {
    .modal-content {
        width: 95%;
        padding: 15px;
        max-height: 85vh;
    }
}
// Ensure notification bell is clickable (fallback)
document.addEventListener('DOMContentLoaded', function() {
    var bell = document.querySelector('.notification-bell');
    if (bell) {
        // Remove any existing inline onclick to avoid double calls
        bell.removeAttribute('onclick');
        bell.addEventListener('click', function(e) {
            e.stopPropagation();
            toggleNotifications();
        });
    }
});