#jobs-section {
    display: none;
    background: #f9f9f9;
    border-radius: 12px;
  }

.job-viewer-container { 
    max-width: 100%;
    margin-top: 10px auto;
    padding: 1em;
}
.job-viewer-container .filters {
    display: flex;
        gap: 1em;
        padding: 10px;
        /* margin-bottom: 1.5em; */
        /* background-color: #fbf1e6; */
    }
.job-viewer-container .filters select, 
.job-viewer-container .filters input {
    width: 50%;
    max-width: 200px;
    padding: 12px;
    font-size: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #025bb5;
    color: white;
}
.job-viewer-container #jobList {
    height: 360px;
    overflow-y: auto;
    border: 5px solid #eeeeee;
    border-radius: 8px;
    background-color: #ededed;
    font-size: 12px;
}
.job-viewer-container .job-item {
    display: grid;
    /* Defines 4 columns: Company, Title, Location, Source */
    grid-template-columns: 140px 3fr 1fr 3fr;
    padding: 12px 12px;
    background-color: #fff;
    border-bottom: 1px solid #f0f2f5;
    gap: 1em 1.5em;
    margin-bottom: 4px;
}
.job-viewer-container .job-item:last-child {
    border-bottom: none;
}

.job-title, .job-location {
    word-break: break-word; /* Allows text to wrap */
}

.job-viewer-container .job-company {
  font-weight: 600;
  font-size: 14px;
  flex-basis: 150px;
  border: 10px;
  padding: 0px;
  border-radius: 5px;
  display: flex;
  color: #0056b3;
  font-weight: 600;
  gap: 8px; /* Space between logo and name */
  flex-basis: 200px; /* Give it more space */

}
.job-viewer-container .job-title {
    flex-grow: 1;
    flex-basis: 300px;
    font-weight: 600;
    text-decoration: underline;
    color: #2272f0;
    }
.job-viewer-container .job-title:hover {
    text-decoration: underline;
}
.job-viewer-container .job-location, 
.job-viewer-container .job-source {
    color: #555;
    flex-shrink: 0;
}

.job-location, .job-category {
        color: #555;
    }

.job-categories-container {
    text-decoration: underline;
}


    /* ✅ NEW: Style for the company logo */
.company-logo {
        width: 20px;
        height: 20px;
        object-fit: contain;
        border-radius: 4px;
    }

/* ✅ CSS CHANGES FOR MOBILE LAYOUT */
@media (max-width: 768px) {
  .job-viewer-container .job-item {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto;
            grid-template-areas:
                "company title"
                "location category";
            align-items: start;
            gap: 0.5em 1em;
        }

        /* Assign each element to its named area */
        .job-viewer-container .job-company { grid-area: company; }
        .job-viewer-container .job-title { grid-area: title; }
        .job-viewer-container .job-location { grid-area: location; }
        .job-viewer-container .job-categories-container { grid-area: category; }
    }