/* LOGO Tender Tracker - Style */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --green:      #49af35;
    --green-dark: #3a8f28;
    --green-light:#e8f7e4;
    --text:       #1a1a2e;
    --text-muted: #666;
    --border:     #e0e0e0;
    --bg:         #f5f7f2;
    --white:      #ffffff;
    --red:        #e53935;
    --orange:     #f57c00;
    --blue:       #1565c0;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

/* HEADER */
header {
    background: var(--green);
    color: #fff;
    padding: 16px 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.logo-wrap { display: flex; align-items: center; gap: 12px; }
.logo-icon { font-size: 2rem; }
.logo-wrap h1 { font-size: 1.4rem; font-weight: 700; }
.subtitle { font-size: 0.78rem; opacity: 0.85; }
.stats-wrap { display: flex; gap: 20px; }
.stat { text-align: center; }
.stat-num { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1; }
.stat-label { font-size: 0.7rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.5px; }

/* MAIN LAYOUT */
main {
    max-width: 1400px;
    margin: 24px auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: 1fr 220px;
    grid-template-rows: auto 1fr;
    gap: 16px;
}
.filters { grid-column: 1 / -1; }

/* FILTERS */
.filters {
    background: var(--white);
    border-radius: 10px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.filter-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.search-input {
    flex: 1;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color .2s;
}
.search-input:focus { border-color: var(--green); }
.filter-row select {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--white);
    cursor: pointer;
}
.btn-filter {
    background: var(--green);
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background .2s;
}
.btn-filter:hover { background: var(--green-dark); }
.btn-reset {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 8px 10px;
}
.btn-reset:hover { color: var(--red); }

/* RESULTS */
.results { }
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.results-count { font-weight: 600; color: var(--text); }

/* TENDER CARD */
.tender-list { display: flex; flex-direction: column; gap: 12px; }
.tender-card {
    background: var(--white);
    border-radius: 10px;
    padding: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: box-shadow .2s;
    position: relative;
}
.tender-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.tender-card.expired { opacity: 0.65; background: #fafafa; }
.tender-card.expiring-soon { border-left: 4px solid var(--orange); }

.tender-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}
.tender-badges { display: flex; flex-wrap: wrap; gap: 6px; }

/* BADGES */
.badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.badge-rs { background: #003893; color: #fff; }
.badge-hr { background: #171796; color: #fff; }
.badge-me { background: #d4af37; color: #000; }
.badge-de { background: #000; color: #fff; }
.badge-hu { background: #ce2939; color: #fff; }
.badge-ae { background: #009900; color: #fff; }
.badge-default { background: #eee; color: #555; }
.source-badge { background: var(--green-light); color: var(--green-dark); }
.status-badge.active { background: #e8f5e9; color: #2e7d32; }
.status-badge.expired { background: #fce4e4; color: #c62828; }
.badge.urgent { background: #fff3e0; color: var(--orange); }

.tender-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--green-dark);
    white-space: nowrap;
}

.tender-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 6px;
}
.tender-title a {
    color: var(--text);
    text-decoration: none;
}
.tender-title a:hover { color: var(--green); text-decoration: underline; }

.tender-authority {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.tender-desc {
    font-size: 0.83rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 10px;
}

.tender-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.tender-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.meta-item {
    font-size: 0.78rem;
    color: var(--text-muted);
}
.meta-item.urgent-text { color: var(--orange); font-weight: 600; }
.matched-keywords {
    font-size: 0.75rem;
    color: var(--green-dark);
    background: var(--green-light);
    padding: 3px 8px;
    border-radius: 4px;
}

.btn-detail {
    display: inline-block;
    margin-top: 12px;
    padding: 6px 14px;
    background: var(--green);
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    transition: background .2s;
}
.btn-detail:hover { background: var(--green-dark); }

/* PAGINATION */
.pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
    padding-bottom: 16px;
}
.page-link {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text);
    font-size: 0.85rem;
    background: var(--white);
    transition: all .2s;
}
.page-link:hover { border-color: var(--green); color: var(--green); }
.page-link.active { background: var(--green); color: #fff; border-color: var(--green); }

/* FETCH STATUS SIDEBAR */
.fetch-status {
    background: var(--white);
    border-radius: 10px;
    padding: 16px;
    border: 1px solid var(--border);
    height: fit-content;
    position: sticky;
    top: 80px;
}
.fetch-status h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.fetch-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 6px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
}
.fetch-item:last-of-type { border-bottom: none; }
.fetch-source { font-weight: 700; }
.fetch-new { color: var(--green); font-weight: 600; }
.fetch-time { color: var(--text-muted); font-size: 0.72rem; }
.fetch-item.error .fetch-source { color: var(--red); }
.manual-fetch {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
}
.btn-fetch {
    display: block;
    text-align: center;
    padding: 6px;
    background: var(--green-light);
    color: var(--green-dark);
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    transition: background .2s;
}
.btn-fetch:hover { background: var(--green); color: #fff; }

/* EMPTY STATE */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 1rem;
}

/* FOOTER */
footer {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 0.78rem;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    main {
        grid-template-columns: 1fr;
    }
    .fetch-status {
        position: static;
        order: -1;
    }
    .filters { grid-column: 1; }
    .stats-wrap { gap: 12px; }
    .stat-num { font-size: 1.3rem; }
}
@media (max-width: 600px) {
    .header-inner { flex-direction: column; align-items: flex-start; }
    .tender-top { flex-direction: column; }
    .filter-row select { width: 100%; }
    .search-input { width: 100%; }
}