:root {
  --canqate-navy: #0b2545;
  --canqate-teal: #0d7377;
  --canqate-gold: #c9a227;
  --canqate-bg: #f5f7fa;
  --canqate-card: #ffffff;
  --canqate-text: #1b2733;
  --canqate-muted: #5a6b7b;
  --canqate-border: #dfe6ec;
  --canqate-success: #1b8a5a;
  --canqate-warn: #b7791f;
  --canqate-danger: #c0392b;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(11,37,69,0.08);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--canqate-bg);
  color: var(--canqate-text);
  line-height: 1.5;
}
a { color: var(--canqate-teal); }
.topbar {
  background: linear-gradient(120deg, var(--canqate-navy), #123a63);
  color: #fff;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.topbar .brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.15rem; letter-spacing: .3px; }
.topbar .brand .brand-logo { width: 34px; height: 34px; color: var(--canqate-gold); flex-shrink: 0; }
.topbar .brand .brand-logo svg { width: 100%; height: 100%; }
.topbar .brand small, .topbar .brand-text small { display: block; font-weight: 400; font-size: .72rem; color: #b9c8db; }
.topbar nav a { color: #dce7f5; text-decoration: none; margin-left: 18px; font-size: .9rem; font-weight: 600; }
.topbar nav a:hover { color: var(--canqate-gold); }
.topbar nav a.nav-primary { color: var(--canqate-gold); }

/* NAC (National Accreditation Council, Guyana) accreditation seal --
   shown alongside the CANQATE brand as a partner/accrediting-body mark. */
.nac-logo { height: 58px; width: auto; flex-shrink: 0; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.nac-logo.small { height: 34px; }
.partner-logo { height: 44px; width: auto; flex-shrink: 0; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); background: #fff; border-radius: 6px; padding: 4px 8px; }
.topbar-brands { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.topbar-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; flex-wrap: wrap; }
.topbar-nav a { color: #dce7f5; text-decoration: none; font-size: .93rem; white-space: nowrap; padding: 6px 0; position: relative; }
.topbar-nav a:hover { color: var(--canqate-gold); }
.topbar-nav a.active { color: var(--canqate-gold); font-weight: 600; }
.topbar-nav a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2.5px; background: var(--canqate-gold); border-radius: 2px; }
@media (max-width: 820px) { .topbar-nav { width: 100%; margin-left: 0; gap: 16px; } }
.topbar-divider { width: 1px; height: 30px; background: rgba(255,255,255,.25); }

.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at top right, #123a63, var(--canqate-navy) 65%);
  color: #fff;
  padding: 64px 28px 72px;
  text-align: center;
}
.hero-graphic { position: absolute; top: 0; right: 0; width: 46%; max-width: 620px; height: 100%; opacity: .55; pointer-events: none; }
.hero-content { position: relative; z-index: 1; }
.hero h1 { font-size: 2.1rem; max-width: 780px; margin: 0 auto 12px; }
/* The conference theme reads as a single line.
   clamp() scales it with the viewport so it stays on one line on a phone
   as well as a desktop; `nowrap` alone would simply overflow. The
   horizontal scroll fallback below only ever engages on extremely narrow
   screens, where shrinking further would make it unreadable. */
.hero p.theme {
  font-style: italic;
  color: #cfe0f2;
  margin: 0 auto 22px;
  max-width: none;
  white-space: nowrap;
  font-size: clamp(0.62rem, 1.72vw, 1.05rem);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.hero p.theme::-webkit-scrollbar { display: none; }
.hero .meta { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin: 24px 0 32px; font-size: .92rem; color: #dce7f5; }
.hero .meta-item { display: flex; align-items: center; gap: 10px; text-align: left; }
.hero .meta-item .meta-icon { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(201,162,39,.5); color: var(--canqate-gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hero .meta-item .meta-icon svg { width: 17px; height: 17px; }
.hero .meta-item b { color: #fff; display: block; font-size: .95rem; }
.hero .meta-item span { color: #b9c8db; font-size: .8rem; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--canqate-gold);
  color: #1b2733;
  border: none;
  padding: 13px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform .1s ease, box-shadow .1s ease;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(201,162,39,.35); }
.btn.secondary { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.btn.outline { background: transparent; color: var(--canqate-teal); border: 1px solid var(--canqate-teal); }
.btn.ghost { background: transparent; color: var(--canqate-muted); border: 1px solid var(--canqate-border); }
.btn.danger { background: var(--canqate-danger); color: #fff; }
.btn.small { padding: 7px 16px; font-size: .82rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.container { max-width: 980px; margin: 0 auto; padding: 40px 20px; }
.wide { max-width: 1180px; }

.section-title { font-size: 1.3rem; margin-bottom: 4px; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.section-title-row .section-title { margin-bottom: 4px; }
.section-sub { color: var(--canqate-muted); margin-top: 0; margin-bottom: 24px; font-size: .92rem; }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin: 28px 0; }
.info-card {
  background: var(--canqate-card);
  border: 1px solid var(--canqate-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}
.info-card h3 { margin: 0 0 6px; font-size: .95rem; color: var(--canqate-navy); }
.info-card p { margin: 0; color: var(--canqate-muted); font-size: .85rem; }

.step-card { position: relative; text-align: center; padding-top: 26px; }
.step-card .step-num {
  position: absolute; top: -10px; left: 14px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--canqate-gold); color: #1b2733; font-weight: 800; font-size: .78rem;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(201,162,39,.4);
}
.step-card .icon-badge { margin: 0 auto 12px; }
.step-card h3 { font-size: .92rem; }
.step-card p { font-size: .82rem; }

.fee-table-wrap { border: 1px solid var(--canqate-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
table.fee-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
table.fee-table thead th {
  background: var(--canqate-navy); color: #fff; text-align: left; padding: 12px 16px;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
table.fee-table thead th:not(:first-child), table.fee-table tbody td:not(:first-child) { text-align: right; }
table.fee-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--canqate-border); }
table.fee-table tbody tr:last-child td { border-bottom: none; }
table.fee-table tbody tr:nth-child(even) { background: #f7f9fc; }
table.fee-table .fee-cat-name { font-weight: 700; color: var(--canqate-navy); }
table.fee-table .fee-cat-sub { color: var(--canqate-muted); font-weight: 400; }
table.fee-table .fee-cat-sub::before { content: '\00b7'; margin: 0 6px; }

.notice-bar { display: flex; align-items: center; gap: 10px; background: #e6f1fb; color: #1c5c8a; border-radius: 8px; padding: 12px 16px; font-size: .85rem; margin-top: 14px; }
.notice-bar svg { width: 18px; height: 18px; flex-shrink: 0; }



.card {
  background: var(--canqate-card);
  border: 1px solid var(--canqate-border);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
  margin-bottom: 22px;
}

.steps { display: flex; gap: 6px; margin-bottom: 28px; flex-wrap: wrap; }
.step-chip {
  flex: 1; min-width: 90px; text-align: center; padding: 9px 6px; border-radius: 8px;
  background: #eef2f6; color: var(--canqate-muted); font-size: .74rem; font-weight: 600; border: 1px solid var(--canqate-border);
}
.step-chip.active { background: var(--canqate-navy); color: #fff; border-color: var(--canqate-navy); }
.step-chip.done { background: #e4f4ec; color: var(--canqate-success); border-color: #bfe6d1; }

.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 5px; color: var(--canqate-navy); }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--canqate-border); border-radius: 7px; font-size: .92rem; background: #fff; color: var(--canqate-text);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: 2px solid var(--canqate-teal); border-color: var(--canqate-teal); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-hint { font-size: .76rem; color: var(--canqate-muted); margin-top: 4px; }

/* Wizard autosave status line, above the active step's card. */
.save-indicator { text-align: right; font-size: .76rem; color: var(--canqate-muted); min-height: 1.1em; margin: -6px 0 10px; }
.save-indicator.saved::before { content: "\2713 "; color: #2e8b57; }
.resume-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: #eef4ff; border: 1px solid #cfe0fb; border-radius: 8px; padding: 14px 18px; margin-bottom: 18px; }
.resume-banner p { margin: 0; font-size: .9rem; }
.resume-banner .btn-row { display: flex; gap: 10px; flex-shrink: 0; }

.choice-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.choice-btn {
  flex: 1; min-width: 140px; padding: 16px; border-radius: var(--radius); border: 2px solid var(--canqate-border);
  background: #fff; cursor: pointer; text-align: center; font-weight: 600; color: var(--canqate-text); font-size: .92rem;
}
.choice-btn:hover { border-color: var(--canqate-teal); }
.choice-btn.selected { border-color: var(--canqate-teal); background: #ecf9f8; color: var(--canqate-teal); }

.category-btn {
  display: block; width: 100%; text-align: left; padding: 14px 16px; border-radius: var(--radius);
  border: 2px solid var(--canqate-border); background: #fff; cursor: pointer; margin-bottom: 10px;
}
.category-btn .cat-name { font-weight: 700; color: var(--canqate-navy); }
.category-btn .cat-fee { float: right; font-weight: 700; color: var(--canqate-teal); }
.category-btn .cat-desc { display: block; color: var(--canqate-muted); font-size: .8rem; margin-top: 2px; }
.category-btn.selected { border-color: var(--canqate-teal); background: #ecf9f8; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.badge.active { background: #e4f4ec; color: var(--canqate-success); }
.badge.warn { background: #fdf3e0; color: var(--canqate-warn); }
.badge.danger { background: #fbe9e7; color: var(--canqate-danger); }
.badge.muted { background: #eef2f6; color: var(--canqate-muted); }

/* --- Password fields: reveal toggle + live match feedback --------------- */
.password-wrap { position: relative; display: block; }
.password-wrap input { width: 100%; padding-right: 46px; }
.password-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0;
  border: none; background: transparent; cursor: pointer;
  color: var(--canqate-muted);
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.password-toggle:hover { color: var(--canqate-navy); background: #eef2f6; }
.password-toggle svg { width: 19px; height: 19px; }
/* Struck through when the password is visible, so the icon reads as a
   state rather than just a button. */
.password-toggle.revealed { color: var(--canqate-navy); }
.password-toggle.revealed::after {
  content: ''; position: absolute; left: 7px; right: 7px; top: 50%;
  height: 1.6px; background: currentColor; transform: rotate(-45deg);
}

input.field-match { border-color: var(--canqate-success) !important; background: #f2fbf6; }
input.field-mismatch { border-color: var(--canqate-warn) !important; background: #fffaf1; }

.password-status { font-size: .82rem; margin: -6px 0 14px; min-height: 1em; }
.password-status.ok { color: var(--canqate-success); font-weight: 600; }
.password-status.warn { color: var(--canqate-warn); }

.delegate-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.delegate-card { border: 1px solid var(--canqate-border); border-radius: var(--radius); padding: 14px 16px; background: #fbfcfe; }
.delegate-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.delegate-name { font-weight: 700; font-size: .95rem; }
.delegate-sub { font-size: .8rem; color: var(--canqate-muted); }
.delegate-card .attendance-checklist { margin-bottom: 0; }

.attendance-checklist { margin-bottom: 22px; }
.attendance-check-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: .9rem; }
.attendance-check-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--canqate-success); }
.attendance-check-time { color: var(--canqate-muted); font-size: .78rem; margin-left: auto; }

.badge.info { background: #e6f1fb; color: #1c5c8a; }

.participant-card { border: 1px solid var(--canqate-border); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; background: #fbfcfe; position: relative; }
.participant-card h4 { margin: 0 0 12px; color: var(--canqate-navy); font-size: .95rem; }
.participant-card .remove-btn { position: absolute; top: 14px; right: 14px; background: none; border: none; color: var(--canqate-danger); cursor: pointer; font-size: .8rem; }
.verify-box { margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: #eef2f6; font-size: .84rem; }

.dietary-section { border-top: 1px dashed var(--canqate-border); padding-top: 12px; }
.dietary-section h5 { margin: 0; color: var(--canqate-navy); font-size: .88rem; }
.dietary-option-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--canqate-border); border-radius: 999px; font-size: .8rem; cursor: pointer; background: #fff; }
.dietary-option-chip input { margin: 0; }

table.data-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
table.data-table th, table.data-table td { padding: 9px 10px; border-bottom: 1px solid var(--canqate-border); text-align: left; }
table.data-table th { color: var(--canqate-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; }

.summary-total { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; margin-top: 10px; border-top: 2px solid var(--canqate-navy); font-size: 1.15rem; font-weight: 800; color: var(--canqate-navy); }

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: .87rem; }
.alert.info { background: #e6f1fb; color: #1c5c8a; }
.alert.success { background: #e4f4ec; color: var(--canqate-success); }
.alert.warn { background: #fdf3e0; color: var(--canqate-warn); }
.alert.danger { background: #fbe9e7; color: var(--canqate-danger); }

.wizard-actions { display: flex; justify-content: space-between; margin-top: 26px; }

footer.site-footer {
  text-align: center; padding: 32px 20px; font-size: .78rem;
  background: linear-gradient(120deg, var(--canqate-navy), #123a63); color: #b9c8db;
}
footer.site-footer .footer-logo { width: 36px; height: 36px; margin: 0 auto 12px; color: var(--canqate-gold); }
footer.site-footer .footer-logo svg { width: 100%; height: 100%; }
footer.site-footer b { color: #fff; }
footer.site-footer .footer-powered-by { margin-top: 18px; }
footer.site-footer .footer-powered-by img { height: 64px; width: auto; opacity: 1; }

/* Admin */
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar { width: 220px; background: var(--canqate-navy); color: #fff; padding: 22px 16px; flex-shrink: 0; }
.admin-sidebar .brand { font-weight: 700; margin-bottom: 24px; font-size: 1rem; }
.admin-sidebar a { display: block; color: #cfe0f2; text-decoration: none; padding: 9px 10px; border-radius: 7px; font-size: .87rem; margin-bottom: 4px; }
.admin-sidebar a.active, .admin-sidebar a:hover { background: rgba(255,255,255,.12); color: #fff; }
.admin-main { flex: 1; padding: 28px 32px; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 26px; }
.kpi-card { background: #fff; border: 1px solid var(--canqate-border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.kpi-card.clickable { cursor: pointer; transition: transform .1s ease, box-shadow .15s ease, border-color .15s ease; text-align: left; width: 100%; font: inherit; }
.kpi-card.clickable:hover { border-color: var(--canqate-navy); box-shadow: 0 4px 14px rgba(15,45,80,.12); transform: translateY(-1px); }
.kpi-card.clickable:focus-visible { outline: 2px solid var(--canqate-navy); outline-offset: 2px; }

.breadcrumb-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .82rem; color: var(--canqate-muted); margin-bottom: 16px; }
.breadcrumb-bar a { color: var(--canqate-navy); text-decoration: none; }
.breadcrumb-bar a:hover { text-decoration: underline; }
.breadcrumb-bar .sep { color: var(--canqate-border); }
.breadcrumb-bar .current { color: var(--canqate-muted); font-weight: 600; }

/* ---------------------------------------------------------------------
   Dashboard v2 -- icon-badge stat cards, highlight cards with trend,
   membership breakdown progress bars, review alert bar, activity chart.
--------------------------------------------------------------------- */
.icon-badge { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-badge svg { width: 20px; height: 20px; }
.badge-purple { background: #f1ecfb; color: #7c4fd1; }
.badge-green  { background: #e6f6ee; color: #1b8a5a; }
.badge-blue   { background: #e8f1fc; color: #2266c4; }
.badge-orange { background: #fdf1e2; color: #c9860f; }
.badge-red    { background: #fbe9e7; color: var(--canqate-danger); }
.badge-gray   { background: #eef2f6; color: var(--canqate-muted); }
.badge-teal   { background: #e3f5f4; color: var(--canqate-teal); }
.badge-indigo { background: #eaecfb; color: #4a54c9; }

.stat-card { display: flex; align-items: flex-start; gap: 12px; }
.stat-card .stat-body .val { font-size: 1.5rem; font-weight: 800; color: var(--canqate-navy); line-height: 1.2; }
.stat-card .stat-body .lbl { color: var(--canqate-text); font-size: .82rem; font-weight: 600; margin-top: 1px; }
.stat-card .stat-body .sub { color: var(--canqate-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }

.highlight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 26px; }
.highlight-card { display: flex; align-items: flex-start; gap: 14px; }
.highlight-card .icon-badge { width: 46px; height: 46px; }
.highlight-card .icon-badge svg { width: 22px; height: 22px; }
.highlight-card .hl-body .lbl { color: var(--canqate-muted); font-size: .82rem; margin-bottom: 2px; }
.highlight-card .hl-body .val { font-size: 1.6rem; font-weight: 800; color: var(--canqate-navy); line-height: 1.2; }
.highlight-card .hl-trend { font-size: .76rem; margin-top: 6px; color: var(--canqate-muted); }
.highlight-card .hl-trend.up { color: var(--canqate-success); }
.highlight-card .hl-trend.down { color: var(--canqate-danger); }

.dash-lower-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .dash-lower-grid { grid-template-columns: 1fr; } }

.panel-card { background: #fff; border: 1px solid var(--canqate-border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.panel-card .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel-card .panel-head h3 { margin: 0; font-size: 1.02rem; color: var(--canqate-navy); }
.panel-card .panel-head a.view-all { font-size: .8rem; color: var(--canqate-navy); text-decoration: none; font-weight: 600; }
.panel-card .panel-head a.view-all:hover { text-decoration: underline; }

.breakdown-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; cursor: pointer; background: none; border: none; width: 100%; text-align: left; font: inherit; padding: 0; }
.breakdown-row:last-child { margin-bottom: 0; }
.breakdown-row .icon-badge { width: 30px; height: 30px; }
.breakdown-row .icon-badge svg { width: 15px; height: 15px; }
.breakdown-row .bd-main { flex: 1; min-width: 0; }
.breakdown-row .bd-top { display: flex; justify-content: space-between; font-size: .84rem; margin-bottom: 5px; }
.breakdown-row .bd-top .bd-label { color: var(--canqate-text); font-weight: 600; }
.breakdown-row .bd-top .bd-count { color: var(--canqate-muted); }
.breakdown-row .bd-pct { font-size: .78rem; font-weight: 700; width: 38px; text-align: right; flex-shrink: 0; }
.progress-track { height: 6px; border-radius: 4px; background: #eef1f5; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 4px; }

.review-alert-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #eaf2fc; border: 1px solid #cfe0f7; border-radius: var(--radius); padding: 14px 18px; margin-top: 18px; }
.review-alert-bar .ra-left { display: flex; align-items: center; gap: 10px; color: #1c5c8a; font-size: .88rem; }

.chart-wrap { width: 100%; }
.chart-wrap svg { width: 100%; height: auto; display: block; }
.chart-axis-labels { display: flex; justify-content: space-between; font-size: .68rem; color: var(--canqate-muted); margin-top: 4px; }

.help-panel { margin-top: 26px; }
.help-panel > .panel-head h3 { display: flex; align-items: center; gap: 8px; }
.help-item { border-top: 1px solid var(--canqate-border); }
.help-item:first-of-type { border-top: none; }
.help-item summary {
  cursor: pointer; padding: 12px 2px; font-weight: 600; font-size: .88rem; color: var(--canqate-navy);
  display: flex; align-items: center; justify-content: space-between; list-style: none;
}
.help-item summary::-webkit-details-marker { display: none; }
.help-item summary::after { content: '+'; font-size: 1.1rem; color: var(--canqate-muted); font-weight: 400; }
.help-item[open] summary::after { content: '\2212'; }
.help-item .help-body { padding: 0 2px 16px; color: var(--canqate-muted); font-size: .85rem; line-height: 1.65; }
.help-item .help-body p { margin: 0 0 10px; }
.help-item .help-body ul { margin: 0 0 10px; padding-left: 20px; }
.help-item .help-body li { margin-bottom: 5px; }
.help-item .help-body table.data-table { margin: 8px 0 10px; }
.help-item .help-body b { color: var(--canqate-text); }
.kpi-card .val { font-size: 1.5rem; font-weight: 800; color: var(--canqate-navy); }
.kpi-card .lbl { color: var(--canqate-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; }
.filters-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.filters-bar input, .filters-bar select { padding: 8px 10px; border: 1px solid var(--canqate-border); border-radius: 7px; font-size: .84rem; }
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--canqate-navy); }
.login-card { background: #fff; padding: 36px; border-radius: var(--radius); width: 100%; max-width: 360px; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.review-card { border-left: 4px solid var(--canqate-warn); }
.modal-overlay { position: fixed; inset: 0; background: rgba(11,37,69,.55); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal-box { background: #fff; border-radius: var(--radius); padding: 28px; max-width: 420px; width: 90%; text-align: center; }
.modal-box.wide { max-width: 820px; text-align: left; max-height: 86vh; overflow-y: auto; }
.modal-box.wide .data-table { font-size: .83rem; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; margin-bottom: 18px; font-size: .87rem; }
.detail-grid .lbl { color: var(--canqate-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; }
.detail-grid .val { margin-bottom: 8px; }
tr.clickable-row { cursor: pointer; }
tr.clickable-row:hover { background: #f2f6fa; }
.modal-close-x { position: absolute; top: 14px; right: 18px; background: none; border: none; font-size: 1.3rem; color: var(--canqate-muted); cursor: pointer; }
.spinner { width: 34px; height: 34px; border: 3px solid #dfe6ec; border-top-color: var(--canqate-teal); border-radius: 50%; margin: 0 auto 16px; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.muted-note { font-size: .76rem; color: var(--canqate-muted); text-align: center; margin-top: 8px; }

@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .admin-shell { flex-direction: column; }
  .admin-sidebar { width: 100%; }
}

/* --- Dashboard header row (title + notification bell) --- */
.dash-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

/* --- Notification bell --- */
.bell-btn {
  position: relative; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--canqate-border); background: #fff; color: var(--canqate-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.bell-btn svg { width: 20px; height: 20px; }
.bell-btn:hover { background: #f2f6fa; }
.bell-btn.bell-alert { color: var(--canqate-danger); border-color: #f3c6bd; }
.bell-btn.bell-alert svg { animation: bell-ring 1.6s ease-in-out infinite; }
.bell-dot {
  position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--canqate-danger); border: 2px solid #fff;
}
@keyframes bell-ring {
  0%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-12deg); }
  30% { transform: rotate(8deg); }
  40% { transform: rotate(-6deg); }
  50% { transform: rotate(0deg); }
}

/* --- Pagination controls (shared by every paginated list view) --- */
.pagination-bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--canqate-border);
}
.pagination-range { font-size: .8rem; color: var(--canqate-muted); }
.pagination-controls { display: flex; align-items: center; gap: 10px; }
.pagination-page { font-size: .82rem; color: var(--canqate-muted); min-width: 90px; text-align: center; }
.pagination-controls .btn[disabled] { opacity: .4; cursor: not-allowed; }

/* --- Line chart hover tooltip --- */
.chart-wrap { position: relative; }
.chart-dot-hit { cursor: pointer; }
.chart-tooltip {
  position: absolute; transform: translate(-50%, -100%) translateY(-8px);
  background: var(--canqate-navy); color: #fff; font-size: .76rem; font-weight: 600;
  padding: 5px 10px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 5;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.chart-tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--canqate-navy);
}

/* --- Password composition checklist ------------------------------------- */
/* Ticks live as the person types. Rules start neutral rather than red: an
   empty field has not failed anything yet, and opening a form already
   covered in errors reads as hostile. */
.password-checklist {
  list-style: none;
  margin: -4px 0 14px;
  padding: 10px 12px;
  background: #f7f9fc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.86rem;
  color: #64748b;
}
.password-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  transition: color 0.15s ease;
}
.password-checklist li .tick {
  display: inline-block;
  width: 1em;
  font-weight: 700;
  text-align: center;
}
.password-checklist li.met { color: #15803d; }
.password-checklist li.met .tick { color: #15803d; }
.password-checklist li.unmet { color: #b45309; }
@media (max-width: 640px) {
  .password-checklist { font-size: 0.82rem; }
}

/* Selected-receipt row with its clear/replace control. */
.receipt-chosen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 10px 12px;
  background: #f7f9fc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #334155;
}

/* --- Notification bell panel -------------------------------------------- */
.bell-wrap { position: relative; }
.bell-count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #dc2626;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.bell-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  max-width: 92vw;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  z-index: 60;
  overflow: hidden;
}
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #eef2f7;
  font-weight: 700; font-size: 0.86rem; color: #1f3864;
}
.notif-clear {
  background: none; border: none; cursor: pointer;
  color: #2563eb; font-size: 0.78rem; font-weight: 600;
}
.notif-clear:hover { text-decoration: underline; }
.notif-list { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow-y: auto; }
.notif-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 14px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
}
.notif-item:hover { background: #f8fafc; }
.notif-item.unseen { background: #eff6ff; }
.notif-item.unseen:hover { background: #e0efff; }
.notif-icon { flex-shrink: 0; font-size: 0.8rem; line-height: 1.5; }
.notif-icon-pending { color: #d97706; }
.notif-icon-approved { color: #16a34a; }
.notif-body { min-width: 0; }
.notif-title { font-weight: 600; font-size: 0.85rem; color: #0f172a; }
.notif-detail { font-size: 0.79rem; color: #475569; margin-top: 2px; word-break: break-word; }
.notif-time { font-size: 0.72rem; color: #94a3b8; margin-top: 3px; }
.notif-empty { padding: 26px 16px; text-align: center; font-size: 0.85rem; color: #64748b; }
.notif-empty span { font-size: 0.76rem; color: #94a3b8; }
@media (max-width: 640px) {
  .bell-panel { width: 300px; }
}

/* --- Receipt submission thread ------------------------------------------ */
/* Every submission and decision is kept. The left rail makes the sequence
   readable at a glance; the current entry is emphasised without hiding the
   ones before it. */
.receipt-thread {
  list-style: none;
  margin: 10px 0 16px;
  padding: 0 0 0 18px;
  border-left: 2px solid #e2e8f0;
}
.receipt-thread-item {
  position: relative;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.receipt-thread-item::before {
  content: '';
  position: absolute;
  left: -25px; top: 18px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
  border: 2px solid #fff;
}
.receipt-thread-item.latest { background: #eff6ff; border-color: #bfdbfe; }
.receipt-thread-item.latest::before { background: #2563eb; }
.rt-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 6px;
}
.rt-seq { font-weight: 700; font-size: 0.86rem; color: #1f3864; }
.rt-meta {
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  font-size: 0.79rem; color: #475569;
}
.rt-note {
  margin-top: 8px; padding: 8px 10px;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px;
  font-size: 0.82rem; color: #78350f; white-space: pre-wrap;
}
.receipt-thread-item .btn { margin-top: 10px; }
@media (max-width: 640px) {
  .rt-meta { flex-direction: column; gap: 2px; }
}

/* --- Countdown to the conference ---------------------------------------- */
.countdown {
  margin: 30px auto 26px;
  max-width: 900px;
  text-align: center;
}
.countdown-title {
  font-size: clamp(1.35rem, 3.2vw, 2.1rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.countdown-rule {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-bottom: 22px;
}
.countdown-rule span {
  height: 1px; width: clamp(30px, 12vw, 130px);
  background: linear-gradient(90deg, transparent, #c9a227);
}
.countdown-rule span:last-child { background: linear-gradient(90deg, #c9a227, transparent); }
.countdown-rule em {
  font-style: normal; color: #c9a227;
  font-size: clamp(0.9rem, 2vw, 1.15rem);
}
.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 2.4vw, 26px);
}
.cd-cell {
  position: relative;
  border: 1px solid rgba(201, 162, 39, 0.55);
  border-radius: 14px;
  padding: clamp(20px, 3.6vw, 34px) 6px clamp(12px, 2vw, 18px);
  background: rgba(255, 255, 255, 0.035);
}
.cd-icon {
  position: absolute;
  top: clamp(-15px, -1.6vw, -13px); left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #14294d;
  border: 1px solid rgba(201, 162, 39, 0.7);
  color: #c9a227;
}
.cd-icon svg { width: 15px; height: 15px; }
.cd-value {
  font-size: clamp(1.9rem, 6.2vw, 4rem);
  font-weight: 800; color: #fff; line-height: 1;
  font-variant-numeric: tabular-nums;   /* stops the width jittering each second */
}
.cd-label {
  margin-top: clamp(8px, 1.4vw, 14px);
  padding-top: clamp(6px, 1vw, 10px);
  border-top: 1px solid rgba(201, 162, 39, 0.45);
  color: #c9a227;
  font-size: clamp(0.68rem, 1.5vw, 0.95rem);
}
.cd-message {
  grid-column: 1 / -1;
  border: 1px solid rgba(201, 162, 39, 0.55);
  border-radius: 14px;
  padding: 26px 18px;
}
.cd-message strong { display: block; color: #fff; font-size: clamp(1.1rem, 2.6vw, 1.5rem); }
.cd-message span { display: block; margin-top: 6px; color: #c9a227; font-size: 0.92rem; }
.countdown-foot {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px;
  margin: 24px 0 0;
  color: #cfe0f2;
  font-size: clamp(0.72rem, 1.6vw, 0.95rem);
}
.countdown-foot svg { width: 17px; height: 17px; color: #c9a227; flex-shrink: 0; }
.countdown-foot em { color: #c9a227; font-style: normal; }
.countdown-foot b { color: #c9a227; font-weight: 600; }
@media (max-width: 420px) {
  .countdown-grid { gap: 8px; }
  .cd-cell { padding-top: 22px; }
}