/* Public Tender Portal & CMS — shared styles
   Note: focuses on accessibility (contrast, focus rings) to support WCAG 2.1 AA */

:root{
  --td-blue-900:#0b2447;
  --td-blue-800:#10315a;
  --td-blue-700:#154b8a;
  --td-blue-600:#1a63b0;
  --td-blue-50:#eef5fc;
  --td-red-700:#a3231f;
  --td-amber-700:#946200;
  --td-green-700:#166534;
  --td-gray-50:#f7f8fa;
  --td-gray-100:#eef0f3;
  --td-gray-700:#3f4650;
  --focus-ring:#f5a623;
}

*{box-sizing:border-box;}
body{font-family:'Poppins','Noto Sans HK',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
h1,h2,h3,h4,h5,h6,button,input,select,textarea{font-family:inherit;}

/* Visible, high-contrast focus indicator for keyboard navigation (WCAG 2.4.7) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:2px;
  border-radius:2px;
}

.skip-link{
  position:absolute; left:-999px; top:0; z-index:100;
  background:#fff; color:var(--td-blue-900); padding:.75rem 1.25rem;
  font-weight:600; border-radius:0 0 .5rem 0;
}
.skip-link:focus{ left:0; }

.status-badge{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.2rem .65rem; border-radius:999px; font-size:.75rem; font-weight:700;
  letter-spacing:.02em; white-space:nowrap; font-family:'Poppins',sans-serif;
}
.status-badge::before{content:''; width:.5rem; height:.5rem; border-radius:999px; background:currentColor;}
.status-open{background:#e7f6ec; color:var(--td-green-700);}
.status-closed{background:#f1f2f4; color:#374151;}
.status-cancelled{background:#fdeceb; color:var(--td-red-700);}
.status-scheduled{background:#fff6e6; color:var(--td-amber-700);}
.status-draft{background:#f3f0ff; color:#6d28d9;}

/* ---------------------------- Uniform table typography ----------------------------
   All tables across the public site AND the admin CMS (tender listings, audit log,
   accounts) share the same font, size, weight and column alignment so nothing looks
   mismatched between sections. */
table.tender-table{
  font-family:'Poppins','Noto Sans HK',sans-serif;
  border-collapse:collapse;
  width:100%;
}
table.tender-table th{
  text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
  font-weight:600; color:#5b6472; background:var(--td-gray-50); padding:.85rem 1rem;
  border-bottom:2px solid var(--td-gray-100); vertical-align:middle;
}
table.tender-table td{
  padding:.9rem 1rem; border-bottom:1px solid var(--td-gray-100); vertical-align:middle;
  font-size:.875rem; font-weight:400; color:#1f2937; text-align:left; line-height:1.5;
}
table.tender-table tbody tr:hover{ background:var(--td-blue-50); }
table.tender-table td, table.tender-table th{ font-variant-numeric: tabular-nums; }

/* ---------------------------- Dense table mode ----------------------------
   Used on admin listing pages with many columns (e.g. Document Access
   Registrations) so every column, including Actions, fits on a standard
   desktop screen without horizontal scrolling. Cuts cell padding well below
   the default table.tender-table spacing while keeping the same font/colour
   rules (inherited from table.tender-table) for typography consistency. */
table.dense-table th{ padding:.5rem .6rem; font-size:.68rem; }
table.dense-table td{ padding:.5rem .6rem; font-size:.8125rem; }

/* Action column: buttons/links must always stay on one line, never wrap mid-label. */
.actions-col{ white-space:nowrap; }

.toc-preview{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.rich-content h4{font-weight:700; margin-top:1.1em; margin-bottom:.4em; color:var(--td-blue-900);}
.rich-content p{margin-bottom:.7em; line-height:1.65;}
.rich-content ul{list-style:disc; padding-left:1.4em; margin-bottom:.7em;}
.rich-content li{margin-bottom:.3em;}
.rich-content strong{color:var(--td-blue-900);}

.lang-hidden{ display:none !important; }

.ql-editor{ min-height:180px; font-size:.95rem; font-family:'Poppins','Noto Sans HK',sans-serif; }

/* ---------------------------- Active Tenders emphasis ----------------------------
   The Active Tenders panel is deliberately louder than Past Tenders: a colour-accented
   frame, a soft glow/gradient header band, a larger heading and a "live" pulsing
   indicator draw the eye there first, while Past Tenders stays plain and muted. */
.active-panel{
  border:2px solid var(--td-blue-600);
  border-radius:1rem;
  background:#fff;
  box-shadow:0 10px 30px -12px rgba(26,99,176,.35);
  overflow:hidden;
}
.active-panel-header{
  background:linear-gradient(120deg, var(--td-blue-900) 0%, var(--td-blue-600) 100%);
  padding:1.1rem 1.5rem;
  color:#fff;
}
.active-panel-header h2{ color:#fff; }
.live-dot{
  width:.55rem; height:.55rem; border-radius:999px; background:#4ade80;
  display:inline-block; box-shadow:0 0 0 rgba(74,222,128,.6);
  animation:live-pulse 1.8s infinite;
}
@keyframes live-pulse{
  0%{ box-shadow:0 0 0 0 rgba(74,222,128,.6); }
  70%{ box-shadow:0 0 0 8px rgba(74,222,128,0); }
  100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); }
}
.active-panel table.tender-table th{ background:#f4f8fd; }
.active-panel table.tender-table tbody tr:hover{ background:#eaf3fc; }

.past-panel{
  border:1px solid var(--td-gray-100);
  border-radius:.75rem;
  background:#fafafa;
}
.past-panel-header{ padding:0; }

/* ---------------------------- Column width alignment (public listing) ----------------------------
   The Active Tenders and Past Tenders tables are two separate <table> elements, so the
   browser's auto layout can size each one's columns slightly differently depending on that
   table's own content. Fixing each column to the same percentage width on both keeps the
   Ref/Tender Name/Date/Closing Date/Status columns lined up between the two panels. */
table.portal-tenders-table{ table-layout:fixed; }
table.portal-tenders-table th:nth-child(1), table.portal-tenders-table td:nth-child(1){ width:14%; }
table.portal-tenders-table th:nth-child(2), table.portal-tenders-table td:nth-child(2){ width:36%; }
table.portal-tenders-table th:nth-child(3), table.portal-tenders-table td:nth-child(3){ width:16%; }
table.portal-tenders-table th:nth-child(4), table.portal-tenders-table td:nth-child(4){ width:16%; }
table.portal-tenders-table th:nth-child(5), table.portal-tenders-table td:nth-child(5){ width:18%; }
table.portal-tenders-table td:nth-child(2){ word-break:break-word; }

@media (max-width:640px){
  table.tender-table thead{ display:none; }
  table.tender-table, table.tender-table tbody, table.tender-table tr, table.tender-table td{ display:block; width:100%; }
  table.tender-table tr{ border:1px solid var(--td-gray-100); border-radius:.5rem; margin-bottom:.75rem; padding:.5rem .25rem; background:#fff; }
  table.tender-table td{ border-bottom:none; padding:.4rem 1rem; }
  table.tender-table td::before{
    content: attr(data-label);
    display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.04em;
    color:#8892a0; font-weight:700; margin-bottom:.15rem;
  }
}

/* ---------------------------- Bilingual (EN | 繁體中文) form layout ----------------------------
   Used by the admin Edit Tender, Addendum/Clarification, and Publish Answer forms: each
   bilingual field is one <table class="bilingual-field-table"> ROW, with English in the left
   cell and the optional Traditional Chinese counterpart in the right cell, so every EN/ZH field
   pair lines up cleanly side by side instead of stacking as separate full-width blocks. Collapses
   to a single stacked column on narrow screens (admin CMS is used on desktop, but this keeps it
   usable on a phone/tablet too). */
table.bilingual-field-table{ width:100%; border-collapse:separate; border-spacing:0 1rem; }
table.bilingual-field-table td.bilingual-col{
  width:50%; vertical-align:top; padding:0 .75rem;
}
table.bilingual-field-table td.bilingual-col:first-child{ padding-left:0; }
table.bilingual-field-table td.bilingual-col:last-child{ padding-right:0; }
table.bilingual-field-table .bilingual-col-heading{
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--td-blue-700); margin-bottom:.6rem; padding-bottom:.35rem;
  border-bottom:2px solid var(--td-blue-50);
}
table.bilingual-field-table .bilingual-col-heading.zh-heading{ color:#6d28d9; border-bottom-color:#f3f0ff; }

@media (max-width:640px){
  table.bilingual-field-table, table.bilingual-field-table tbody, table.bilingual-field-table tr{ display:block; width:100%; }
  table.bilingual-field-table td.bilingual-col{
    display:block; width:100%; padding:0 0 1rem 0;
  }
  table.bilingual-field-table tr{ margin-bottom:.5rem; }
}