/*
 * Job listing page – theme override to match home page
 * Load after styles.css. Only colors, fonts, and visual styling – no layout changes.
 */

/* Home palette: navy #154360, dark navy #0d2d42, yellow #ffdb58, text #0a1f2e, muted #6b7280 */
:root {
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --primary-600: #154360;
    --primary-700: #0d2d42;
    --primary-800: #0a2435;
    --primary-soft: #e6f2f8;
    --link-600: #154360;
    --link-700: #0d2d42;
    --bg: #ffffff;
    --bg-subtle: #f9fafb;
    --card: #ffffff;
    --border: #e5e7eb;
    --border-strong: #d1d5db;
    --text: #0a1f2e;
    --text-2: #4b5563;
    --text-3: #6b7280;
    --text-disabled: #9ca3af;
    --input-gray: #9ca3af;
}

body {
    font-family: var(--font-sans);
    background-color: #ffffff;
    color: #0a1f2e;
}

/* Header – white bar, subtle border like home */
.header {
    background-color: #ffffff;
    border-bottom-color: #e5e7eb;
}

/* Text logo – same as home page */
.logo a,
.logo-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: #154360;
}

.logo-accent {
    color: #ffdb58;
    border-bottom: 3px solid #ffdb58;
}

.logo {
    color: #154360;
}

.nav-item {
    color: #4b5563;
}

.nav-item:hover {
    color: #154360;
}

.theme-toggle {
    color: #4b5563;
}

.theme-toggle:hover {
    color: #154360;
}

/* Search bar – white, same border as home; full width */
.search-section {
    background-color: #ffffff;
    border-bottom-color: #e5e7eb;
    padding-left: 16px;
    padding-right: 16px;
}

.search-container {
    max-width: none;
    padding: 0;
}

/* Main content – use full width, minimal side gutters */
.main-content {
    max-width: none;
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
}

/* Single job page (/job/123) – match search page job-details panel */
.main-content.single-page {
    padding: 1.5rem 16px;
    display: block;
}

.main-content.single-page .job-details {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background-color: var(--card);
}

.single-page-actions {
    margin-top: 1.5rem;
    text-align: center;
}

.single-page-actions .view-full-link {
    display: inline-flex;
}

/* Search button – home hero style (yellow, navy text) */
.search-btn {
    background-color: #ffdb58 !important;
    color: #154360 !important;
}

.search-btn:hover {
    background-color: #f5d04a !important;
}

.search-btn:active {
    background-color: #ecc935 !important;
}

/* Advanced filters button – outline navy */
.advanced-filters-btn {
    border-color: #154360;
    color: #154360;
}

.advanced-filters-btn:hover {
    background-color: #e6f2f8;
}

/* Job cards – navy border on hover/selected */
.job-card:hover {
    border-color: #154360;
}

.job-card.selected {
    border-color: #154360;
}

/* Tags when selected */
.tag.selected,
.tag-with-icon.selected {
    background-color: #e6f2f8;
    box-shadow: 0 0 0 1px rgba(21, 67, 96, 0.25);
}

/* Pagination active button */
.pagination-btn.active {
    background-color: #154360;
    border-color: #154360;
}

/* Apply button (uses variable, but ensure hover) */
.apply-btn:hover {
    background-color: #0d2d42;
}

/* View full / secondary link */
.view-full-link {
    color: #154360;
    border-color: #154360;
}

.view-full-link:hover {
    background-color: #e6f2f8;
}

/* Form focus / accent */
.form-group input:focus,
.form-group textarea:focus,
.search-input-wrapper:focus-within,
.sort-select:focus {
    border-color: #154360;
}

/* Drawer & modal – subtle border match */
.drawer-header,
.drawer-footer,
.modal-header,
.modal-body {
    border-color: #e5e7eb;
}

/* Clear filters / reset link in drawer */
.reset-filters-btn {
    color: #154360;
}

.reset-filters-btn:hover {
    color: #0d2d42;
}

.apply-filters-btn {
    background-color: #154360;
}

.apply-filters-btn:hover {
    background-color: #0d2d42;
}

/* Radio/checkbox accent */
.radio-label input[type="radio"],
.checkbox-label input[type="checkbox"] {
    accent-color: #154360;
}

.radius-select:focus,
.city-search-input:focus {
    border-color: #154360;
}

/* Loading spinner – navy instead of purple/orange */
.spinner {
    border-top-color: #154360;
}

/* Dark mode – keep functional but tint toward navy if desired */
body.dark-mode {
    --primary-600: #3b82c4;
    --primary-700: #2563ab;
    --primary-soft: rgba(21, 67, 96, 0.2);
}

body.dark-mode .search-btn {
    background-color: #ffdb58 !important;
    color: #154360 !important;
}

/* Logo in dark mode – keep readable */
body.dark-mode .logo-text {
    color: #e5e7eb;
}

body.dark-mode .logo-accent {
    color: #ffdb58;
    border-bottom-color: #ffdb58;
}

/* Single job page – dark mode */
body.dark-mode .main-content.single-page .job-details {
    background-color: #2a2a2a;
    border-color: #3a3a3a;
}