/* tenders.css */
:root {
    --bs-primary: #00853E; /* Dominant green */
    --bs-secondary: #FFD700; /* Gold for highlights */
    --bs-white: #FFFFFF; /* White for backgrounds/text */
    --bs-light: #F5F5F5; /* Light gray for subtle backgrounds */
    --bs-dark: #333333; /* Dark for contrast where needed */
}

body {
    background-color: var(--bs-light);
    color: var(--bs-dark);
    font-family: 'Poppins', sans-serif;
}

.bg-green {
    background-color: var(--bs-primary); /* Green for topbar */
}

.topbar-text {
    color: var(--bs-white) !important;
}

.topbar-text:hover {
    color: var(--bs-secondary) !important;
    transition: color 0.3s ease;
}

.social-btn {
    background-color: var(--bs-white) !important;
}

.fa-twitter { color: #1DA1F2 !important; }
.fa-facebook-f { color: #1877F2 !important; }
.fa-linkedin-in { color: #0077B5 !important; }
.fa-instagram { color: #E4405F !important; }
.fa-youtube { color: #FF0000 !important; }

.social-btn:hover {
    background-color: var(--bs-secondary) !important;
    transition: background-color 0.3s ease;
}

.social-btn:hover i {
    color: var(--bs-dark) !important;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--bs-dark);
}

.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link:hover {
    color: var(--bs-primary); /* Green for active/hover nav links */
}

.nav-tabs .nav-link {
    color: var(--bs-dark);
    border-radius: 0; /* Remove border-radius for rectangular tabs */
}

.nav-tabs .nav-link.active {
    background-color: var(--bs-primary); /* Green for active tabs */
    color: var(--bs-white);
    border-color: var(--bs-primary); /* Green for active tab border */
    border-radius: 0; /* Ensure rectangular shape */
}

.nav-tabs {
    border-radius: 0; /* Ensure tabs container is rectangular */
}

.table thead th {
    background-color: #FFD700; /* Yellow for table heading background */
    color: #00853E; /* Green for table heading text */
}

.btn-custom {
    background-color: var(--bs-primary); /* Green for buttons */
    color: var(--bs-white);
    border: none;
}

.btn-custom:hover {
    background-color: #006A32; /* Darker green for hover */
}

.archived-link {
    color: var(--bs-primary); /* Green for 'click here' link */
    text-decoration: underline;
}

.btn-secondary {
    background-color: var(--bs-light);
    color: var(--bs-dark);
    border: 1px solid var(--bs-dark);
    border-radius: 0; /* Square shape for year buttons */
}

.btn-secondary:hover {
    background-color: var(--bs-primary); /* Green for year button hover */
    color: var(--bs-white);
}

.btn-secondary.active {
    background-color: var(--bs-primary); /* Green for active year button */
    color: var(--bs-white);
}

.input-group {
    max-width: 450px; /* Increased width for larger search container */
    margin-bottom: 1rem;
    border-radius: 0; /* Remove border-radius for rectangular shape */
    background-color: var(--bs-primary); /* Green background for search container */
}

.input-group .form-control {
    border-color: var(--bs-primary); /* Green for input border */
    padding: 0.25rem 0.5rem; /* Reduced padding */
    font-size: 0.9rem; /* Slightly smaller text */
    border-radius: 0; /* Ensure rectangular input */
    background-color: var(--bs-primary); /* Green background */
    color: var(--bs-white); /* White text */
}

.input-group .form-control::placeholder {
    color: var(--bs-white); /* White placeholder text */
    opacity: 0.7;
}

.input-group .btn-outline-secondary {
    color: var(--bs-white); /* White for search button text */
    border-color: var(--bs-white); /* White for search button border */
    padding: 0.25rem 0.5rem; /* Reduced padding */
    font-size: 0.9rem; /* Slightly smaller text */
    border-radius: 0; /* Ensure rectangular button */
    background-color: var(--bs-primary); /* Green background */
}

.btn-primary {
    background-color: var(--bs-primary); /* Green for primary buttons */
    border-color: var(--bs-primary); /* Green for primary button border */
}

.btn-primary:hover {
    background-color: #006A32; /* Darker green */
    border-color: #006A32; /* Darker green */
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.centered-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.year-table {
    display: none; /* Hide all tables by default */
}

.year-table.active {
    display: table; /* Show only the active table */
}

/* Mobile compatibility */
@media (max-width: 768px) {
    /* Adjust font sizes for better readability on mobile */
    body {
        font-size: 0.85rem;
    }

    /* Make navbar links stack vertically and adjust padding */
    .navbar-nav {
        flex-direction: column;
        text-align: center;
    }

    .navbar-light .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
    }

    /* Adjust nav-tabs for smaller screens */
    .nav-tabs .nav-link {
        font-size: 0.8rem;
        padding: 0.5rem;
    }

    /* Make tables responsive */
    .table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .table thead th, .table tbody td {
        font-size: 0.8rem;
        padding: 0.5rem;
    }

    /* Adjust button sizes */
    .btn-custom, .btn-primary, .btn-secondary {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }

    /* Make input group full-width on mobile */
    .input-group {
        max-width: 100%;
        margin: 0.5rem auto;
    }

    .input-group .form-control, .input-group .btn-outline-secondary {
        font-size: 0.85rem;
        padding: 0.4rem 0.6rem;
    }

    /* Adjust social buttons for smaller screens */
    .social-btn {
        padding: 0.4rem;
        font-size: 0.8rem;
    }

    /* Ensure centered content remains readable */
    .centered-content {
        padding: 0 1rem;
    }
}

@media (max-width: 576px) {
    /* Further adjustments for very small screens */
    body {
        font-size: 0.8rem;
    }

    .nav-tabs .nav-link {
        font-size: 0.75rem;
        padding: 0.4rem;
    }

    .table thead th, .table tbody td {
        font-size: 0.75rem;
        padding: 0.4rem;
    }

    .btn-custom, .btn-primary, .btn-secondary {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }

    .input-group .form-control, .input-group .btn-outline-secondary {
        font-size: 0.8rem;
        padding: 0.3rem 0.5rem;
    }
}