/* ================= CORE VARIABLES ================= */
:root{
  --primary:#1F3A5F;
  --secondary:#2E6F95;
  --accent:#0B7A75;

  --bg:#f5f7fa;
  --panel:#f8fafc;
  --border:#e5e7eb;

  --text:#1f2937;
  --muted:#6b7280;
}

/* ================= RESET / GLOBAL ================= */
*{
  box-sizing:border-box;
}

html,body{
  width:100%;
  overflow-x:hidden;
}

body{
  font-family:'Roboto',sans-serif;
  margin:0;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

a{
  color:var(--accent);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

/* ================= HEADER & NAV ================= */
header{
  background:linear-gradient(180deg,#1F3A5F,#182f4f);
  color:#fff;
  padding:26px 20px;
  text-align:center;
}

header h1{
  margin:0;
  font-weight:700;
  letter-spacing:-0.02em;
}

nav{
  background:#162f49;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:nowrap;
}

nav a{
  color:#fff;
  padding:12px 18px;
  font-weight:500;
  transition:background .15s ease;
}

nav a:hover{
  background:rgba(255,255,255,.08);
  text-decoration:none;
}

/* ================= LAYOUT ================= */
.container{
  max-width:1000px;
  margin:30px auto;
  background:#ffffff;
  padding:30px;
  border-radius:14px;
  box-shadow:0 15px 40px rgba(0,0,0,0.06);
}

/* ================= HEADINGS ================= */
h1,h2,h3{
  letter-spacing:-0.01em;
}

h2{
  margin-top:42px;
  margin-bottom:16px;
  padding-bottom:6px;
  border-bottom:2px solid var(--border);
  color:var(--primary);
}

/* ================= IMAGES ================= */
.image-placeholder{
  width:100%;
  min-height:200px;
  background:#e5e7eb;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin-bottom:20px;
}

.image-placeholder img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}



/* ================= FILTERS ================= */

.filters input:focus,
.filters select:focus{
  outline:none;
  border-color:var(--accent);
}

/* ================= TENDER LIST ================= */
.tender-item{
  background:#ffffff;
  border-radius:14px;
  padding:22px;
  margin-bottom:18px;
  border:1px solid var(--border);
  transition:box-shadow .2s ease, transform .15s ease;
}

.tender-item:hover{
  box-shadow:0 10px 28px rgba(0,0,0,0.08);
  transform:translateY(-2px);
}

.tender-item h3{
  margin:0 0 10px;
  color:var(--primary);
  word-break:break-word;
  overflow-wrap:anywhere;
  line-height:1.3;
}

.tender-meta{
  color:var(--muted);
  font-size:14px;
  margin-top:6px;
}

.view-details{
  display:inline-block;
  margin-top:14px;
  padding:10px 18px;
  background:linear-gradient(135deg,var(--accent),#0f8f89);
  color:#fff;
  border-radius:8px;
  font-weight:600;
}

.view-details:hover{
  opacity:.92;
  text-decoration:none;
}

/* ================= PANELS ================= */
.section-bg{
  background:var(--panel);
  padding:24px;
  border-radius:14px;
}

/* ================= HOW IT WORKS ================= */
.how-it-works{
  display:flex;
  gap:20px;
}

.step-card{
  flex:1;
  background:#ffffff;
  border-radius:14px;
  padding:24px;
  text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,0.08);
}

/* ================= TABLES ================= */
.table-wrapper{
  width:100%;
  overflow-x:auto;
}

table{
  width:100%;
  border-collapse:collapse;
  background:#ffffff;
  border-radius:12px;
  overflow:hidden;
}

thead th{
  background:linear-gradient(180deg,#f8fafc,#eef2f7);
}

th,td{
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  text-align:left;
  word-break:break-word;
  overflow-wrap:anywhere;
}

th{
  width:30%;
  font-weight:600;
  color:#334155;
}

tbody tr:nth-child(even){
  background:#fafafa;
}

tbody tr:hover{
  background:#f1f5f9;
}

/* ================= TENDER SUMMARY BOX ================= */
.key-summary{
  margin:25px 0;
  background:linear-gradient(180deg,#ffffff,#f9fafb);
  border-radius:14px;
  padding:12px;
  border:1px solid var(--border);
}

.key-summary-table th{
  width:35%;
  font-weight:600;
  color:var(--primary);
}

/* ================= SUPPORTING DOCUMENTS ================= */
.support-docs{
  margin-top:15px;
}

.support-docs-table th{
  font-weight:600;
}

.download-link{
  font-weight:600;
  color:var(--accent);
}

.download-link:hover{
  text-decoration:underline;
}

/* ================= FOOTER ================= */
footer{
  background:#162f49;
  color:#ffffff;
  text-align:center;
  padding:24px;
  margin-top:50px;
}

footer a{
  color:#cfe6ff;
}

/* ================= MOBILE ================= */
@media (max-width: 768px){

  nav{
    flex-wrap:wrap;
  }

  .container{
    margin:15px;
    padding:22px;
  }

  .how-it-works{
    flex-direction:column;
  }

  .step-card{
    width:100%;
  }

  h1{
    font-size:22px;
  }

  h2{
    font-size:18px;
  }

  th{
    width:45%;
  }

  /* Stack key summary nicely */
  .key-summary-table,
  .key-summary-table tbody,
  .key-summary-table tr,
  .key-summary-table th,
  .key-summary-table td{
    display:block;
    width:100%;
  }

  .key-summary-table tr{
    margin-bottom:10px;
  }

  .key-summary-table th{
    padding-bottom:4px;
  }

  .key-summary-table td{
    padding-top:0;
    font-weight:500;
  }

  /* Supporting docs mobile stack */
  .support-docs-table,
  .support-docs-table thead,
  .support-docs-table tbody,
  .support-docs-table tr,
  .support-docs-table th,
  .support-docs-table td{
    display:block;
    width:100%;
  }

  .support-docs-table tr{
    margin-bottom:16px;
  }

  .support-docs-table th{
    display:none;
  }

  .support-docs-table td::before{
    content:attr(data-label);
    font-weight:600;
    display:block;
    margin-bottom:4px;
  }
}

#loading-overlay{
  position: relative;
  margin-top: 20px;
}

.loading-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
}

.spinner{
  width:40px;
  height:40px;
  border:4px solid #e0e0e0;
  border-top:4px solid #0B7A75;
  border-radius:50%;
  animation:spin 1s linear infinite;
  margin-bottom:15px;
}

@keyframes spin{
  to{ transform:rotate(360deg); }
}

/* 🔑 CRITICAL FIX */
.filters > *{
  min-width:0;
}

.filters input,
.filters select{
  width:100%;
  max-width:100%;
  padding:12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#ffffff;
}

/* Input padding so text doesn't overlap icons */
.highlight{
  background:#bffffe;
  color:#1f2937;
  padding:0 2px;
  border-radius:3px;
  font-weight:600;
}

.badge-briefing-red{
  background:#fee2e2;
  color:#991b1b;
}

.badge-briefing-amber{
  background:#ffedd5;
  color:#9a3412;
}

.badge-briefing-green{
  background:#dcfce7;
  color:#166534;
}

.badge-briefing-muted{
  background:#e5e7eb;
  color:#374151;
}

/* ================= FILTERS (SINGLE SOURCE OF TRUTH) ================= */

.filters{
  display:grid;
  gap:15px;
  margin-bottom:25px;
  background:var(--panel);
  padding:18px;
  border-radius:12px;
}

/* Desktop layout */
@media (min-width: 769px){
  .filters{
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    align-items:center;
  }
}

/* Mobile layout */
@media (max-width: 768px){
  .filters{
    grid-template-columns: 1fr 1fr;
  }

  .search-group{
    grid-column: 1 / -1;
  }

  #sortBy{
    grid-column: 1 / 2;
  }

  .sort-order{
    grid-column: 2 / 3;
  }
}

/* ================= SEARCH INPUT ================= */

.search-group{
  display:flex;
  align-items:center;
  gap:6px;
  position:relative;
}

.search-group input{
  flex:1;
  padding:10px 12px;
  font-size:15px;
  border:1px solid #d1d5db;
  border-radius:10px;
  outline:none;
}

.search-group input:focus{
  border-color:#1F3A5F;
}

/* Search button */
.search-btn{
  width:44px;
  height:34px;
  border-radius:10px;
  border:1px solid #1F3A5F;    /* 👈 visible border */
  background:#ffffff;
  cursor:pointer;
  font-size:18px;
  color:#1F3A5F;
}

.search-btn:hover{
  background:#1F3A5F;
  color:#ffffff;
}

/* Clear button */
.clear-btn{
  display:none;               /* hidden by default */
  width:34px;
  height:34px;
  border-radius:8px;
  border:1px solid #d1d5db;
  background:#ffffff;
  color:#6b7280;
  font-size:18px;
  cursor:pointer;
  line-height:1;
  transition:opacity .15s ease, transform .15s ease;
}

.clear-btn:hover{
  background:#f3f4f6;
}

/* ================= SORT ORDER (RADIOS) ================= */

.sort-order{
  display:flex;
  gap:12px;
  align-items:center;
  background:#fff;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
}

.sort-order label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  cursor:pointer;
}

.search-group .clear-btn,
.search-group .search-btn{
  z-index:2;
}


.action-link{
  font-weight:600;
  color:#0B7A75;
  cursor:pointer;
  text-decoration:none;
}

.action-link:hover{
  text-decoration:underline;
}

/* ⓘ Info trigger */
.info-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-left:6px;
  border-radius:50%;
  border:1px solid #cbd5e1;
  font-size:12px;
  font-weight:700;
  color:#475569;
  cursor:pointer;
  user-select:none;
  line-height:1;
}

.info-trigger:hover{
  background:#f1f5f9;
}

/* Info message (hidden by default) */
.info-message{
  display:none;                 /* 🔑 REQUIRED */
  margin-top:12px;
  padding:14px 16px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-left:4px solid #0B7A75;
  border-radius:8px;
  font-size:14px;
  color:#475569;
  line-height:1.5;
}

/* Mobile safety: force visibility when toggled */
@media (max-width:768px){
  .info-message{
    display:none;
  }
}

/* ================= ACTION LINKS (Share / Bookmark) ================= */

.action-link.bookmarked{
  color:#ca8a04; /* gold for Saved */
}

/* Share copied state */
.action-link.copied{
  color:#16a34a; /* green */
}

/* Keep tender badges together */
.tender-badges{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:nowrap;
}

.tender-badges .badge{
  white-space:nowrap;
}

.tag-remove{
  margin-left:6px;
  cursor:pointer;
  font-weight:bold;
  opacity:.7;
}
.tag-remove:hover{
  opacity:1;
}

.action-link.disabled{
  pointer-events: none;
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(100%);
}