/* ============================================================
   Topwebsuite — public tender pages
   /tenders/  ·  /tenders/page/N/  ·  /tenders/<slug>/

   Self-contained tokens: these pages load style.css but not dashboard.css,
   so --surface/--primary would otherwise be undefined in light mode.
============================================================ */

.tv-page, .tl-page {
  --tv-brand: #2f68e6;
  --tv-brand-deep: #1e4bb8;
  --tv-brand-ink: #12306f;
  --tv-brand-wash: #eef3fe;
  --tv-ink: #0b1533;
  --tv-ink-soft: #334063;
  --tv-muted: #6b7590;
  --tv-line: #e4e9f4;
  --tv-surface: #ffffff;
  --tv-surface-2: #f7f9fd;
  --tv-ok: #12855a;
  --tv-ok-wash: #e6f6ee;
  --tv-no: #c2334d;
  --tv-no-wash: #fdecef;
  --tv-warn: #b45309;
  --tv-sh-sm: 0 1px 2px rgba(11, 21, 51, .04), 0 4px 12px rgba(11, 21, 51, .04);
  --tv-sh-md: 0 2px 4px rgba(11, 21, 51, .04), 0 12px 32px rgba(11, 21, 51, .08);
  --tv-sh-lg: 0 32px 64px -12px rgba(11, 21, 51, .18);
  --tv-r: 16px;

  max-width: 940px;
  margin: 0 auto;
  padding: 0 24px 88px;
  color: var(--tv-ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.tl-page { max-width: 1120px; }

[data-theme="dark"] .tv-page,
[data-theme="dark"] .tl-page {
  --tv-brand: #5b93ff;
  --tv-brand-deep: #2f68e6;
  --tv-brand-ink: #a8c6ff;
  --tv-brand-wash: #14243f;
  --tv-ink: #eaf0fa;
  --tv-ink-soft: #c2cde2;
  --tv-muted: #8c9ab6;
  --tv-line: #22304a;
  --tv-surface: #101a2b;
  --tv-surface-2: #0c1522;
  --tv-ok: #4ade9b;
  --tv-ok-wash: #102c20;
  --tv-no: #ff7d92;
  --tv-no-wash: #331a21;
  --tv-warn: #fbbf24;
  --tv-sh-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .3);
  --tv-sh-md: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45);
  --tv-sh-lg: 0 32px 64px -12px rgba(0, 0, 0, .7);
}

.tv-i { color: var(--tv-brand); }

/* ── breadcrumbs ── */
.tv-crumbs { padding: 22px 0 0; }
.tv-crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--tv-muted);
}
.tv-crumbs li + li::before { content: "›"; margin-right: 7px; opacity: .55; }
.tv-crumbs a { color: var(--tv-muted); text-decoration: none; }
.tv-crumbs a:hover { color: var(--tv-brand); }
.tv-crumbs span { overflow-wrap: anywhere; }

/* ── buttons ── */
.tv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: 12px; border: 1px solid transparent;
  font-size: 14.5px; font-weight: 650; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.tv-btn--primary { background: var(--tv-brand); color: #fff; box-shadow: 0 6px 18px rgba(47, 104, 230, .3); }
.tv-btn--primary:hover { background: var(--tv-brand-deep); transform: translateY(-2px); }
.tv-btn--soft { background: var(--tv-surface); color: var(--tv-ink); border-color: var(--tv-line); box-shadow: var(--tv-sh-sm); }
.tv-btn--soft:hover { border-color: var(--tv-brand); color: var(--tv-brand); transform: translateY(-2px); }
.tv-btn--invert { background: #fff; color: var(--tv-brand-deep); box-shadow: 0 8px 24px rgba(0, 0, 0, .16); }
.tv-btn--invert:hover { transform: translateY(-2px); }

/* ── detail header ── */
.tv-head { margin-top: 20px; }
.tv-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.tv-tag {
  display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 8px;
  background: var(--tv-surface-2); border: 1px solid var(--tv-line);
  font-size: 12.5px; font-weight: 600; color: var(--tv-muted);
  text-decoration: none;
}
a.tv-tag:hover { border-color: var(--tv-brand); color: var(--tv-brand); }
.tv-tag--type { background: var(--tv-brand-wash); border-color: color-mix(in srgb, var(--tv-brand) 22%, transparent); color: var(--tv-brand-ink); }
.tv-tag--open { background: var(--tv-ok-wash); border-color: color-mix(in srgb, var(--tv-ok) 26%, transparent); color: var(--tv-ok); }
.tv-tag--closed { background: var(--tv-no-wash); border-color: color-mix(in srgb, var(--tv-no) 26%, transparent); color: var(--tv-no); }

.tv-head h1 {
  margin: 0 0 14px;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 800; line-height: 1.22; letter-spacing: -.025em;
  color: var(--tv-ink); overflow-wrap: anywhere;
}
.tv-countdown {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 8px 14px; border-radius: 999px;
  background: var(--tv-surface-2); border: 1px solid var(--tv-line);
  font-size: 13.5px; font-weight: 650; color: var(--tv-ink);
}
.tv-countdown.is-urgent { background: var(--tv-no-wash); border-color: color-mix(in srgb, var(--tv-no) 30%, transparent); color: var(--tv-no); }
.tv-countdown.is-closed { background: var(--tv-no-wash); color: var(--tv-no); }

/* ── fact strip ── */
.tv-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 4px; margin: 22px 0 0; padding: 6px;
  border-radius: var(--tv-r); background: var(--tv-surface-2); border: 1px solid var(--tv-line);
}
.tv-fact { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-width: 0; }
.tv-fact i { font-size: 18px; }
.tv-fact div { min-width: 0; }
.tv-fact span {
  display: block; font-size: 11.5px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tv-muted);
}
.tv-fact strong {
  display: block; margin-top: 2px; font-size: 14.5px; font-weight: 650;
  color: var(--tv-ink); overflow-wrap: anywhere;
}

/* ── content blocks ── */
.tv-block {
  margin-top: 22px; padding: 28px 30px;
  border-radius: var(--tv-r); background: var(--tv-surface);
  border: 1px solid var(--tv-line); box-shadow: var(--tv-sh-sm);
}
.tv-block h2 {
  margin: 0 0 14px;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: 19px; font-weight: 750; letter-spacing: -.02em; color: var(--tv-ink);
}
.tv-summary p { margin: 0; font-size: 16.5px; line-height: 1.75; color: var(--tv-ink-soft); overflow-wrap: anywhere; }
.tv-muted { color: var(--tv-muted); font-size: 15px; margin: 0; }

.tv-rt { min-width: 0; }
.tv-line { margin: 0 0 10px; font-size: 15.5px; line-height: 1.72; color: var(--tv-ink-soft); overflow-wrap: anywhere; }
.tv-line:last-child { margin-bottom: 0; }
.tv-inline { color: var(--tv-brand); text-decoration: none; overflow-wrap: anywhere; }
.tv-inline:hover { text-decoration: underline; }

.tv-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; min-width: 0; }
.tv-links:last-child { margin-bottom: 0; }
.tv-link {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0;
  padding: 9px 15px; border-radius: 999px;
  background: var(--tv-surface-2); border: 1px solid var(--tv-line);
  color: var(--tv-brand); text-decoration: none; font-size: 13.5px; font-weight: 650;
}
.tv-link:hover { border-color: var(--tv-brand); background: var(--tv-brand-wash); }
.tv-link-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-link i { flex: none; font-size: 11px; opacity: .8; }

.tv-contact { margin: 0; display: flex; flex-direction: column; }
.tv-contact > div {
  display: flex; gap: 16px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--tv-line); min-width: 0;
}
.tv-contact > div:last-child { border-bottom: 0; padding-bottom: 0; }
.tv-contact dt {
  flex: none; width: 108px; font-size: 12px; font-weight: 650;
  letter-spacing: .05em; text-transform: uppercase; color: var(--tv-muted);
}
.tv-contact dd { margin: 0; flex: 1; min-width: 0; font-size: 15px; color: var(--tv-ink); overflow-wrap: anywhere; }

.tv-docs { display: flex; flex-direction: column; gap: 8px; }
.tv-doc {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border-radius: 12px; background: var(--tv-surface-2); border: 1px solid var(--tv-line);
  color: var(--tv-ink); text-decoration: none; font-size: 14.5px; font-weight: 620; min-width: 0;
}
.tv-doc:hover { border-color: var(--tv-brand); color: var(--tv-brand); }
.tv-doc span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tv-doc i:first-child { color: var(--tv-brand); font-size: 16px; }

.tv-meta { margin-top: 22px; padding-top: 6px; }
.tv-meta-row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--tv-line); font-size: 14.5px;
}
.tv-meta-row span { color: var(--tv-muted); font-weight: 600; }
.tv-meta-row strong { color: var(--tv-ink); text-align: right; overflow-wrap: anywhere; }
.tv-source {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-size: 14px; font-weight: 650; color: var(--tv-brand); text-decoration: none;
}
.tv-source:hover { text-decoration: underline; }

/* ── locked panel ── */
.tv-lock {
  position: relative; overflow: hidden;
  margin-top: 22px; padding: 40px 34px; text-align: center;
  border-radius: 20px; border: 1px solid color-mix(in srgb, var(--tv-brand) 20%, transparent);
  background:
    radial-gradient(90% 120% at 50% 0%, var(--tv-brand-wash), transparent 62%),
    var(--tv-surface);
  box-shadow: var(--tv-sh-md);
}
.tv-lock-icon {
  width: 58px; height: 58px; margin: 0 auto 16px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--tv-brand); color: #fff; font-size: 22px;
  box-shadow: 0 10px 24px rgba(47, 104, 230, .34);
}
.tv-lock h2 {
  margin: 0 0 8px;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: clamp(20px, 2.4vw, 25px); font-weight: 800; letter-spacing: -.025em; color: var(--tv-ink);
}
.tv-lock > p { margin: 0 auto 22px; max-width: 54ch; font-size: 15.5px; line-height: 1.62; color: var(--tv-muted); }
.tv-lock-list {
  list-style: none; margin: 0 auto 26px; padding: 0; max-width: 380px;
  display: flex; flex-direction: column; gap: 10px; text-align: left;
}
.tv-lock-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--tv-ink-soft); }
.tv-lock-list i { color: var(--tv-ok); margin-top: 3px; }
.tv-lock-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.tv-lock-note { margin: 18px 0 0; font-size: 13px; color: var(--tv-muted); }

.tv-loading {
  margin-top: 22px; padding: 40px; text-align: center;
  border-radius: var(--tv-r); border: 1px dashed var(--tv-line);
  color: var(--tv-muted); font-size: 14.5px;
}

/* ── related ── */
.tv-related { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tv-related a {
  display: block; padding: 14px 0; border-bottom: 1px solid var(--tv-line);
  text-decoration: none; transition: padding-left .15s ease;
}
.tv-related li:last-child a { border-bottom: 0; padding-bottom: 0; }
.tv-related a:hover { padding-left: 6px; }
.tv-related strong { display: block; font-size: 15px; font-weight: 620; color: var(--tv-ink); line-height: 1.45; }
.tv-related a:hover strong { color: var(--tv-brand); }
.tv-related span { display: block; margin-top: 4px; font-size: 13px; color: var(--tv-muted); }

/* ── closing CTA ── */
.tv-cta {
  margin-top: 30px; padding: 36px 34px; border-radius: 20px; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  background:
    radial-gradient(110% 130% at 90% 110%, #6f4bd8, transparent 55%),
    linear-gradient(120deg, var(--tv-brand-deep), var(--tv-brand) 62%, #4f8bff);
  box-shadow: var(--tv-sh-lg);
}
.tv-cta h2 {
  margin: 0 0 8px; font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: clamp(20px, 2.3vw, 26px); font-weight: 800; letter-spacing: -.025em;
}
.tv-cta p { margin: 0; font-size: 15px; line-height: 1.6; opacity: .93; max-width: 56ch; }

/* ── hub / listing ── */
.tl-hero { margin-top: 20px; margin-bottom: 26px; }
.tl-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--tv-brand-wash); color: var(--tv-brand-ink);
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.tl-hero h1 {
  margin: 0 0 12px; max-width: 22ch;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: clamp(28px, 4vw, 44px); font-weight: 800; line-height: 1.12;
  letter-spacing: -.032em; color: var(--tv-ink);
}
.tl-hero p { margin: 0; max-width: 62ch; font-size: 17px; line-height: 1.65; color: var(--tv-muted); }
.tl-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.tl-card {
  display: flex; flex-direction: column;
  padding: 24px; border-radius: var(--tv-r);
  background: var(--tv-surface); border: 1px solid var(--tv-line); box-shadow: var(--tv-sh-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tl-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tv-brand) 32%, transparent); box-shadow: var(--tv-sh-md); }
.tl-card-top { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tl-tag {
  display: inline-flex; padding: 4px 10px; border-radius: 7px;
  background: var(--tv-surface-2); border: 1px solid var(--tv-line);
  font-size: 11.5px; font-weight: 620; color: var(--tv-muted);
}
.tl-tag--type { background: var(--tv-brand-wash); border-color: color-mix(in srgb, var(--tv-brand) 22%, transparent); color: var(--tv-brand-ink); }
.tl-tag--open { background: var(--tv-ok-wash); border-color: color-mix(in srgb, var(--tv-ok) 26%, transparent); color: var(--tv-ok); }
.tl-tag--closed { background: var(--tv-no-wash); border-color: color-mix(in srgb, var(--tv-no) 26%, transparent); color: var(--tv-no); }

.tl-card h2 { margin: 0 0 12px; font-size: 16.5px; font-weight: 700; line-height: 1.42; letter-spacing: -.015em; }
.tl-card h2 a { color: var(--tv-ink); text-decoration: none; overflow-wrap: anywhere; }
.tl-card h2 a:hover { color: var(--tv-brand); }
.tl-card-meta { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.tl-card-meta span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--tv-muted); overflow-wrap: anywhere; }
.tl-card-meta i { color: var(--tv-brand); font-size: 13px; width: 15px; flex: none; }
.tl-card-link {
  margin-top: auto; display: flex; justify-content: center; align-items: center;
  padding: 11px 18px; border-radius: 11px;
  background: var(--tv-brand); color: #fff;
  font-size: 14px; font-weight: 650; text-decoration: none;
  box-shadow: 0 4px 14px rgba(47, 104, 230, .24);
}
.tl-card-link:hover { background: var(--tv-brand-deep); }

.tl-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 34px; }
.tl-pager a, .tl-pager span {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--tv-line);
  background: var(--tv-surface); color: var(--tv-ink);
  font-size: 14px; font-weight: 620; text-decoration: none;
}
.tl-pager a:hover { border-color: var(--tv-brand); color: var(--tv-brand); }
.tl-pager .is-current { background: var(--tv-brand); border-color: var(--tv-brand); color: #fff; }
.tl-pager-gap { border: 0; background: none; color: var(--tv-muted); min-width: 20px; padding: 0; }

/* ── responsive ── */
@media (max-width: 760px) {
  .tv-page, .tl-page { padding: 0 16px 60px; }
  .tv-block { padding: 20px 18px; }
  .tv-lock { padding: 30px 20px; }
  .tv-lock-actions { flex-direction: column; }
  .tv-lock-actions .tv-btn { width: 100%; }
  .tv-contact > div { flex-direction: column; gap: 3px; }
  .tv-contact dt { width: auto; }
  .tv-cta { padding: 26px 20px; }
  .tv-cta .tv-btn { width: 100%; }
  .tl-grid { grid-template-columns: 1fr; }
  .tl-hero-actions { flex-direction: column; }
  .tl-hero-actions .tv-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tv-btn, .tl-card, .tv-related a { transition: none; }
  .tv-btn:hover, .tl-card:hover { transform: none; }
  .tv-related a:hover { padding-left: 0; }
}