@font-face {
  font-family: "Nuckle";
  src: url("fonts/nuckle/Nuckle-Regular.1cb78e981807.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nuckle";
  src: url("fonts/nuckle/Nuckle-Medium.cfb07aa2e055.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nuckle";
  src: url("fonts/nuckle/Nuckle-Semibold.cbd9d4146266.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nuckle";
  src: url("fonts/nuckle/Nuckle-Bold.b92662a2945f.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*
 * Intelvio palette, derived from the supplied logo artwork.
 * Core: brand blue #0F3DBA, black #000000, white #FFFFFF.
 * Supporting tones are blue/neutral mixes for accessible UI states.
 */
:root {
  --brand-blue: #0f3dba;
  --brand-blue-hover: #0c3195;
  --brand-blue-dark: #0a286f;
  --brand-blue-soft: #e7ecfa;
  --brand-blue-wash: #f5f7fc;
  --brand-black: #000000;
  --brand-ink: #111827;
  --brand-muted: #5f6b7a;
  --brand-border: #d9e1f2;
  --brand-white: #ffffff;

  /* Backward-compatible mappings for the original UI tokens. */
  --navy: var(--brand-blue-dark);
  --orange: var(--brand-blue);
  --ink: var(--brand-ink);
  --muted: var(--brand-muted);
  --line: var(--brand-border);
  --bg: var(--brand-blue-wash);
}

body { background: var(--brand-blue-wash); }
header { border-bottom-color: var(--brand-border); }
.brand { gap: 14px; }
.brand > img { display: block; width: 102px; height: 36px; object-fit: contain; }
.brand small { color: var(--brand-muted); border-left-color: var(--brand-border); }
.login-logo { display: block; width: 170px; height: auto; margin: 0 auto 24px; }
.login h1 { color: var(--brand-ink); }
.button.primary { background: var(--brand-blue); border-color: var(--brand-blue); }
.button.primary:hover, .button.primary:focus-visible { background: var(--brand-blue-hover); border-color: var(--brand-blue-hover); }
.button.dark { background: var(--brand-blue-dark); border-color: var(--brand-blue-dark); }
.button.danger { border-color: #c53a32; color: #a52722; }
.button.danger:hover { background: #a52722; color: var(--brand-white); }
.button:focus-visible, a:focus-visible, .link:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-blue) 35%, transparent); outline-offset: 2px; }
.eyebrow { color: var(--brand-blue); }
.avatar { background: var(--brand-blue-soft); color: var(--brand-blue-dark); }
.crop-stage { background: var(--brand-blue-dark); }
.badge-preview {
  --access-color: var(--brand-blue);
  width: min(100%, 430px);
  margin-inline: auto;
  aspect-ratio: 53.98 / 85.6;
  border-left: 0;
  border-radius: 16px;
  text-align: left;
  font-family: "Nuckle", Inter, ui-sans-serif, system-ui, sans-serif;
}
.badge-preview:after { height: 3.3%; background: var(--access-color); }
.badge-photo {
  position: relative;
  height: 55%;
  overflow: hidden;
  background: var(--brand-blue-soft);
  color: #9aa5ae;
}
.photo-input-hidden { display: none; }
.badge-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.badge-photo > img[hidden], .badge-photo > img:not([src]) { display: none; }
.badge-photo .cropper-container { width: 100% !important; height: 100% !important; }
.badge-photo .cropper-modal { background: transparent; opacity: 0; }
.badge-photo .cropper-view-box, .badge-photo .cropper-crop-box { outline: 0; }
.badge-photo .cropper-line, .badge-photo .cropper-point, .badge-photo .cropper-dashed, .badge-photo .cropper-center { display: none; }
.photo-add, .photo-tools button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--brand-white) 70%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-blue-dark) 82%, transparent);
  color: var(--brand-white);
  box-shadow: 0 3px 12px #071a4052;
  cursor: pointer;
}
.photo-add { position: absolute; inset: 50% auto auto 50%; z-index: 20; transform: translate(-50%, -50%); }
.badge-photo.has-photo .photo-add { display: none; }
.photo-tools {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
  display: flex;
  gap: 7px;
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.badge-photo.has-photo:hover .photo-tools, .badge-photo.has-photo:focus-within .photo-tools { opacity: 1; transform: none; pointer-events: auto; }
.photo-tools button { width: 36px; height: 36px; }
.photo-add svg, .photo-tools svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.photo-add:hover, .photo-tools button:hover { background: var(--brand-blue); }
.photo-add:focus-visible, .photo-tools button:focus-visible { outline: 3px solid var(--brand-white); outline-offset: 2px; }
.badge-preview:before {
  content: "";
  position: absolute;
  right: 6%;
  top: 49.3%;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: url("brand/intelvio-dot.c85c0a7088aa.svg") center / contain no-repeat;
  z-index: 10;
  pointer-events: none;
}
.button:disabled { cursor: wait; opacity: .72; }
.button.is-saving { min-width: 70px; }
.saving-dots { display: inline-flex; align-items: center; gap: 4px; height: 1em; }
.saving-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: saving-dot .9s infinite ease-in-out; }
.saving-dots i:nth-child(2) { animation-delay: .15s; }
.saving-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes saving-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.badge-preview h2 { margin: 15% 7% 0; color: var(--brand-blue); font-size: clamp(21px, 3vw, 36px); }
.badge-preview p { margin: 2% 7% 0; color: #747474; letter-spacing: 0; }
.badge-preview small { margin: 1% 7%; color: #747474; }
.preview-brand {
  left: 7%;
  right: auto;
  bottom: 6%;
  display: block;
  width: 27%;
  height: 9%;
  font-size: 0;
  background: url("brand/intelvio-wordmark.ab156d1d6094.png") left center / contain no-repeat;
}
.status.submitted { background: var(--brand-blue-soft); color: var(--brand-blue-dark); }
nav a:hover, nav a:focus-visible, .link:hover { color: var(--brand-blue); }
.site-footer {
  position: fixed;
  right: 12px;
  bottom: 8px;
  z-index: 100;
  padding: 3px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--brand-blue-wash) 88%, transparent);
  color: var(--brand-muted);
  font-family: "Nuckle", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  text-align: right;
}
.footer-heart { color: var(--brand-blue); }
.deleted-row { grid-template-columns: 2fr 1.4fr 1.2fr auto; }
.deleted-row form { margin: 0; }
.section-actions { display: flex; align-items: center; gap: 10px; }
.section-actions form { margin: 0; }
.employee-lookup { position: relative; }
.employee-matches {
  position: absolute;
  z-index: 50;
  top: calc(100% - 10px);
  right: 0;
  left: 0;
  overflow: hidden;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background: var(--brand-white);
  box-shadow: 0 10px 30px #11182724;
}
.employee-matches[hidden] { display: none; }
.employee-match { display: block; width: 100%; padding: 10px 12px; border: 0; border-top: 1px solid var(--brand-border); background: var(--brand-white); color: var(--brand-ink); text-align: left; cursor: pointer; }
.employee-match:first-child { border-top: 0; }
.employee-match:hover, .employee-match:focus-visible { background: var(--brand-blue-soft); outline: 0; }
.employee-match small { font-weight: 400; }

@media (max-width: 800px) {
  .brand > img { width: 90px; }
}