/* ============================================================
   Alumni Tender Portal — Vilcom-derived design system (brief §10)
   ============================================================ */
:root{
  /* ── Maroon & Grey theme ── (swap these tokens to re-brand) */
  --color-primary:#7B1E2B; --color-primary-dark:#5C1420;   /* maroon */
  --color-accent:#A8404E;  --color-accent-dark:#86303C;     /* brick / rose maroon — highlights */
  --color-navy:#2C2F36;    --color-navy-2:#1F2228;          /* charcoal grey — dark hero / header */
  --color-bg:#FFFFFF;      --color-surface:#F3F3F4;          /* light grey surfaces */
  --color-ink:#2C2F36;     --color-muted:#6B7079;            /* charcoal text / grey secondary */
  --color-success:#1E9E6A; --color-warning:#B5832B; --color-danger:#B3261E;
  --color-gold:#9C7A2E;    --line:#E4E4E7;
  --radius:18px; --radius-lg:24px;
  --shadow:0 10px 30px rgba(44,47,54,.08);
  --shadow-sm:0 4px 14px rgba(44,47,54,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--color-bg);color:var(--color-ink);
  font-family:Inter,'Segoe UI',system-ui,Arial,sans-serif;line-height:1.55;font-size:15px;
}
h1,h2,h3,.display{font-family:Poppins,Inter,sans-serif;font-weight:800;line-height:1.15;margin:0 0 .4em}
a{color:var(--color-primary);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1140px;margin:0 auto;padding:0 20px}
.muted{color:var(--color-muted)}
.tt .a{color:var(--color-accent)} .tt .b{color:var(--color-ink)}
.center{text-align:center}
.hide{display:none!important}

/* ── top nav ── */
.nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line)}
.nav .inner{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:Poppins;font-weight:800;color:var(--color-navy)}
.crest{width:34px;height:34px;border-radius:9px;background:
  radial-gradient(circle at 30% 30%,var(--color-primary),var(--color-navy));
  display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800}
.brand small{display:block;font-family:Inter;font-weight:500;color:var(--color-muted);font-size:11px}
.nav nav{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  font-family:Inter;font-weight:600;font-size:14px;padding:10px 18px;border-radius:11px;
  background:var(--color-primary);color:#fff;transition:.15s;text-decoration:none}
.btn:hover{background:var(--color-primary-dark);text-decoration:none}
.btn.accent{background:var(--color-accent)} .btn.accent:hover{background:var(--color-accent-dark)}
.btn.ghost{background:transparent;color:var(--color-navy);border:1.5px solid var(--line)}
.btn.ghost:hover{background:var(--color-surface)}
.btn:disabled{background:#C3C9DA;cursor:not-allowed}
.btn.sm{padding:7px 13px;font-size:13px;border-radius:9px}
:focus-visible{outline:3px solid rgba(123,30,43,.45);outline-offset:2px;border-radius:6px}

/* ── hero ── */
.hero{position:relative;background:linear-gradient(160deg,var(--color-navy),var(--color-navy-2));
  color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(circle,rgba(255,255,255,.5) 1px,transparent 1.4px);
  background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,#000,transparent)}
.hero .inner{position:relative;padding:64px 0 72px}
.hero h1{font-size:clamp(34px,5vw,54px);max-width:14ch}
.hero p{max-width:54ch;color:#C7CEE6;font-size:18px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* ── stat cards (alternating blue/orange) ── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:34px}
.stat{border-radius:var(--radius);padding:18px 20px;color:#fff}
.stat:nth-child(odd){background:linear-gradient(150deg,var(--color-primary),var(--color-primary-dark))}
.stat:nth-child(even){background:linear-gradient(150deg,var(--color-accent),var(--color-accent-dark))}
.stat .n{font-family:Poppins;font-weight:800;font-size:30px}
.stat .l{font-size:13px;opacity:.92}

/* ── sections / cards ── */
section{padding:54px 0}
.section-head{margin-bottom:24px}
.section-head h2{font-size:clamp(26px,3.4vw,36px)}
.grid{display:grid;gap:18px}
.grid.tenders{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.card{background:var(--color-bg);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px;box-shadow:var(--shadow-sm);transition:.18s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card.surface{background:var(--color-surface);border-color:transparent}
.card.dashed{border:2px dashed var(--color-accent);background:#FFF8F0}
.card h3{font-size:19px;margin-bottom:6px}
.card .ref{font-size:12px;color:var(--color-muted);letter-spacing:.4px}
.card .row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:13.5px}
.card .row span{color:var(--color-muted)}

/* ── status badges ── */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  padding:5px 11px;border-radius:999px;letter-spacing:.2px}
.badge::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.badge.open{background:rgba(30,158,106,.12);color:#157a51}
.badge.soon{background:rgba(247,148,29,.15);color:#b9650a}
.badge.closed{background:rgba(91,100,128,.14);color:#444c63}
.badge.opened{background:rgba(123,30,43,.12);color:#7B1E2B}
.badge.awarded{background:rgba(212,160,23,.16);color:#8a6810}
.badge.cancelled{background:rgba(214,69,69,.13);color:#a82f2f}

/* ── countdown ── */
.countdown{display:flex;gap:8px;margin-top:8px}
.countdown div{background:var(--color-navy);color:#fff;border-radius:9px;padding:6px 9px;
  text-align:center;min-width:46px}
.countdown b{font-family:Poppins;font-size:17px;display:block}
.countdown small{font-size:10px;opacity:.8;text-transform:uppercase;letter-spacing:.5px}

/* ── number step badges ── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.step .num{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-family:Poppins;font-weight:800;margin-bottom:10px;
  background:linear-gradient(150deg,var(--color-accent),var(--color-accent-dark))}

/* ── forms ── */
form .field{margin-bottom:14px}
label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:var(--color-navy)}
input,select,textarea{width:100%;font:inherit;padding:11px 13px;border:1.5px solid var(--line);
  border-radius:11px;background:#fff;color:var(--color-ink)}
input:focus,select:focus,textarea:focus{border-color:var(--color-primary);outline:none}
textarea{min-height:90px;resize:vertical}
.note{font-size:12.5px;color:var(--color-muted)}

/* ── tables ── */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
th{color:var(--color-muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px}
tbody tr:hover{background:var(--color-surface)}

/* ── alerts ── */
.alert{border-radius:12px;padding:12px 14px;margin:12px 0;font-size:14px}
.alert.ok{background:rgba(30,158,106,.1);color:#157a51}
.alert.err{background:rgba(214,69,69,.1);color:#a82f2f}
.alert.info{background:rgba(123,30,43,.08);color:#7B1E2B}

/* ── footer ── */
footer{background:var(--color-navy);color:#AEB6D4;padding:30px 0;font-size:13px;margin-top:40px}
footer .inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer b{color:#fff}

/* ── auth panel ── */
.auth-wrap{min-height:78vh;display:grid;place-items:center;padding:40px 0}
.auth{width:100%;max-width:430px}
.tabs{display:flex;gap:6px;margin-bottom:18px}
.tab{flex:1;text-align:center;padding:9px;border-radius:10px;cursor:pointer;font-weight:600;
  background:var(--color-surface);color:var(--color-muted)}
.tab.active{background:var(--color-primary);color:#fff}

/* ── portal layout ── */
.portal{display:grid;grid-template-columns:230px 1fr;gap:24px;padding:28px 0;min-height:80vh}
.side{position:sticky;top:84px;align-self:start;display:flex;flex-direction:column;gap:4px}
.side a{padding:10px 13px;border-radius:10px;color:var(--color-navy);font-weight:600;font-size:14px}
.side a:hover,.side a.active{background:var(--color-surface);text-decoration:none}
.panel{display:none} .panel.active{display:block}
@media(max-width:820px){.portal{grid-template-columns:1fr}.side{position:static;flex-direction:row;
  overflow-x:auto;border-bottom:1px solid var(--line);padding-bottom:8px}}
.watermark{position:fixed;right:-60px;bottom:-40px;font-family:Poppins;font-weight:800;
  font-size:240px;color:rgba(44,47,54,.03);pointer-events:none;z-index:-1;user-select:none}

/* ── responsive / mobile ── */
@media(max-width:820px){
  /* let the content column shrink so wide staff tables can scroll instead of overflowing the page */
  .portal>main{min-width:0}
  table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .watermark{display:none}
}
@media(max-width:680px){
  .grid{grid-template-columns:1fr !important}   /* stack multi-column form rows + cards on phones */
  .nav .inner{flex-wrap:wrap;height:auto;padding:10px 0;gap:10px}
  .display{font-size:30px}
  .hero .inner{padding:40px 0 48px}
  .container{padding-left:14px;padding-right:14px}
  .countdown b{font-size:18px}
}