/* board.css — Interview Status board (HUB TOOL ONLINE 7.22) */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: #0b1220; color: #e2e8f0; font-family: Inter, 'Segoe UI', system-ui, sans-serif; display: flex; flex-direction: column; overflow: hidden; }
.bd-head { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; padding: 14px 28px; background: #0f172a; border-bottom: 4px solid #dc2626; }
.bd-logo { height: 52px; background: transparent; filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff); }
.bd-t { flex: 1; min-width: 0; }
.bd-t h1 { margin: 0; font-size: clamp(1.5rem, 2.8vw, 2.6rem); font-weight: 900; letter-spacing: .5px; color: #fff; }
.bd-t p { margin: 2px 0 0; color: #94a3b8; font-size: clamp(.9rem, 1.3vw, 1.2rem); }
.bd-right { text-align: right; }
.bd-clock { font-size: clamp(1.6rem, 3vw, 2.8rem); font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.bd-sound { margin-top: 4px; border: 1px solid #334155; background: transparent; color: #94a3b8; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: .85rem; cursor: pointer; }
.bd-sound.on { border-color: #22c55e; color: #22c55e; } .bd-sound[hidden] { display: none; }
.bd-call { flex: 0 0 auto; margin: 14px 28px 0; padding: 18px 26px; border-radius: 18px; background: #f59e0b; color: #111827; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; font-size: clamp(1.4rem, 2.8vw, 2.8rem); }
.bd-call[hidden] { display: none; }
.bd-call b { font-weight: 900; }
.bd-call b.iv { background: #111827; color: #fbbf24; padding: 2px 16px; border-radius: 12px; }
.bd-call-k { font-size: .45em; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; background: #111827; color: #fff; padding: 6px 12px; border-radius: 999px; align-self: center; }
.bd-call.flash { animation: bdFlash .9s ease-in-out 4; }
@keyframes bdFlash { 0%, 100% { background: #f59e0b; } 50% { background: #fde68a; } }
.bd-grid { --u: 18px; flex: 1 1 auto; min-height: 0; display: grid; gap: 18px; padding: 16px 28px; align-content: stretch; }
.bd-card { background: #111a2e; border: 3px solid #1e293b; border-radius: 20px; padding: calc(var(--u) * .9) calc(var(--u) * 1.1); display: flex; flex-direction: column; gap: calc(var(--u) * .45); min-width: 0; overflow: hidden; }
.bd-card header { display: flex; align-items: center; gap: 10px; }
.bd-iv-l { font-size: calc(var(--u) * .62); text-transform: uppercase; letter-spacing: 1px; color: #64748b; font-weight: 800; }
.bd-card h2 { margin: 0; font-size: calc(var(--u) * 1.75); line-height: 1.05; color: #fff; font-weight: 900; }
.bd-dot { width: calc(var(--u) * .7); height: calc(var(--u) * .7); border-radius: 50%; background: #64748b; flex: 0 0 auto; }
.bd-st { font-weight: 900; font-size: calc(var(--u) * .85); text-transform: uppercase; letter-spacing: .8px; color: #94a3b8; }
.bd-cand { margin-top: auto; background: #0b1220; border-radius: 14px; padding: calc(var(--u) * .6) calc(var(--u) * .8); display: grid; gap: 4px; }
.bd-cand small { color: #64748b; font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * .55); letter-spacing: .6px; }
.bd-cand b { font-size: calc(var(--u) * 1.5); line-height: 1.1; color: #fff; }
.bd-cand span { color: #94a3b8; font-variant-numeric: tabular-nums; font-size: calc(var(--u) * .8); }
.bd-cand.empty { color: #475569; font-size: calc(var(--u) * .85); }
.bd-card.ongoing { border-color: #16a34a; } .bd-card.ongoing .bd-dot { background: #22c55e; animation: bdPulse 1.6s infinite; } .bd-card.ongoing .bd-st { color: #4ade80; }
.bd-card.called { border-color: #f59e0b; animation: bdCard 1s ease-in-out infinite; } .bd-card.called .bd-dot { background: #f59e0b; } .bd-card.called .bd-st { color: #fbbf24; }
.bd-card.called .bd-cand { background: #f59e0b; } .bd-card.called .bd-cand b { color: #111827; } .bd-card.called .bd-cand small, .bd-card.called .bd-cand span { color: #3f2a00; }
@keyframes bdCard { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); border-color: #f59e0b; } 50% { box-shadow: 0 0 40px 6px rgba(245,158,11,.55); border-color: #fde68a; } }
.bd-card.completed .bd-dot { background: #3b82f6; } .bd-card.completed .bd-st { color: #93c5fd; }
@keyframes bdPulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.6); } 100% { box-shadow: 0 0 0 12px rgba(74,222,128,0); } }
.bd-empty { color: #64748b; font-size: 1.3rem; padding: 40px; text-align: center; grid-column: 1 / -1; }
.bd-foot { flex: 0 0 auto; display: flex; align-items: center; background: #dc2626; color: #fff; min-height: 58px; overflow: hidden; }
.bd-wait { flex: 0 0 auto; background: #0f172a; color: #cbd5e1; padding: 0 22px; align-self: stretch; display: flex; align-items: center; gap: 8px; font-size: 1.15rem; font-weight: 700; }
.bd-wait b { color: #fff; font-size: 1.6rem; }
.bd-ticker { flex: 1 1 auto; overflow: hidden; white-space: nowrap; font-size: clamp(1.05rem, 1.7vw, 1.6rem); font-weight: 700; position: relative; align-self: stretch; display: flex; align-items: center; }
.bd-tk-move { position: absolute; left: 0; white-space: nowrap; will-change: transform; animation: bdTicker 40s linear infinite; }
@keyframes bdTicker { from { transform: translateX(var(--tk-from, 100vw)); } to { transform: translateX(-100%); } }
.bd-off { flex: 0 0 auto; padding: 0 16px; background: #f59e0b; color: #111827; align-self: stretch; display: flex; align-items: center; font-weight: 800; }
.bd-off[hidden] { display: none; }
@media (max-width: 640px) { .bd-head, .bd-grid { padding: 10px 14px; } .bd-call { margin: 10px 14px 0; } .bd-logo { height: 38px; } body { overflow: auto; } }

/* =====================================================================
   7.44 — light (white) board · completed list on the right · result QR
   ===================================================================== */
body { background: #eef2f7; color: #0f172a; }
.bd-head { background: #fff; border-bottom: 5px solid #c8102e; box-shadow: 0 4px 18px -10px rgba(15,23,42,.35); }
.bd-logo { filter: none; }
.bd-t h1 { color: #0b2a5b; }
.bd-t p { color: #64748b; }
.bd-clock { color: #0b2a5b; }
.bd-sound { border-color: #cbd5e1; color: #475569; }
.bd-wrap { flex: 1 1 auto; min-height: 0; display: flex; }
.bd-wrap .bd-grid { flex: 1 1 auto; }
.bd-card { background: #fff; border: 3px solid #e2e8f0; box-shadow: 0 10px 26px -18px rgba(15,23,42,.45); }
.bd-iv-l { color: #94a3b8; }
.bd-card h2 { color: #0b2a5b; }
.bd-st { color: #64748b; }
.bd-cand { background: #f1f5f9; }
.bd-cand small { color: #64748b; }
.bd-cand b { color: #0f172a; }
.bd-cand span { color: #475569; }
.bd-cand.empty { color: #94a3b8; background: #f8fafc; }
.bd-card.ongoing { border-color: #16a34a; background: linear-gradient(180deg, #f0fdf4, #fff 45%); } .bd-card.ongoing .bd-st { color: #15803d; }
.bd-card.called { background: #fffbeb; } .bd-card.called .bd-st { color: #b45309; }
.bd-card.completed { border-color: #93c5fd; } .bd-card.completed .bd-st { color: #1d4ed8; }
.bd-empty { color: #64748b; }
.bd-wait { background: #0b2a5b; color: #dbeafe; }
.bd-foot { background: #c8102e; min-height: 64px; }

/* completed interviews — 1/4 of the screen on the right */
.bd-done { flex: 0 0 25%; max-width: 25%; margin: 16px 28px 16px 0; background: #fff; border-radius: 20px; border: 3px solid #bfdbfe; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 26px -18px rgba(15,23,42,.45); }
.bd-done[hidden] { display: none; }
.bd-done header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; background: #1d4ed8; color: #fff; }
.bd-done header span { font-weight: 900; text-transform: uppercase; letter-spacing: .8px; font-size: clamp(.9rem, 1.2vw, 1.25rem); }
.bd-done header b { background: #fff; color: #1d4ed8; border-radius: 999px; padding: 2px 14px; font-size: clamp(1rem, 1.4vw, 1.5rem); }
.bd-done ol { list-style: none; margin: 0; padding: 6px 10px; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.bd-done ol.in li { animation: bdIn .45s ease both; }
.bd-done ol.in li:nth-child(2) { animation-delay: .03s; } .bd-done ol.in li:nth-child(3) { animation-delay: .06s; } .bd-done ol.in li:nth-child(4) { animation-delay: .09s; }
@keyframes bdIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.bd-done li { display: flex; align-items: center; gap: 10px; height: 54px; border-bottom: 1px solid #eef2f7; }
.bd-done li i { font-style: normal; flex: 0 0 32px; height: 32px; border-radius: 50%; background: #dbeafe; color: #1d4ed8; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: .85rem; }
.bd-done li div { min-width: 0; }
.bd-done li b { display: block; font-size: clamp(.95rem, 1.15vw, 1.3rem); color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-done li small { display: block; color: #64748b; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-done-pg { padding: 8px 16px; font-size: .85rem; font-weight: 700; color: #64748b; display: flex; justify-content: space-between; align-items: center; min-height: 34px; border-top: 1px solid #eef2f7; }
.bd-done-pg span { display: flex; gap: 5px; }
.bd-done-pg u { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; text-decoration: none; }
.bd-done-pg u.on { background: #1d4ed8; width: 22px; border-radius: 5px; }

/* "Check my result" QR at the bottom */
.bd-qr { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; gap: 12px; background: #fff; color: #0b2a5b; padding: 8px 18px 8px 10px; }
.bd-qr[hidden] { display: none; }
.bd-qr-c { width: 104px; height: 104px; margin-top: -48px; background: #fff; border: 4px solid #fff; border-radius: 12px; box-shadow: 0 6px 18px rgba(15,23,42,.35); }
.bd-qr-c svg { width: 100%; height: 100%; display: block; }
.bd-qr-t b { display: block; font-size: clamp(1rem, 1.4vw, 1.4rem); font-weight: 900; }
.bd-qr-t span { font-size: .8rem; color: #64748b; }
@media (orientation: portrait) { .bd-done { flex-basis: 34%; max-width: 34%; } }
@media (max-width: 900px) { .bd-wrap { flex-direction: column; } .bd-done { max-width: none; margin: 0 14px 10px; flex: 0 0 auto; max-height: 40vh; } }

/* =====================================================================
   7.53 — FOR LINE-UP INTERVIEW · only active interviewers · QR window
   7.54 — no numbers in the line-up (a simple dot instead)
   ===================================================================== */
.bd-done { flex: 0 0 32%; max-width: 32%; border-color: #c7d2fe; }
.bd-done header { background: #0b2a5b; }
.bd-done header b { color: #0b2a5b; }
.bd-done ol { display: grid; align-content: start; gap: 0 18px; }
.bd-done li { height: 62px; }
.bd-done li i { flex: 0 0 12px !important; width: 12px; height: 12px !important; background: #93c5fd !important; }
.bd-done li.called i { background: #f59e0b !important; } .bd-done li.ongoing i { background: #16a34a !important; }
.bd-done li div { flex: 1 1 auto; }
.bd-done li small .ag { color: #b45309; font-weight: 800; }
.bd-done li em { font-style: normal; flex: 0 0 auto; font-size: .78rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.bd-done li .bd-st-c { background: #fef3c7; color: #92400e; animation: bdBlink 1s ease-in-out infinite; }
.bd-done li .bd-st-o { background: #dcfce7; color: #166534; }
.bd-done li.called { background: #fffbeb; }
.bd-done li.bd-none { height: auto; padding: 30px 10px; color: #94a3b8; font-size: 1.1rem; border: 0; justify-content: center; }
@keyframes bdBlink { 50% { opacity: .55; } }
body.bd-noiv .bd-grid { display: none !important; }
body.bd-noiv .bd-done { flex: 1 1 auto; max-width: none; margin: 16px 28px; }
body.bd-noiv .bd-done li { height: 72px; }
body.bd-noiv .bd-done li b { font-size: clamp(1.1rem, 1.6vw, 1.7rem); }
body.bd-noiv .bd-done li small { font-size: clamp(.85rem, 1vw, 1.05rem); }
body.bd-noiv .bd-done header span { font-size: clamp(1.1rem, 1.6vw, 1.7rem); }
.bd-cand .bd-ag { font-style: normal; font-weight: 800; color: #b45309; font-size: calc(var(--u) * .8); }
.bd-card.called .bd-cand .bd-ag { color: #3f2a00; }
.bd-call-ag { font-size: .55em; font-weight: 800; background: #111827; color: #fde68a; padding: 4px 12px; border-radius: 999px; align-self: center; }
.bd-qr { display: none !important; }
.bd-qrm { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,.55); animation: bdFade .35s ease; }
.bd-qrm[hidden] { display: none; }
.bd-qrm-box { background: #fff; border-radius: 26px; padding: clamp(18px, 3vh, 34px) clamp(22px, 4vw, 48px); text-align: center; color: #0b2a5b; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); border-top: 8px solid #c8102e; max-width: 92vw; }
.bd-qrm-box h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 3.4vw, 3rem); font-weight: 900; }
.bd-qrm-c { width: min(52vh, 70vw); aspect-ratio: 1; margin: 0 auto; }
.bd-qrm-c svg { width: 100%; height: 100%; display: block; }
.bd-qrm-box p { margin: 14px 0 4px; font-size: clamp(1.1rem, 2vw, 1.8rem); font-weight: 800; color: #0f172a; }
.bd-qrm-box small { color: #64748b; font-size: clamp(.85rem, 1.2vw, 1.1rem); }
@keyframes bdFade { from { opacity: 0; } }
@media (max-width: 900px) { .bd-done, body.bd-noiv .bd-done { max-width: none; margin: 0 14px 10px; } }

/* =====================================================================
   7.68 / 7.69 — cards: candidate first, nothing cut · Enova colours (navy blue + red), no yellow
   ===================================================================== */
.bd-card.v68 { display: grid; grid-template-rows: auto auto auto 1fr; gap: calc(var(--u) * .5); padding: calc(var(--u) * .85) calc(var(--u) * 1) !important; overflow: hidden; }
.bd-card.v68 .bd-c-top { display: flex; align-items: center; gap: calc(var(--u) * .45); min-width: 0; }
.bd-card.v68 .bd-st { font-size: calc(var(--u) * .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-card.v68 .bd-cn { margin: 0; font-size: calc(var(--u) * 1.55); line-height: 1.08; font-weight: 900; color: #0b1f4d; text-transform: uppercase;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; min-width: 0; }
.bd-card.v68 .bd-cm { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .25) calc(var(--u) * .7); align-items: baseline; min-width: 0; }
.bd-card.v68 .bd-pp { font-size: calc(var(--u) * .78); color: #475569; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-card.v68 .bd-pp b { color: #0f172a; }
.bd-card.v68 .bd-ag { font-style: normal; font-weight: 800; color: #c8102e; font-size: calc(var(--u) * .78); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-card.v68 .bd-to { align-self: end; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; border-radius: calc(var(--u) * .6); padding: calc(var(--u) * .55) calc(var(--u) * .75); min-width: 0; background: #eef2f9; }
.bd-card.v68 .bd-to small { font-size: calc(var(--u) * .52); font-weight: 800; text-transform: uppercase; letter-spacing: .6px; opacity: .8; }
.bd-card.v68 .bd-to b { font-size: calc(var(--u) * 1.15); line-height: 1.1; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-card.v68 .bd-to em { font-style: normal; font-size: calc(var(--u) * .75); font-weight: 800; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* CALLED = Enova navy with a red edge */
.bd-card.v68.called { background: #fff !important; border-color: #1d4ed8 !important; animation: bdCall69 1.4s ease-in-out infinite !important; }
.bd-card.v68.called .bd-dot { background: #c8102e !important; }
.bd-card.v68.called .bd-st { color: #c8102e !important; }
.bd-card.v68.called .bd-to { background: linear-gradient(110deg, #0b2a5b 0%, #1d4ed8 100%); border-left: 6px solid #c8102e; color: #fff; }
.bd-card.v68.called .bd-to b { color: #fff; } .bd-card.v68.called .bd-to em { color: #bfdbfe; }
/* ONGOING = green */
.bd-card.v68.ongoing .bd-to { background: #dcfce7; } .bd-card.v68.ongoing .bd-to b { color: #14532d; } .bd-card.v68.ongoing .bd-to em { color: #15803d; }
@keyframes bdCall69 { 0%, 100% { box-shadow: 0 0 0 0 rgba(29,78,216,0); border-color: #1d4ed8; } 50% { box-shadow: 0 0 34px 4px rgba(200,16,46,.35); border-color: #c8102e; } }
/* banner: navy → blue with red badge (no yellow) */
.bd-call { background: linear-gradient(110deg, #0b2a5b 0%, #1d4ed8 70%, #2563eb 100%) !important; color: #fff !important; border-left: 10px solid #c8102e; align-items: center !important; font-size: clamp(1.2rem, 2.3vw, 2.4rem) !important; }
.bd-call.flash { animation: bdFlash69 .9s ease-in-out 4 !important; }
@keyframes bdFlash69 { 0%, 100% { filter: none; } 50% { filter: brightness(1.25); } }
.bd-call .bd-call-n { color: #fff; max-width: 100%; overflow-wrap: anywhere; }
.bd-call-k { background: #c8102e !important; color: #fff !important; }
.bd-call-ag { background: rgba(255,255,255,.14) !important; color: #fff !important; }
.bd-call-go { color: #dbeafe; }
.bd-call b.iv { background: #fff !important; color: #c8102e !important; }
.bd-call-pos { font-size: .5em; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; background: #c8102e; color: #fff; padding: 4px 12px; border-radius: 999px; }
/* line-up: called = blue / red, no yellow */
.bd-done li.called { background: #eff6ff !important; }
.bd-done li.called i { background: #c8102e !important; }
.bd-done li .bd-st-c { background: #1d4ed8 !important; color: #fff !important; }
.bd-done li small .ag { color: #c8102e !important; }
.bd-done li { gap: 8px; }
.bd-done li div { min-width: 0; flex: 1 1 auto; }
.bd-done li em { max-width: 42% !important; flex: 0 1 auto !important; }

/* 7.77 — Online Assessment Hub brand logo (Enova logo is used only on generated exams / documents) */
img.hub-brand-img{background:transparent!important;padding:0!important;box-shadow:none!important;filter:drop-shadow(0 1px 3px rgba(0,0,0,.25))!important;border-radius:50%!important;aspect-ratio:1/1;width:auto;object-fit:contain}
.hub-brand-full{background:#fff!important;border-radius:18px!important;padding:10px 14px!important;filter:none!important;box-shadow:0 8px 30px rgba(0,0,0,.18)!important}
.hub-brand-full img{height:auto!important;width:220px!important;max-width:100%}
img.hub-brand-loader{width:min(260px,60vw);height:auto;display:block;margin:0 auto 14px;filter:drop-shadow(0 6px 20px rgba(0,0,0,.25))}
@media (max-width:640px){.hub-brand-full img{width:160px!important}}