/* Custom styles for Neighborhood Watch Section */

/* Style for the 'Watch' navigation link */
.navbar-nav .nav-item .nav-watch-link {
    border: 1px solid #fed136;
    /* Use theme's primary color for border */
    border-radius: 4px;
    margin-left: 10px;
    /* Add some space from other links */
    padding-left: 12px !important;
    /* Ensure padding is consistent */
    padding-right: 12px !important;
    background-color: rgba(254, 209, 54, 0.1);
    /* Optional: slight background tint */
    transition: background-color 0.3s ease;
}

.navbar-nav .nav-item .nav-watch-link:hover {
    background-color: rgba(254, 209, 54, 0.3);
    /* Darker tint on hover */
    color: #fff;
    /* Match hover color of other links */
}

/* Styles for the right sidebar navigation */
.watch-sidebar {
    padding: 20px;
    background-color: #f8f9fa;
    /* Light background */
    border-radius: 5px;
    margin-top: 30px;
    /* Space from content above */
}

.watch-sidebar h4 {
    margin-bottom: 15px;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.watch-sidebar .nav-pills .nav-link {
    color: #212529;
    /* Default Bootstrap link color */
    border-radius: 0;
    /* Square edges */
    padding: 10px 15px;
    margin-bottom: 5px;
    /* Space between links */
    border-left: 3px solid transparent;
    /* Space for active indicator */
}

.watch-sidebar .nav-pills .nav-link:hover {
    background-color: #e9ecef;
    /* Light grey hover */
    border-left: 3px solid #ccc;
}

.watch-sidebar .nav-pills .nav-link.active {
    background-color: #fed136;
    /* Theme primary color for active link */
    color: #fff;
    border-left: 3px solid #bd9a2a;
    /* Darker shade for active indicator */
}

/* Ensure main content area has padding */
.watch-content {
    padding-top: 30px;
    /* Add space below header */
    padding-bottom: 50px;
    /* Add space above footer */
}