/*************** Common KAT KV (AI Data Validation) Portal CSS ***************/
/*
   Design system for the AI Data Validation Portal.
   Namespaced with .vp- so it never collides with the base portal theme.
   Load this file on every Validation-Portal page (web-file <link> or a
   shared web-template). Colours are defined once as tokens in :root and
   referenced with var(--vp-*) throughout.
*/

/*** Design Tokens ***/
:root {
  /* Brand / navy */
  --vp-navy-900: #0a2450;   /* Deep Navy token: hero gradient start */
  --vp-navy-800: #0d2c63;   /* Navy token: panel titles */
  --vp-navy-700: #133b82;   /* Navy Light token: hero gradient mid */

  /* Brand / blue */
  --vp-blue-600: #1c5fd6;   /* Royal Blue token: primary action / CTAs / links */
  --vp-blue-700: #1a53bd;   /* Blue Deep token: hover state on CTAs */
  --vp-blue-500: #2f74e0;   /* Blue token: focus / active borders */
  --vp-blue-050: #f4f8ff;   /* Blue Wash token: tinted panel background */
  --vp-blue-100: #e5efff;   /* Blue Tint token: note borders */

  /* Neutrals */
  --vp-ink:      #1f2d3d;   /* Ink token: headings & primary text */
  --vp-ink-soft: #4a5766;   /* Slate token: secondary / body text */
  --vp-muted:    #6b7787;   /* Slate Light token: muted text & metadata */
  --vp-line:     #e3e8ef;   /* Rule token: borders & dividers */
  --vp-line-2:   #eef1f6;   /* Rule Light token: subtle inner dividers */
  --vp-surface:  #ffffff;   /* Card White token: surfaces */
  --vp-canvas:   #f5f7fb;   /* Page Background token */

  /* Status hues (background / text) */
  --vp-amber-bg:  #fff3d6;  --vp-amber-tx:  #9a6700;   /* Amber status token */
  --vp-red-bg:    #fde4e1;  --vp-red-tx:    #b42318;   /* Red status token */
  --vp-orange-bg: #ffe8d4;  --vp-orange-tx: #b54708;   /* Orange status token */
  --vp-blue-bg:   #e0edff;  --vp-blue-tx:   #1d4fd7;   /* Blue status token */
  --vp-green-bg:  #daf3e4;  --vp-green-tx:  #167a45;   /* Green status token */
  --vp-violet-bg: #ece5ff;  --vp-violet-tx: #6837d6;   /* Violet status token */
  --vp-gray-bg:   #eceff3;  --vp-gray-tx:   #566072;   /* Gray status token */

  /* Shape & elevation */
  --vp-radius:   10px;
  --vp-radius-sm:8px;
  --vp-shadow:   0 1px 3px rgba(16,32,64,.08), 0 1px 2px rgba(16,32,64,.06);
  --vp-shadow-lg:0 6px 20px rgba(16,32,64,.10);
}
/*** End of Design Tokens ***/

/*** Common Design System ***/

/* Page shell */
.vp {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--vp-ink);            /* Ink token */
  background: var(--vp-canvas);    /* Page Background token */
}
.vp-wrap { max-width: 1180px; margin: 0 auto; padding: 28px 20px 56px; }
.vp h1,.vp h2,.vp h3,.vp h4 { margin: 0; color: var(--vp-ink); font-weight: 700; } /* Ink token */
.vp-h1 { font-size: 26px; }
.vp-h2 { font-size: 20px; }
.vp-sub { color: var(--vp-muted); font-size: 14px; margin-top: 4px; } /* Slate Light token */
.vp-row { display: flex; flex-wrap: wrap; gap: 16px; }
.vp-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vp-mt-8 { margin-top: 8px; } .vp-mt-16 { margin-top: 16px; } .vp-mt-24 { margin-top: 24px; }

/* Card */
.vp-card {
  background: var(--vp-surface);   /* Card White token */
  border: 1px solid var(--vp-line);/* Rule token */
  border-radius: var(--vp-radius);
  box-shadow: var(--vp-shadow);
}
.vp-card-pad { padding: 20px 22px; }
.vp-card-head { padding: 16px 22px; border-bottom: 1px solid var(--vp-line-2); display:flex; align-items:center; justify-content:space-between; }
.vp-card-title { font-size: 16px; font-weight: 700; }

/* Buttons */
.vp-btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  font-size: 14px; font-weight: 600; line-height: 1;
  padding: 11px 18px; border-radius: var(--vp-radius-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .15s, box-shadow .15s, border-color .15s;
}
.vp-btn-primary { background: var(--vp-blue-600); color: #fff; } /* Royal Blue token / Card White token */
.vp-btn-primary:hover { background: var(--vp-blue-700); color:#fff; text-decoration:none; } /* Blue Deep token */
.vp-btn-ghost { background: #fff; color: var(--vp-ink); border-color: var(--vp-line); }
.vp-btn-ghost:hover { background: var(--vp-blue-050); color: var(--vp-ink); text-decoration:none; } /* Blue Wash token */
.vp-btn-link { background: transparent; color: var(--vp-blue-600); padding: 0; border: 0; font-weight: 600; } /* Royal Blue token */
.vp-btn-link:hover { text-decoration: underline; color: var(--vp-blue-700); } /* Blue Deep token */
.vp-btn[disabled], .vp-btn.is-disabled { opacity: .5; pointer-events: none; }

/* Stat cards (dashboard) */
.vp-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.vp-stat { display: flex; align-items: center; gap: 14px; padding: 18px; }
.vp-stat-ic {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px;
  display: grid; place-items: center; font-size: 18px;
}
.vp-stat-num { font-size: 24px; font-weight: 800; line-height: 1; }
.vp-stat-lbl { font-size: 13px; color: var(--vp-muted); margin-top: 4px; } /* Slate Light token */
.vp-ic-blue  { background: var(--vp-blue-bg);  color: var(--vp-blue-tx); }  /* Blue status token */
.vp-ic-amber { background: var(--vp-amber-bg); color: var(--vp-amber-tx); } /* Amber status token */
.vp-ic-green { background: var(--vp-green-bg); color: var(--vp-green-tx); } /* Green status token */
.vp-ic-red   { background: var(--vp-red-bg);   color: var(--vp-red-tx); }   /* Red status token */

/* Tables */
.vp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vp-table thead th {
  text-align: left; font-weight: 600; color: var(--vp-ink-soft); /* Slate token */
  padding: 12px 16px; border-bottom: 1px solid var(--vp-line);   /* Rule token */
  background: #fafbfd; white-space: nowrap;                      /* Table header wash */
}
.vp-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--vp-line-2); vertical-align: middle; }
.vp-table tbody tr:last-child td { border-bottom: 0; }
.vp-table tbody tr:hover { background: #fafcff; } /* Row hover wash */
.vp-table .vp-caseno { font-weight: 600; color: var(--vp-ink); } /* Ink token */

/* Status badges */
.vp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 6px 10px; border-radius: 999px; white-space: nowrap;
}
.vp-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.vp-badge.no-dot::before { display: none; }
.vp-b-amber  { background: var(--vp-amber-bg);  color: var(--vp-amber-tx); }  /* Amber status token */
.vp-b-red    { background: var(--vp-red-bg);    color: var(--vp-red-tx); }    /* Red status token */
.vp-b-orange { background: var(--vp-orange-bg); color: var(--vp-orange-tx); } /* Orange status token */
.vp-b-blue   { background: var(--vp-blue-bg);   color: var(--vp-blue-tx); }   /* Blue status token */
.vp-b-green  { background: var(--vp-green-bg);  color: var(--vp-green-tx); }  /* Green status token */
.vp-b-violet { background: var(--vp-violet-bg); color: var(--vp-violet-tx); } /* Violet status token */
.vp-b-gray   { background: var(--vp-gray-bg);   color: var(--vp-gray-tx); }   /* Gray status token */

/* Stepper */
.vp-steps { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; }
.vp-step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.vp-step::before, .vp-step::after {
  content: ""; position: absolute; top: 17px; height: 2px; background: var(--vp-line); z-index: 0; /* Rule token */
}
.vp-step::before { left: 0; right: 50%; margin-right: 18px; }
.vp-step::after  { left: 50%; right: 0; margin-left: 18px; }
.vp-step:first-child::before { display: none; }
.vp-step:last-child::after   { display: none; }
.vp-step-dot {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 14px; background: #fff; color: var(--vp-muted);
  border: 2px solid var(--vp-line); position: relative; z-index: 1;
}
.vp-step-lbl { margin-top: 8px; font-size: 13px; color: var(--vp-muted); font-weight: 600; }
.vp-step.is-active .vp-step-dot { background: var(--vp-blue-600); color:#fff; border-color: var(--vp-blue-600); } /* Royal Blue token: active */
.vp-step.is-active .vp-step-lbl { color: var(--vp-blue-600); }
.vp-step.is-done .vp-step-dot { background: var(--vp-green-tx); color:#fff; border-color: var(--vp-green-tx); } /* Green status token: completed */
.vp-step.is-done::before, .vp-step.is-done::after,
.vp-step.is-active::before { background: var(--vp-green-tx); }

/* Forms */
.vp-field { margin-bottom: 18px; }
.vp-label { display: block; font-size: 13px; font-weight: 600; color: var(--vp-ink-soft); margin-bottom: 6px; } /* Slate token */
.vp-label .req { color: var(--vp-red-tx); margin-left: 2px; } /* Red status token */
.vp-input, .vp-select, .vp-textarea {
  width: 100%; font-size: 14px; color: var(--vp-ink);
  padding: 10px 12px; border: 1px solid var(--vp-line); border-radius: var(--vp-radius-sm);
  background: #fff; font-family: inherit;
}
.vp-input:focus, .vp-select:focus, .vp-textarea:focus {
  outline: none; border-color: var(--vp-blue-500); box-shadow: 0 0 0 3px rgba(47,116,224,.15); /* Blue token focus ring */
}
.vp-textarea { min-height: 84px; resize: vertical; }
.vp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* Panels used in Enter-Data / Review */
.vp-panel { border: 1px solid var(--vp-line); border-radius: var(--vp-radius); padding: 20px 22px; background:#fff; }
.vp-panel-title { font-size: 14px; font-weight: 700; color: var(--vp-navy-800); margin-bottom: 16px; } /* Navy token */
.vp-kv { display: grid; grid-template-columns: 190px 1fr; gap: 8px 16px; font-size: 14px; }
.vp-kv dt { color: var(--vp-muted); }  /* Slate Light token */
.vp-kv dd { margin: 0; color: var(--vp-ink); font-weight: 500; } /* Ink token */

/* Program picker (New Validation step 1) */
.vp-prog {
  display: flex; gap: 20px; align-items: flex-start; justify-content: space-between;
  border: 1px solid var(--vp-line); border-radius: var(--vp-radius);
  padding: 20px 22px; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.vp-prog:hover, .vp-prog.is-sel { border-color: var(--vp-blue-500); box-shadow: 0 0 0 3px rgba(47,116,224,.12); } /* Blue token */
.vp-prog-ic { width: 40px; height: 40px; border-radius: 8px; background: var(--vp-blue-bg); color: var(--vp-blue-tx); display:grid; place-items:center; flex:0 0 40px; }
.vp-prog-name { font-size: 16px; font-weight: 700; color: var(--vp-blue-600); } /* Royal Blue token */
.vp-prog-desc { font-size: 13px; color: var(--vp-ink-soft); margin-top: 4px; }  /* Slate token */
.vp-prog-req { font-size: 13px; }
.vp-prog-req b { display:block; color: var(--vp-ink-soft); margin-bottom: 4px; font-size:12px; }
.vp-prog-req ul { margin: 0; padding-left: 18px; color: var(--vp-muted); }

/* Upload row */
.vp-upload-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 16px; align-items: end; }
.vp-file { display: flex; }
.vp-file-btn { border: 1px solid var(--vp-line); background: #fff; padding: 10px 14px; border-radius: var(--vp-radius-sm) 0 0 var(--vp-radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; }
.vp-file-name { border: 1px solid var(--vp-line); border-left: 0; padding: 10px 12px; border-radius: 0 var(--vp-radius-sm) var(--vp-radius-sm) 0; font-size: 13px; color: var(--vp-muted); flex: 1; }

/* Confirmation */
.vp-confirm { max-width: 560px; margin: 0 auto; text-align: center; padding: 44px 40px; }
.vp-confirm-ic { width: 72px; height: 72px; border-radius: 50%; background: var(--vp-green-bg); color: var(--vp-green-tx); display:grid; place-items:center; font-size: 34px; margin: 0 auto 20px; } /* Green status token */
.vp-confirm dl { text-align: left; margin: 24px auto 0; max-width: 380px; }

/* Detail tabs */
.vp-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--vp-line); margin: 8px 0 24px; }
.vp-tab { padding: 12px 2px; font-size: 14px; font-weight: 600; color: var(--vp-muted); cursor: pointer; border-bottom: 2px solid transparent; text-decoration: none; }
.vp-tab:hover { color: var(--vp-ink); text-decoration: none; }
.vp-tab.is-active { color: var(--vp-blue-600); border-bottom-color: var(--vp-blue-600); } /* Royal Blue token */

/* Result summary tiles */
.vp-result-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.vp-rt { text-align: center; border: 1px solid var(--vp-line); border-radius: 8px; padding: 14px 8px; }
.vp-rt-num { font-size: 26px; font-weight: 800; }
.vp-rt-lbl { font-size: 12px; color: var(--vp-muted); margin-top: 2px; }
.vp-rt.green .vp-rt-num { color: var(--vp-green-tx); } /* Green status token */
.vp-rt.red   .vp-rt-num { color: var(--vp-red-tx); }   /* Red status token */
.vp-rt.amber .vp-rt-num { color: var(--vp-amber-tx); } /* Amber status token */
.vp-rt.blue  .vp-rt-num { color: var(--vp-blue-tx); }  /* Blue status token */

/* Filter bar */
.vp-filters { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 16px; align-items: end; }

/* Sign-in */
.vp-auth { min-height: 100%; display: grid; grid-template-columns: 1fr 1fr; }
.vp-auth-brand { background: var(--vp-blue-050); padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; } /* Blue Wash token */
.vp-auth-form  { padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; }
.vp-auth-card  { max-width: 380px; margin: 0 auto; width: 100%; }
.vp-divider { display: flex; align-items: center; gap: 12px; color: var(--vp-muted); font-size: 12px; margin: 18px 0; }
.vp-divider::before, .vp-divider::after { content:""; flex:1; height:1px; background: var(--vp-line); }

/* Responsive */
@media (max-width: 992px) {
  .vp-stats { grid-template-columns: repeat(2, 1fr); }
  .vp-grid-2 { grid-template-columns: 1fr; }
  .vp-upload-row { grid-template-columns: 1fr; }
  .vp-filters { grid-template-columns: 1fr 1fr; }
  .vp-result-tiles { grid-template-columns: repeat(2, 1fr); }
  .vp-auth { grid-template-columns: 1fr; }
  .vp-auth-brand { display: none; }
  .vp-kv { grid-template-columns: 1fr; gap: 2px 0; }
  .vp-kv dd { margin-bottom: 10px; }
}
@media (max-width: 560px) {
  .vp-stats { grid-template-columns: 1fr; }
  .vp-step-lbl { font-size: 11px; }
  .vp-tabs { overflow-x: auto; }
}

/*** End of Common Design System ***/

/*** Template Helpers ***/
/*
   Rules that Bootstrap 5 utility classes can't express live here so the
   templates carry no inline styles and no per-page <style> blocks.
   Everything Bootstrap can do (spacing, flex, grid, text/colour utilities)
   is done with Bootstrap classes directly in the markup.
*/

/* Home landing / hero */
.vp-hero {
  background: linear-gradient(135deg, var(--vp-navy-900) 0%, var(--vp-navy-700) 55%, var(--vp-blue-700) 100%); /* Deep Navy → Navy Light → Blue Deep tokens */
  color: #fff; /* Card White token */
}
.vp-hero-inner { max-width: 1180px; margin: 0 auto; padding: 72px 20px 84px; }
.vp-hero-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: #cfe0ff; background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18); padding: 6px 14px; border-radius: 999px;
}
/* !important so the white heading wins over the portal theme's h1 colour on the navy hero */
.vp .vp-hero-title { color: #fff !important; font-size: 40px; line-height: 1.15; margin-top: 0; } /* Card White token */
.vp .vp-hero-lead { max-width: 640px; margin-top: 18px; font-size: 17px; line-height: 1.7; color: #dbe6fb; } /* Hero subtext */
.vp-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.vp-btn-lg { padding: 14px 26px; font-size: 15px; }
.vp-btn-hero-ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.35); }
.vp-btn-hero-ghost:hover { background: rgba(255,255,255,.16); color: #fff; }
.vp-hero-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: -48px; position: relative; z-index: 1;
}
.vp-feature { text-decoration: none; transition: transform .15s, box-shadow .15s; }
.vp-feature:hover { transform: translateY(-3px); box-shadow: var(--vp-shadow-lg); text-decoration: none; }

/* Small reusable bits */
.vp-ink { color: var(--vp-ink); } /* Ink token */
.vp-prose { font-size: 14px; color: var(--vp-ink-soft); line-height: 1.7; margin: 0; } /* Slate token */
.vp-panel-error { border-color: var(--vp-red-tx); background: var(--vp-red-bg); } /* Red status token */
.vp-note {
  background: var(--vp-blue-050); border: 1px solid var(--vp-blue-100); /* Blue Wash / Blue Tint tokens */
  border-radius: var(--vp-radius-sm); padding: 12px 14px; font-size: 13px; color: var(--vp-ink-soft);
}
.vp-kv-sm { grid-template-columns: 90px 1fr; }
.vp-kv-full { grid-column: 1 / -1; color: var(--vp-muted); }
.vp-kv-raw { grid-column: 1 / -1; white-space: pre-wrap; font-family: monospace; font-size: 13px; }
.vp-card-pad > .vp-prog-ic { margin-bottom: 4px; }
.vp-step-dot.is-num { background: var(--vp-blue-600); color: #fff; border-color: var(--vp-blue-600); } /* Royal Blue token */

/* Review-step document list */
.vp-doclist { margin: 0; padding-left: 18px; color: var(--vp-ink); font-size: 14px; line-height: 1.9; }
.vp-doclist-empty { list-style: none; margin-left: -18px; color: var(--vp-muted); }

/* Declaration checkbox row */
.vp-declare { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--vp-ink-soft); cursor: pointer; }
.vp-declare input { margin-top: 3px; }

/* FAQ accordion (Help) */
.vp-faq-item { border-bottom: 1px solid var(--vp-line-2); }
.vp-faq-item:last-child { border-bottom: 0; }
.vp-faq-item > summary {
  list-style: none; cursor: pointer; padding: 16px 22px;
  font-size: 14px; font-weight: 600; color: var(--vp-ink);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.vp-faq-item > summary::-webkit-details-marker { display: none; }
.vp-faq-item > summary::after { content: "+"; color: var(--vp-muted); font-size: 18px; font-weight: 400; flex: 0 0 auto; }
.vp-faq-item[open] > summary::after { content: "\2212"; }
.vp-faq-item[open] > summary { color: var(--vp-blue-600); } /* Royal Blue token */
.vp-faq-body { padding: 0 22px 18px; font-size: 14px; color: var(--vp-ink-soft); line-height: 1.7; }

/* Hero responsive */
@media (max-width: 992px) {
  .vp-hero-cards { grid-template-columns: 1fr; margin-top: -32px; }
  .vp .vp-hero-title { font-size: 32px; }
  .vp-hero-inner { padding: 56px 20px 68px; }
}

/*** End of Template Helpers ***/

/*************** End of Common KAT KV Portal CSS ***************/


.wrapper-page {
  min-height: 750px;
  background-color: #F7FAFB;
  padding-bottom: 2rem;
  margin-bottom: 20px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 3px 5px rgb(57 63 72 / 30%);
  -webkit-box-shadow: 0 3px 5px rgb(57 63 72 / 30%);
  -moz-box-shadow: 0 3px 5px rgb(57 63 72 / 30%);
}