/* ═══════════════════════════════════════════════════════════════════
   EA Tender Search Results v1.0.0
   Empower Africa — Filters + Date Ranges + Results + BuddyBoss App
   ═══════════════════════════════════════════════════════════════════ */


/* ─── 1. COMBINED FILTER BAR ──────────────────────────────────── */

.eatsr-filters-container { margin-bottom: 24px; }
.eatsr-mobile-toggle { display: none; }

.eatsr-combined-bar {
    display: flex; flex-direction: column; gap: 0;
    padding: 24px; background: #f8f9fb;
    border: 1px solid #e4e7ec; border-radius: 12px;
}

.eatsr-filter-label {
    display: block; font-size: 13px; font-weight: 600;
    color: #344054; margin-bottom: 6px; line-height: 1.4;
}

.eatsr-filter-select {
    width: 100%; padding: 10px 36px 10px 14px; font-size: 14px;
    color: #333; background-color: #fff;
    border: 1px solid #d0d5dd; border-radius: 8px;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23667085' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box; font-family: inherit; min-height: 44px;
}

.eatsr-filter-select:hover { border-color: #98a2b3; }
.eatsr-filter-select:focus { outline: none; border-color: #04203e; box-shadow: 0 0 0 3px rgba(4,32,62,.12); }
.eatsr-filter-select.eatsr-active { border-color: #04203e; background-color: rgba(4,32,62,.04); }


/* ─── Bar layout rows ─── */
.eatsr-bar-row { width: 100%; }

.eatsr-bar-dropdowns {
    display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;
}
.eatsr-bar-dropdowns .eatsr-bar-field { flex: 1; min-width: 160px; }

.eatsr-bar-dates {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 20px 24px; padding-top: 20px;
    border-top: 1px solid #e4e7ec; margin-top: 16px;
}

.eatsr-bar-actions {
    display: flex; gap: 10px; align-items: center;
    padding-top: 16px;
}


/* ─── Date range fields ─── */
.eatsr-date-group { min-width: 0; }
.eatsr-date-row { display: flex; align-items: flex-end; gap: 8px; }
.eatsr-date-field { flex: 1; min-width: 0; }
.eatsr-date-sub {
    display: block; font-size: 10px; font-weight: 600; color: #9aa5b4;
    text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 4px;
}
.eatsr-date-input {
    width: 100%; padding: 9px 12px; border: 1px solid #d0d5dd; border-radius: 8px;
    font-size: 13.5px; line-height: 1.5; color: #333; background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box; font-family: inherit; min-height: 44px;
}
.eatsr-date-input:hover { border-color: #98a2b3; }
.eatsr-date-input:focus { border-color: #fa3c00; box-shadow: 0 0 0 3px rgba(250,60,0,.08); outline: none; }
.eatsr-date-sep {
    font-size: 16px; font-weight: 600; color: #c8cfd8;
    padding-bottom: 10px; flex-shrink: 0; user-select: none;
}


/* ─── 2. BUTTONS ─────────────────────────────────────────────── */

.eatsr-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; padding: 10px 28px; font-size: 14px; font-weight: 600;
    border-radius: 8px; cursor: pointer; text-decoration: none;
    transition: background-color 0.2s, box-shadow 0.2s;
    line-height: 1.5; min-height: 44px; border: none; font-family: inherit;
}

.eatsr-btn-search { background-color: #fa3c00; color: #fff; }
.eatsr-btn-search:hover { background-color: #d93400; box-shadow: 0 2px 8px rgba(250,60,0,.25); color: #fff; }

.eatsr-btn-reset { background-color: transparent; color: #04203e; border: 1px solid #04203e; }
.eatsr-btn-reset:hover { background-color: rgba(4,32,62,.06); color: #04203e; }


/* ─── 3. CHIPS ───────────────────────────────────────────────── */

.eatsr-active-chips { display: none; }

.eatsr-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px; background: rgba(4,32,62,.08);
    border-radius: 20px; font-size: 13px; font-weight: 500;
    color: #04203e; text-decoration: none; white-space: nowrap;
    transition: background 0.15s;
}
.eatsr-chip:hover { background: rgba(4,32,62,.14); color: #04203e; }
.eatsr-chip-x { font-size: 16px; font-weight: 700; color: #98a2b3; line-height: 1; margin-left: 2px; }
.eatsr-chip-clear { background: transparent; color: #fa3c00; font-weight: 600; border: 1px solid #fa3c00; }
.eatsr-chip-clear:hover { background: rgba(250,60,0,.06); color: #fa3c00; }

.eatsr-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: 11px; background: #fa3c00; color: #fff;
    font-size: 12px; font-weight: 700; line-height: 1;
}


/* ═══════════════════════════════════════════════════════════════════
   4. RESULTS PAGE
   ═══════════════════════════════════════════════════════════════════ */

.eatsr-results-container { margin-bottom: 32px; }

.eatsr-results-header {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 12px; margin-bottom: 20px; padding-bottom: 16px;
    border-bottom: 1px solid #e4e7ec;
}

.eatsr-results-count { font-size: 15px; color: #475467; flex: 1; }
.eatsr-results-count strong { color: #1d2939; }
.eatsr-results-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.eatsr-results-grid { display: grid; gap: 20px; }
.eatsr-cols-2 { grid-template-columns: repeat(2, 1fr); }
.eatsr-cols-3 { grid-template-columns: repeat(3, 1fr); }
.eatsr-cols-4 { grid-template-columns: repeat(4, 1fr); }


/* ─── 5. TENDER CARD ─────────────────────────────────────────── */

.eatsr-card {
    background: #fff; border: 1px solid #e4e7ec;
    border-radius: 10px; overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex; flex-direction: column; padding: 20px;
}
.eatsr-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-2px); }

.eatsr-card-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.eatsr-card-badges { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }

.eatsr-source {
    display: inline-block; padding: 3px 10px;
    border-radius: 12px; font-size: 11px; font-weight: 600; line-height: 1.6; letter-spacing: 0.2px;
    color: var(--src-color, #666);
    background: color-mix(in srgb, var(--src-color, #666) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--src-color, #666) 20%, transparent);
}

.eatsr-status { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; line-height: 1.6; }
.eatsr-status--active  { background: #ecfdf5; color: #065f46; }
.eatsr-status--warning { background: #fffbeb; color: #92400e; }
.eatsr-status--urgent  { background: #fef2f2; color: #991b1b; }
.eatsr-status--expired { background: #f3f4f6; color: #6b7280; }
.eatsr-status--none    { background: #f9fafb; color: #9ca3af; }

.eatsr-tag { font-size: 11px; color: #667085; font-weight: 500; }
.eatsr-tag--notice { padding: 2px 8px; background: #f0f4ff; color: #3b5998; border-radius: 10px; }

.eatsr-card-title { font-size: 15px; font-weight: 700; line-height: 1.4; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.eatsr-card-title a { color: #1d2939; text-decoration: none; }
.eatsr-card-title a:hover { color: #04203e; }

.eatsr-card-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: #667085; margin-bottom: 10px; }
.eatsr-meta-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.eatsr-meta-item svg { flex-shrink: 0; stroke: #98a2b3; }
.eatsr-flag { font-size: 16px; line-height: 1; }

.eatsr-card-dates { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #667085; padding: 10px 0; border-top: 1px solid #f2f4f7; margin-top: auto; }
.eatsr-date { display: inline-flex; align-items: center; gap: 6px; }
.eatsr-date svg { flex-shrink: 0; stroke: #98a2b3; }
.eatsr-date strong { color: #1d2939; }

.eatsr-card-footer { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid #f2f4f7; margin-top: 10px; }
.eatsr-card-link { font-size: 14px; font-weight: 600; color: #fa3c00; text-decoration: none; flex: 1; }
.eatsr-card-link:hover { color: #d93400; }
.eatsr-card-ext { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #667085; text-decoration: none; padding: 4px 10px; background: #f9fafb; border: 1px solid #e4e7ec; border-radius: 6px; transition: background 0.15s; }
.eatsr-card-ext:hover { background: #f2f4f7; color: #475467; }


/* ─── 6. PAGINATION ──────────────────────────────────────────── */

.eatsr-pagination { margin-top: 28px; text-align: center; }
.eatsr-pagination ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.eatsr-pagination li { display: inline-block; }
.eatsr-pagination a, .eatsr-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid #d0d5dd; border-radius: 8px; font-size: 14px; font-weight: 500; color: #344054; text-decoration: none; background: #fff; transition: background 0.15s, border-color 0.15s; }
.eatsr-pagination a:hover { background: #f9fafb; border-color: #98a2b3; }
.eatsr-pagination .current { background: #fa3c00; color: #fff; border-color: #fa3c00; }


/* ─── 7. EMPTY STATE ─────────────────────────────────────────── */

.eatsr-empty-state { text-align: center; padding: 64px 24px; color: #667085; }
.eatsr-empty-state h3 { margin: 16px 0 8px; font-size: 18px; color: #344054; }
.eatsr-empty-state a { color: #fa3c00; }


/* ═══════════════════════════════════════════════════════════════════
   8. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .eatsr-mobile-toggle {
        display: flex; align-items: center; gap: 10px; width: 100%;
        padding: 14px 16px; background: #f8f9fb;
        border: 1px solid #e4e7ec; border-radius: 10px;
        font-size: 15px; font-weight: 600; color: #333;
        cursor: pointer; border: none; font-family: inherit;
    }
    .eatsr-mobile-toggle span:first-of-type { flex: 1; text-align: left; }
    .eatsr-chevron { transition: transform 0.25s ease; }
    .eatsr-mobile-toggle[aria-expanded="true"] .eatsr-chevron { transform: rotate(180deg); }

    .eatsr-active-chips {
        display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0;
        overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .eatsr-active-chips::-webkit-scrollbar { display: none; }

    .eatsr-combined-bar {
        overflow: hidden; max-height: 0; padding-top: 0; padding-bottom: 0;
        border-color: transparent; opacity: 0; margin-top: 8px;
        transition: max-height .3s ease, opacity .2s ease, padding .3s ease, border-color .3s ease;
    }
    .eatsr-combined-bar.eatsr-expanded {
        max-height: 1200px; padding-top: 16px; padding-bottom: 16px;
        border-color: #e4e7ec; opacity: 1;
    }

    .eatsr-bar-dropdowns { flex-direction: column; gap: 12px; }
    .eatsr-bar-dropdowns .eatsr-bar-field { flex-basis: 100%; min-width: unset; }

    .eatsr-bar-dates { grid-template-columns: 1fr; gap: 16px; }
    .eatsr-date-row { flex-wrap: wrap; }
    .eatsr-date-sep { display: none; }

    .eatsr-bar-actions { flex-direction: column; }
    .eatsr-btn { width: 100%; }

    .eatsr-cols-3, .eatsr-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .eatsr-results-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    .eatsr-cols-2, .eatsr-cols-3, .eatsr-cols-4 { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════
   9. BUDDYBOSS MOBILE APP
   ═══════════════════════════════════════════════════════════════════ */

body.in-bbapp .eatsr-mobile-toggle, body.eatsr-mobile-app .eatsr-mobile-toggle {
    display: flex; min-height: 52px; padding: 14px 16px; font-size: 16px;
    border-radius: 12px; background: #fff; border: 1px solid #e4e7ec;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

body.in-bbapp .eatsr-active-chips, body.eatsr-mobile-app .eatsr-active-chips {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 8px 0 12px; scrollbar-width: none;
}

body.in-bbapp .eatsr-combined-bar, body.eatsr-mobile-app .eatsr-combined-bar {
    margin-top: 8px; border-radius: 12px; background: #fff; border: 1px solid #e4e7ec;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    max-height: 0; padding-top: 0; padding-bottom: 0; border-color: transparent; opacity: 0; overflow: hidden;
    transition: max-height .3s ease, opacity .2s ease, padding .3s ease, border-color .3s ease;
}
body.in-bbapp .eatsr-combined-bar.eatsr-expanded, body.eatsr-mobile-app .eatsr-combined-bar.eatsr-expanded {
    max-height: 1200px; padding: 16px; border-color: #e4e7ec; opacity: 1;
}

body.in-bbapp .eatsr-filter-select, body.eatsr-mobile-app .eatsr-filter-select {
    min-height: 48px; padding: 12px 40px 12px 14px; font-size: 16px; border-radius: 10px;
}

body.in-bbapp .eatsr-results-grid, body.eatsr-mobile-app .eatsr-results-grid { grid-template-columns: 1fr !important; gap: 16px; }
body.in-bbapp .eatsr-btn, body.eatsr-mobile-app .eatsr-btn { width: 100%; min-height: 50px; font-size: 16px; border-radius: 10px; }


/* ═══════════════════════════════════════════════════════════════════
   10. DARK MODE
   ═══════════════════════════════════════════════════════════════════ */

body.bb-dark-theme .eatsr-combined-bar { background: #22262e; border-color: #333840; }
body.bb-dark-theme .eatsr-filter-label { color: #e4e6eb; }
body.bb-dark-theme .eatsr-filter-select { background: #2a2e36; border-color: #333840; color: #e4e6eb; }
body.bb-dark-theme .eatsr-date-input { background: #2a2e36; border-color: #333840; color: #e4e6eb; }
body.bb-dark-theme .eatsr-date-sub { color: #666d7a; }
body.bb-dark-theme .eatsr-date-sep { color: #444b55; }
body.bb-dark-theme .eatsr-bar-dates { border-color: #333840; }
body.bb-dark-theme .eatsr-card { background: #22262e; border-color: #333840; }
body.bb-dark-theme .eatsr-card-title a { color: #e4e6eb; }
body.bb-dark-theme .eatsr-card-meta { color: #a0a3ab; }
body.bb-dark-theme .eatsr-card-dates { border-color: #333840; color: #a0a3ab; }
body.bb-dark-theme .eatsr-card-dates strong { color: #e4e6eb; }
body.bb-dark-theme .eatsr-card-footer { border-color: #333840; }
body.bb-dark-theme .eatsr-results-header { border-color: #333840; }
body.bb-dark-theme .eatsr-results-count { color: #a0a3ab; }
body.bb-dark-theme .eatsr-results-count strong { color: #e4e6eb; }
body.bb-dark-theme .eatsr-chip { background: rgba(255,255,255,.08); color: #e4e6eb; }
body.bb-dark-theme .eatsr-empty-state { color: #a0a3ab; }
body.bb-dark-theme .eatsr-empty-state h3 { color: #e4e6eb; }

@media (prefers-reduced-motion: reduce) {
    .eatsr-combined-bar, .eatsr-chevron, .eatsr-chip, .eatsr-btn, .eatsr-mobile-toggle, .eatsr-card { transition: none !important; }
}