@charset "UTF-8";
/* ==========================================================================
   Tenders, projects and the CAPTCHA field.
   Loaded after app.css and motion.css; reuses their tokens throughout.
   ========================================================================== */

/* ── Status badges ──────────────────────────────────────────────────────── */

/* Status is never carried by colour alone — the badge always states the word,
   so it survives greyscale printing and colour-blindness. */
.badge-status { border-width: 1px; font-weight: 700; }
.badge-status--open      { background: var(--color-success-bg); color: #14532d; border-color: var(--color-success); }
.badge-status--closed    { background: var(--surface-3);        color: var(--ink-700); border-color: var(--ink-400); }
.badge-status--awarded   { background: var(--color-info-bg);    color: #0c4a6e; border-color: var(--color-info); }
.badge-status--cancelled { background: var(--color-danger-bg);  color: #7f1d1d; border-color: var(--color-danger); }
.badge-status--ongoing   { background: var(--color-warning-bg); color: #713f12; border-color: var(--color-warning); }
.badge-status--completed { background: var(--color-success-bg); color: #14532d; border-color: var(--color-success); }
.badge-status--planned   { background: var(--color-info-bg);    color: #0c4a6e; border-color: var(--color-info); }
.badge-status--stalled   { background: var(--color-danger-bg);  color: #7f1d1d; border-color: var(--color-danger); }

html[data-contrast="high"] .badge-status {
  background: transparent !important;
  color: var(--color-text) !important;
  border-color: currentColor !important;
}

/* ── Definition grids (the "key : value" blocks) ────────────────────────── */

.meta-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  margin: var(--sp-4) 0 0;
}
.meta-grid--tight { gap: var(--sp-3); margin-top: var(--sp-3); }
.meta-grid dt {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-text-muted);
  margin-bottom: 2px;
}
html[lang^="bn"] .meta-grid dt { text-transform: none; letter-spacing: 0; }
.meta-grid dd { margin: 0; font-size: var(--fs-sm); color: var(--color-text); }

/* Vertical variant for the side panels. */
.stacked-meta { margin: 0; }
.stacked-meta dt {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-text-muted);
  margin-top: var(--sp-4);
}
html[lang^="bn"] .stacked-meta dt { text-transform: none; letter-spacing: 0; }
.stacked-meta dt:first-child { margin-top: 0; }
.stacked-meta dd {
  margin: 2px 0 0; padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-100);
  font-size: var(--fs-sm);
}
.stacked-meta dd:last-child { border-bottom: 0; padding-bottom: 0; }

/* ── Tender card ────────────────────────────────────────────────────────── */

.tender-card { border-left: 4px solid var(--navy-700); }
.tender-card-body { padding: var(--sp-5); }
.tender-card-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.tender-no {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--color-text-muted);
  background: var(--surface-3); padding: 2px var(--sp-2);
  border-radius: var(--radius-sm); border: 1px solid var(--color-border);
}
.tender-title { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.tender-title a { color: var(--navy-700); text-decoration: none; }
.tender-title a:hover { text-decoration: underline; }
.tender-desc { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ── Project card ───────────────────────────────────────────────────────── */

.project-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit; height: 100%;
}
.project-card:hover { color: inherit; }

.project-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--surface-3);
  overflow: hidden;
}
.project-media img { width: 100%; height: 100%; object-fit: cover; }
.project-media--empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--ink-400);
}
.project-status { position: absolute; top: var(--sp-3); left: var(--sp-3); }
.project-count {
  position: absolute; bottom: var(--sp-3); right: var(--sp-3);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px var(--sp-2);
  background: rgba(0, 26, 51, .8); color: #fff;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs); font-weight: 700;
}

.project-body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.project-title {
  margin: 0 0 var(--sp-2); font-size: var(--fs-md);
  color: var(--navy-700);
}
.project-loc {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm); color: var(--color-text-muted);
}
.project-loc .ico { flex: none; }

/* ── Progress bar ───────────────────────────────────────────────────────── */

.progress {
  height: 8px; margin-top: auto;
  background: var(--surface-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress--lg { height: 14px; }
.progress-fill {
  display: block; height: 100%;
  background: var(--navy-600);
  border-radius: var(--radius-pill);
  transition: width 700ms var(--ease-out);
}
.progress-label {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xs); color: var(--color-text-muted);
}
html[data-contrast="high"] .progress-fill { background: #ffff00; }
@media (prefers-reduced-motion: reduce) {
  .progress-fill { transition: none; }
}

/* ── CAPTCHA field ──────────────────────────────────────────────────────── */

.captcha {
  padding: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--navy-600);
  border-radius: var(--radius);
}
.captcha-row {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-3); flex-wrap: wrap;
}
.captcha-image {
  display: block; width: 200px; height: 64px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.captcha-refresh { flex: none; }
.captcha-input { max-width: 260px; letter-spacing: .12em; font-weight: 700; }
html[lang^="bn"] .captcha-input { letter-spacing: normal; }
.captcha-question {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin: 0 0 var(--sp-3); padding: var(--sp-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  font-size: var(--fs-md);
}
.captcha-question .ico { flex: none; margin-top: 3px; color: var(--navy-600); }
.captcha .hint a { font-weight: 600; }

/* On a narrow screen the image and the refresh button stack rather than
   squeezing the 200px image. */
@media (max-width: 400px) {
  .captcha-image { width: 100%; height: auto; aspect-ratio: 200 / 64; }
  .captcha-input { max-width: 100%; }
}

/* ── Print ──────────────────────────────────────────────────────────────── */

@media print {
  .captcha { display: none; }
  .tender-card, .project-card { break-inside: avoid; }
  .project-media { display: none; }
}