/* HRW Theme */
:root {
  --hrw-cyan: #009fe3;       /* primary cyan */
  --hrw-blue-100: #0f73b4;   /* dark blue 100 (website primary) */
  --hrw-blue-125: #04619d;   /* hover */
  --hrw-blue-150: #015083;
  --hrw-blue-175: #003f67;
  --hrw-dark: #212529;
  --hrw-light: #fefefe;
   --bs-blue:#0d6efd;
  --bs-indigo:#6610f2;
  --bs-purple:#6f42c1;
  --bs-pink:#d63384;
  --bs-red:#dc3545;
  --bs-orange:#fd7e14;
  --bs-yellow:#ffc107;
  --bs-green:#198754;
  --bs-teal:#20c997;
  --bs-cyan:#0dcaf0;
  --bs-white:#fff;
  --bs-gray:#6c757d;
  --bs-gray-dark:#343a40;
  --bs-gray-100:#f8f9fa;
  --bs-gray-200:#e9ecef;
  --bs-gray-300:#dee2e6;  
  --bs-gray-400:#ced4da;
  --bs-gray-500:#adb5bd;
  --bs-gray-600:#6c757d;
  --bs-gray-700:#495057;
  --bs-gray-800:#343a40;
  --bs-gray-900:#212529;
  --bs-primary:#0f73b4;
  --bs-secondary:#6c757d;
  --bs-success:#198754;
  --bs-info:#0dcaf0;
  --bs-warning:#ffc107;
  --bs-danger:#dc3545;
  --bs-light:#f8f9fa;
  --bs-dark:#212529;
  --bs-faculty-a:#b3ce36;
  --bs-faculty-b:#ae0087;
  --bs-faculty-c:#e8c425;
  --bs-faculty-d:#7ab6b3;
  --bs-dark-05:#f2f2f2;
  --bs-dark-40:#999;
  --bs-dark-60:#666;
  --bs-dark-blue-20:#cfe3f0;
  --bs-dark-blue-40:#9fc7e1;
  --bs-dark-blue-100:#0f73b4;
  --bs-dark-blue-125:#04619d;
  --bs-dark-blue-150:#015083;
  --bs-dark-blue-175:#003f67;
  --bs-primary-rgb:15,115,180;
  --bs-secondary-rgb:108,117,125;
  --bs-success-rgb:25,135,84;
  --bs-info-rgb:13,202,240;
  --bs-warning-rgb:255,193,7;
  --bs-danger-rgb:220,53,69;
  --bs-light-rgb:248,249,250;
  --bs-dark-rgb:33,37,41;
  --bs-white-rgb:255,255,255;
  --bs-black-rgb:0,0,0;
  --bs-body-color-rgb:33,37,41;
  --bs-body-bg-rgb:255,255,255;
  --bs-font-sans-serif:"Lato",sans-serif;
  --bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --bs-gradient:linear-gradient(180deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,0));
  --bs-body-font-family:var(--bs-font-sans-serif);
  --bs-body-font-size:1rem;
  --bs-body-font-weight:400;
  --bs-body-line-height:1.75;
  --bs-body-color:#212529;
  --bs-body-bg:#fff
}

/* Header */
header.hrw-header { border-bottom: 1px solid #dee2e6; background: #fff; }
.hrw-brand { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; max-width:1100px; margin:0 auto; }
.hrw-brand img { max-height:48px; }
.hrw-title { font-weight:600; color: var(--hrw-dark); }
.hrw-sub { color:#6c757d; font-size:.95rem; }
@media (max-width: 576px){ .hrw-sub{ display:none; } }

/* Main container */
main.hrw-main { padding:1rem; max-width:1100px; margin:0 auto; }

/* Centered page container with max width ~800px on desktop */
.hrw-container {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Links & buttons */
a { color: var(--hrw-cyan); }
a:hover { color: var(--hrw-blue-125); }
.btn-primary { background-color: var(--hrw-cyan); border-color: var(--hrw-cyan); }
.btn-primary:hover { background-color: var(--hrw-blue-125); border-color: var(--hrw-blue-125); }
.btn-hrw { background-color: var(--hrw-cyan); border-color: var(--hrw-cyan); color:#fff; }
.btn-hrw:hover { background-color: var(--hrw-blue-100); border-color: var(--hrw-blue-100);  color:#fff;}

/* Wizard */
.hrw-wizard { display:flex; gap:.75rem; align-items:center; margin:1rem 0 1.25rem; }
.hrw-step { display:flex; align-items:center; gap:.5rem; var(--bs-gray-500); font-weight:500; color: var(--bs-gray-500)}
.hrw-step .idx { width:2rem; height:2rem; border-radius:999px; display:flex; align-items:center; justify-content:center; border:2px solid var(--bs-gray-500); font-weight:600; }
.hrw-step.active { color: var(--hrw-cyan); }
.hrw-step.active .idx { border-color: var(--hrw-cyan); color: #fff; background: var(--hrw-cyan); }
.hrw-step.done { color: var(--bs-gray-500); }
.hrw-step.done .idx {border-color: var(--bs-gray-500); background: var(--bs-gray-500); color: #fff;}
.hrw-sep { flex:1 1 auto; height:2px; background:#dee2e6; }
@media (max-width: 576px){ .hrw-step span.label{ display:none; } }

/* QR */
img.qr { max-width: 260px; height:auto; border:8px solid #fff; box-shadow:0 0 0 1px #dee2e6; }
.otp-input { max-width:240px; }

/* Override template spacing */
.content { padding-top: 0 !important; }

/* Error UI */
#blazor-error-ui { position:fixed; left:0; right:0; bottom:0; background:#f8d7da; color:#842029; padding:.5rem 1rem; display:none; }
#blazor-error-ui .reload, #blazor-error-ui .dismiss { margin-left:1rem; }