:root {

    --primary: #155eef;
    --primary-dark: #0d47b5;

    --background: #f4f6f8;
    --surface: #ffffff;

    --border: #d9dee7;

    --text: #172033;
    --muted: #667085;

    --success: #087443;
    --success-bg: #e8f7ef;

    --danger: #b42318;
    --danger-bg: #fef3f2;

    --radius: 12px;

    --shadow:
        0 2px 8px rgba(16, 24, 40, 0.06);
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background: var(--background);

    color: var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    line-height: 1.5;
}


.container {

    width: min(
        1200px,
        calc(100% - 32px)
    );

    margin: 0 auto;
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.site-header {

    background:
        linear-gradient(
            135deg,
            #0f3c81,
            #155eef
        );

    color: white;

    padding: 42px 0;
}


.site-header h1 {

    margin: 0 0 8px;

    font-size:
        clamp(1.8rem, 4vw, 2.6rem);

}


.site-header p {

    margin: 0;

    opacity: 0.9;

}


/*
|--------------------------------------------------------------------------
| Search
|--------------------------------------------------------------------------
*/

.search-panel {

    margin-top: 28px;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    padding: clamp(20px, 4vw, 34px);
}


.form-section {

    padding-bottom: 28px;

    margin-bottom: 28px;

    border-bottom:
        1px solid var(--border);
}


.form-section:last-of-type {

    border-bottom: 0;

    margin-bottom: 0;

}


.form-section h2 {

    margin:
        0 0 18px;

    font-size: 1.15rem;

}


label {

    display: block;

    margin-bottom: 7px;

    font-weight: 600;

    font-size: 0.95rem;
}


input,
select {

    width: 100%;

    min-height: 46px;

    padding:
        10px 13px;

    border:
        1px solid #cbd2dc;

    border-radius: 8px;

    background: white;

    color: var(--text);

    font:
        inherit;

}


input:focus,
select:focus {

    outline: none;

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(21, 94, 239, 0.12);
}


.field-help {

    margin:
        7px 0 0;

    color: var(--muted);

    font-size: 0.85rem;
}


/*
|--------------------------------------------------------------------------
| Presets
|--------------------------------------------------------------------------
*/

.preset-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 18px;
}


.preset-button {

    border:
        1px solid #b8c7e6;

    background:
        #f5f8ff;

    color:
        #16459a;

    padding:
        9px 13px;

    border-radius:
        999px;

    cursor: pointer;

    font-weight: 600;
}


.preset-button:hover {

    background:
        #e8efff;

}


/*
|--------------------------------------------------------------------------
| States
|--------------------------------------------------------------------------
*/

.state-grid {

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 10px;
}


.checkbox-card {

    display: flex;

    align-items: center;

    gap: 9px;

    margin: 0;

    padding: 13px;

    border:
        1px solid var(--border);

    border-radius: 8px;

    cursor: pointer;

    font-weight: 600;
}


.checkbox-card:hover {

    border-color:
        var(--primary);

}


.checkbox-card input {

    width: auto;

    min-height: auto;

    margin: 0;

}


/*
|--------------------------------------------------------------------------
| Dates
|--------------------------------------------------------------------------
*/

.date-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 16px;
}


/*
|--------------------------------------------------------------------------
| Advanced
|--------------------------------------------------------------------------
*/

details summary {

    cursor: pointer;

    font-weight: 700;

    padding: 4px 0;

}


.advanced-fields {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 18px;

    margin-top: 22px;

}


/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

.form-actions {

    display: flex;

    gap: 12px;

    align-items: center;
}


.search-button,
.clear-button {

    min-height: 48px;

    padding:
        11px 22px;

    border-radius: 8px;

    cursor: pointer;

    font:
        inherit;

    font-weight: 700;

}


.search-button {

    background:
        var(--primary);

    color: white;

    border:
        1px solid var(--primary);

}


.search-button:hover {

    background:
        var(--primary-dark);

}


.search-button:disabled {

    opacity: 0.65;

    cursor:
        wait;

}


.clear-button {

    background: white;

    color: var(--text);

    border:
        1px solid var(--border);

}


/*
|--------------------------------------------------------------------------
| Results
|--------------------------------------------------------------------------
*/

.results-section {

    margin:
        32px 0 60px;
}


.results-header {

    display: flex;

    justify-content:
        space-between;

    align-items: flex-end;

    margin-bottom: 18px;
}


.results-header h2 {

    margin: 0;

}


.results-header p {

    margin:
        4px 0 0;

    color: var(--muted);
}


/*
|--------------------------------------------------------------------------
| Result cards
|--------------------------------------------------------------------------
*/

.results-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}


.opportunity-card {

    background: white;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

    padding: 22px;

    display: flex;

    flex-direction: column;

    min-width: 0;
}


.card-top {

    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap: 12px;

    margin-bottom: 13px;
}


.state-badge {

    display: inline-flex;

    padding:
        5px 9px;

    border-radius:
        999px;

    background:
        #edf4ff;

    color:
        #174ea6;

    font-size:
        0.78rem;

    font-weight:
        700;
}


.active-badge {

    display: inline-flex;

    padding:
        5px 9px;

    border-radius:
        999px;

    background:
        var(--success-bg);

    color:
        var(--success);

    font-size:
        0.78rem;

    font-weight:
        700;
}


.opportunity-card h3 {

    margin:
        0 0 14px;

    font-size:
        1.18rem;

    line-height:
        1.35;
}


.agency {

    color:
        var(--muted);

    font-weight:
        600;

    margin-bottom:
        16px;
}


.card-details {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        13px;

    margin-bottom:
        18px;
}


.detail-label {

    display: block;

    color:
        var(--muted);

    font-size:
        0.78rem;

    margin-bottom:
        2px;
}


.detail-value {

    font-weight:
        600;

    overflow-wrap:
        anywhere;
}


.card-footer {

    margin-top:
        auto;

    padding-top:
        17px;

    border-top:
        1px solid var(--border);

    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        12px;
}


.notice-id {

    color:
        var(--muted);

    font-size:
        0.78rem;

    overflow-wrap:
        anywhere;
}


.view-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        9px 13px;

    border-radius:
        7px;

    background:
        var(--primary);

    color:
        white;

    text-decoration:
        none;

    font-weight:
        700;

    white-space:
        nowrap;
}


.view-button:hover {

    background:
        var(--primary-dark);

}


/*
|--------------------------------------------------------------------------
| Status
|--------------------------------------------------------------------------
*/

.status-message {

    padding:
        14px 16px;

    border-radius:
        9px;

    margin-bottom:
        18px;

    background:
        #eef4ff;

    color:
        #174ea6;
}


.status-message.error {

    background:
        var(--danger-bg);

    color:
        var(--danger);
}


/*
|--------------------------------------------------------------------------
| Empty
|--------------------------------------------------------------------------
*/

.empty-state {

    grid-column:
        1 / -1;

    text-align:
        center;

    background:
        white;

    border:
        1px dashed var(--border);

    border-radius:
        var(--radius);

    padding:
        45px 20px;

    color:
        var(--muted);
}


/*
|--------------------------------------------------------------------------
| Pagination
|--------------------------------------------------------------------------
*/

.pagination {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        25px;

    flex-wrap:
        wrap;
}


.pagination button {

    min-width:
        40px;

    min-height:
        40px;

    border:
        1px solid var(--border);

    background:
        white;

    border-radius:
        7px;

    cursor:
        pointer;

    font:
        inherit;
}


.pagination button.active {

    background:
        var(--primary);

    color:
        white;

    border-color:
        var(--primary);
}


/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.site-footer {

    padding:
        25px 0;

    background:
        #172033;

    color:
        #cbd5e1;

    font-size:
        0.85rem;
}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .state-grid {

        grid-template-columns:
            repeat(3, 1fr);

    }


    .results-grid {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 650px) {

    .container {

        width:
            min(
                100% - 20px,
                1200px
            );

    }


    .site-header {

        padding:
            30px 0;

    }


    .state-grid,
    .date-grid,
    .advanced-fields {

        grid-template-columns:
            1fr;

    }


    .form-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .search-button,
    .clear-button {

        width:
            100%;

    }


    .card-details {

        grid-template-columns:
            1fr;

    }


    .card-footer {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .view-button {

        width:
            100%;

    }

}