/* ===============================================
   ICY QR Scanner Styling
=============================================== */
:root {
  /* ICY brand color (from user picker) */
  /* slightly toned-down ICY accent to reduce button brightness */
  --accent: #3fc3b7; /* slightly less saturated */
  /* slightly darker for hover states */
  --accent-dark: #329e8c;
  /* page background behind cards: darker grey for more contrast */
  --bg: #9aa3ab; /* darker background to make page less bright */
  /* card background: slightly deeper grey for separation (darkened per request) */
  --card: #c9d3d6; /* darker than before to increase contrast against page bg */
  --muted: #4b5563; /* tailwind gray-600, a bit darker */
  --info: #2563eb; /* blue */
  --warning: #f59e0b; /* amber/orange */
  --success: #198754;
  --error: #b91c1c;
}

/* ICY circular logo */
body {
  background: var(--bg);
}
.card,
.icy-card,
.scanner-card {
  background: var(--card);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.07),
    0 1.5px 4px rgba(0, 0, 0, 0.04);
  border-radius: 1rem;
}

/* Main background card is slightly greyer for more depth */
.main-bg-card {
  background: #e5e7eb; /* tailwind gray-200, slightly greyer than --card */
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.05);
  border-radius: 1.1rem;
}
.icy-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.icy-circle {
  width: 36px;
  height: 36px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(50, 120, 110, 0.18);
  position: relative;
}
.icy-circle::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* slightly thinner white stroke for the logo to match user's request */
  /* reduce the white ring opacity and make the stroke thinner */
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-sizing: border-box;
  z-index: 0;
}
.icy-circle > * {
  position: relative;
  z-index: 1;
}
.icy-circle:hover {
  transform: scale(1.03);
}

/* Inline SVG logo subtle hover: move circles slightly off the letters */
.icy-logo-svg {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}
.icy-logo-svg .logo-circle {
  transition:
    transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1),
    filter 160ms ease;
  transform-box: fill-box; /* ensure transform uses the SVG shape bounds */
  transform-origin: center;
  will-change: transform;
  shape-rendering: geometricPrecision;
}
.icy-logo-svg .logo-letter {
  /* keep letters crisp and static */
  transition: fill 180ms ease;
}
/* On hover shift each circle subtly away from its letter (left-up, up, right-up) */
.icy-logo-svg:hover .logo-circle:nth-of-type(1) {
  transform: translate3d(-4px, -3px, 0);
}
.icy-logo-svg:hover .logo-circle:nth-of-type(2) {
  transform: translate3d(0px, -6px, 0);
}
.icy-logo-svg:hover .logo-circle:nth-of-type(3) {
  transform: translate3d(4px, -3px, 0);
}

/* Reduce motion on small/touch screens */
@media (max-width: 600px) {
  .icy-logo-svg .logo-circle {
    transition: transform 160ms ease;
  }
  .icy-logo-svg:hover .logo-circle:nth-of-type(1) {
    transform: translate(-2px, -2px);
  }
  .icy-logo-svg:hover .logo-circle:nth-of-type(2) {
    transform: translate(0px, -3px);
  }
  .icy-logo-svg:hover .logo-circle:nth-of-type(3) {
    transform: translate(2px, -2px);
  }
}

/* Per-pair interactions: when hovering or focusing a specific group, make the letter jump
   and the circle nudge a bit more for emphasis. Use :focus-visible for keyboard users. */
.icy-logo-svg .logo-pair {
  cursor: pointer;
}
.icy-logo-svg .logo-pair .logo-letter {
  transition:
    transform 200ms cubic-bezier(0.2, 0.9, 0.2, 1),
    fill 160ms ease;
  will-change: transform;
}
.icy-logo-svg .logo-pair:where(:hover, :focus-visible) .logo-letter {
  transform: translate3d(0, -6px, 0) scale(1.02);
}
.icy-logo-svg .logo-pair:where(:hover, :focus-visible) .logo-circle {
  transform: translate3d(0, -6px, 0) scale(1.02);
}

/* Focus treatment: remove default outline and add a soft accent highlight */
.icy-logo-svg .logo-pair:focus {
  outline: none;
}
.icy-logo-svg .logo-pair:focus-visible .logo-circle {
  filter: drop-shadow(0 8px 18px rgba(50, 120, 110, 0.10));
}

/* Remove browser default focus ring on SVG groups (tabbable <g>), and provide
   a consistent accessible focus-visible state. We target only the logo-pair
   elements so keyboard focus remains visible but not as the browser's yellow box. */
.icy-logo-svg .logo-pair:focus,
.icy-logo-svg .logo-pair:focus-visible {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
.icy-logo-svg .logo-pair:focus-visible .logo-circle {
  /* slightly stronger drop shadow and a gentle white stroke to separate the circle */
  filter: drop-shadow(0 10px 22px rgba(50, 120, 110, 0.12));
  /* reinforce white stroke to mask any browser ring artifacts (reduced thickness) */
  stroke: #ffffff;
  stroke-width: 3px;
}

/* Ensure individual pairs override the whole-logo hover nudges when active */
/* Removed empty sibling override (no-op) to satisfy lint rules */

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .icy-logo-svg .logo-circle,
  .icy-logo-svg .logo-letter {
    transition: none !important;
    transform: none !important;
  }
}

/* Info overlay/card */
.info-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 12000;
}
.info-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.info-card {
  background: var(--card);
  padding: 18px;
  border-radius: 12px;
  max-width: 520px;
  width: 92%;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  color: #111;
}
.info-card h3 {
  margin: 0 0 8px;
}
.info-close {
  position: absolute;
  right: 14px;
  top: 12px;
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}
.info-card a {
  color: var(--accent);
}

/* Scanner overlay styling */
.scanner-overlay {
  background: rgba(3, 7, 18, 0.78);
  padding: clamp(16px, 6vw, 32px);
  transition:
    background 200ms ease,
    backdrop-filter 200ms ease;
}

.scanner-overlay.ready {
  background: rgba(3, 7, 18, 0.85);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.scanner-container {
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 25px 55px rgba(2, 6, 23, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  position: relative;
}


body {
  margin: 0;
  font-family: Inter, system-ui, Arial, sans-serif;
  /* subtle ICY gradient background with a light-grey fallback behind cards */
  background: linear-gradient(180deg, rgba(50, 120, 110, 0.04) 0%, var(--bg) 60%);
  background-color: var(--bg);
  color: #111;
}

.wrap {
  max-width: 920px;
  margin: 18px auto;
  padding: 16px;
}

h1 {
  font-size: 1.35rem;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.muted {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.card {
  background: var(--card);
  border-radius: 14px;
  padding: 14px;
  /* softer cool shadow and a slightly darker border to match tinted background */
  box-shadow:
    0 10px 30px rgba(9, 30, 35, 0.06),
    0 2px 6px rgba(9, 30, 35, 0.03);
  border: 1px solid rgba(16, 24, 32, 0.06);
  margin-top: 10px;
}

/* Enforce stricter card visual: limited max width and centered */
.card {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  align-items: center;
}

@media (max-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  input[type='text'],
  input[type='date'] {
    width: 95%;
    max-width: 95%;
  }
}

input[type='text'],
input[type='date'] {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  font-size: 15px;
  width: 100%;
}

label {
  font-weight: 600;
  font-size: 0.9rem;
  display: block;
  margin-bottom: 4px;
}

label {
  font-weight: 600;
  font-size: 0.9rem;
}

.btn {
  padding: 9px 14px;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
  min-width: 84px; /* avoid collapsing and ensure visual consistency */
}

.btn.primary {
  background: var(--accent);
  color: #fff;
}

.btn.primary:hover {
  background: var(--accent-dark);
}

.btn {
  border: 0;
  box-shadow: 0 4px 12px rgba(50, 120, 110, 0.06);
}
.btn.danger {
  box-shadow: none;
}
.controls-row .btn {
  margin-left: 0;
}
.controls-row .btn + .btn {
  margin-left: 8px;
}

/* Ensure controller block fits inside the card */
#controllersContainer,
.controller-block {
  box-sizing: border-box;
  width: 100%;
}
.controller-block .module-group {
  width: 100%;
  box-sizing: border-box;
}

.btn.small {
  font-size: 14px;
  padding: 6px 12px;
}

.btn.pill {
  border-radius: 9999px;
  padding: 4px 16px;
  font-size: 14px;
  background: #e5e7eb;
  color: #333;
  border: none;
  margin: 6px 0 0 0;
  display: inline-block;
}
.btn.pill.danger {
  background: var(--error);
  color: #fff;
}

.btn.ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(50, 120, 110, 0.12);
}

.btn.ghost:hover {
  background: rgba(50, 120, 110, 0.06);
}

.btn.danger {
  background: var(--error);
  color: white;
}

.btn.danger:hover {
  background: #911414;
}

.row {
  display: flex;
  gap: 14px; /* more spacing so buttons don't touch */
  align-items: center;
  flex-wrap: wrap;
}

.module-group {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px;
  margin-top: 10px;
}

/* Remove unwanted strong/black outlines around module cards introduced by
   some templates or inline styles. Keep subtle grouping via .module-group
   but ensure inner module boxes don't get a heavy black border. */
.module-card,
.module-box,
.module,
.module-wrapper,
.module-frame,
.module-entry,
.module-row,
.controller-block .module-group {
  border: 1px solid rgba(0,0,0,0.06) !important;
  background: #ffffff !important;
  box-shadow: 0 6px 18px rgba(9,30,35,0.04) !important;
  border-radius: 10px !important;
}

/* Neutralize any fieldset borders while keeping the card look */
.module fieldset,
.module fieldset * {
  border: none !important;
  background: transparent !important;
}

/* Controller block layout: inputs grow, buttons fixed, and everything fits inside the card */
.controller-block {
  display: flex;
  gap: 24px; /* increased gap so scan button is further from the input */
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  background: transparent;
}
.controller-block .controllerInput,
.controller-block .controllerMeterkast,
.controller-block input[type='text'] {
  flex: 1 1 auto;
  min-width: 0; /* allow flex children to shrink and respect container */
  align-self: center;
}

/* Make text inputs match button height so the Scan and Remove buttons align visually */
.controller-block .controllerInput,
.controller-block .controllerMeterkast,
.controller-block input[type='text'] {
  height: 38px;
  box-sizing: border-box;
  padding-top: 6px;
  padding-bottom: 6px;
}
.controller-block label {
  margin-right: 10px; /* space between label text and input */
  white-space: nowrap;
}
.controller-block .w-28 {
  width: 7rem; /* keep Meterkast label a consistent fixed width */
}
.controller-block .btn {
  flex: 0 0 auto;
  /* set to requested 38px height for a slightly slimmer look */
  height: 38px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
}
.controller-block .btn + .btn {
  margin-left: 8px;
}

/* Make Controller/Meterkast labels consistent width so inputs start at same x */
.controller-block label {
  flex: 0 0 7rem; /* same as .w-28 */
  width: 7rem;
  min-width: 7rem;
  margin-right: 12px; /* breathing room between label and input */
  text-align: left;
}

@media (max-width: 680px) {
  .controller-block label {
    flex: 0 0 5.25rem; /* reduce label width on smaller screens */
    width: 5.25rem;
    min-width: 5.25rem;
  }
}

/* Ensure inputs align and share the same width baseline */
.controller-block .controllerInput,
.controller-block .controllerMeterkast {
  flex: 1 1 0;
}

/* Small extra gap between input and scan button (targeted) */
.controller-block .btn.small.primary[onclick*="openScanner('controller'"] {
  margin-left: 6px;
}

/* Ensure the remove (✕) button visually matches the scan button size */
.controller-block .btn.pill.danger {
  height: 38px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* If inputs still create a small baseline discrepancy in some browsers, nudge the remove button up slightly */
.controller-block .btn.pill.danger {
  transform: translateY(-1px);
}

/* Ensure outline/reset buttons use accent border (avoid black fallback) */
.btn-outline-icy,
.btn.btn-outline-icy,
#resetBtn.btn-outline-icy {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: #fff !important;
}

/* Keep header logo and title left-aligned above the card */
header {
  text-align: left;
}
header .icy-logo-svg {
  vertical-align: middle;
}

.scan-result {
  color: var(--success);
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 4px;
}

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}

#msgBox {
  font-size: 0.95rem;
  min-height: 1.2em;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Scanner overlay: subtle teal tint but highly transparent so content stays visible */
.overlay {
  background: rgba(50, 120, 110, 0.04); /* very light tint */
}
.overlay.scanning {
  /* darker translucent backdrop similar to mobile scanscreen */
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
}

/* Make the animated scan-line more visible (more opaque center, stronger glow) */
.scan-line {
  position: absolute;
  left: 31px; /* shortened by 21px on each side */
  right: 31px; /* shortened by 21px on each side */
  top: 10px;
  height: 3px;
  z-index: 10002; /* ensure the white scan-line sits above the corner brackets */
  pointer-events: none;
  background: #ffffff;
  opacity: 0.98;
  border-radius: 2px;
  box-shadow: 0 6px 22px rgba(255,255,255,0.16), 0 0 36px rgba(255,255,255,0.08);
  will-change: top, opacity;
  /* run the scanning animation by default; alternate to go down then up
     slower duration and smoother easing for a balanced up/down motion */
  animation: icy-scan-line 3900ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite alternate;
}
/* keep additional selector for when overlay.scanning is present (no-op duplicate) */
/* Move the scan-line from near top to near bottom of the scanner container */
@keyframes icy-scan-line {
  0% { top: 10px; opacity: 0.85; }
  50% { top: 50%; opacity: 1; }
  100% { top: calc(100% - 10px - 3px); opacity: 0.85; }
}

/* quick sharp focus visual when opening scanner to give immediate "locked" feel */
.overlay video.scanner-focus {
  transform: scale(1.02);
  filter: contrast(1.06) saturate(1.04);
  transition: transform 260ms cubic-bezier(0.4,0,0.2,1), filter 260ms cubic-bezier(0.4,0,0.2,1);
}

/* Hide the scan pulse; keep only brackets and moving scan-line visible */
.scan-pulse { display: none !important; }

/* Hide the floating status message (green letters on black) and restore the close/front-back controls */
.scan-status {
  display: none !important;
}

.overlay .close-btn,
.overlay .camera-switch-btn {
  z-index: 99999 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #ffffffcc !important; /* slightly translucent white */
  color: #111 !important;
  border: none !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 9999px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
  cursor: pointer !important;
}
.overlay .camera-switch-btn {
  right: 68px !important;
}
.overlay .close-btn {
  right: 12px !important;
}

/* Stronger visual corners for scan-frame so they remain visible on all backgrounds */
.scan-frame .corner {
  position: absolute;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  background: transparent;
  z-index: 9990; /* corners sit below the scan-line so the white stripe is always visible */
  pointer-events: none;
}

/* Use a single ::before element with borders to draw an L-shaped bracket.
   This keeps the interior transparent and eliminates any filled intersection. */
.scan-frame .corner::before {
  content: '';
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 3px solid transparent; /* default transparent borders */
  border-radius: 2px;
}
.scan-frame .corner-tl::before,
.scan-frame .corner-tr::before,
.scan-frame .corner-bl::before,
.scan-frame .corner-br::before {
  /* remove any border-based drawing so only the SVG background-image shows */
  border: none !important;
  background-color: transparent !important;
}
.overlay.scanning .scan-frame .corner::before {
  /* ensure no border-color is applied in scanning state */
  border: none !important;
  background-color: transparent !important;
}

/* Position the corner containers so each corner sits where expected */
.scan-frame .corner-tl {
  top: 10px;
  left: 10px;
}
.scan-frame .corner-tr {
  top: 10px;
  right: 10px;
}
.scan-frame .corner-bl {
  bottom: 10px;
  left: 10px;
}
.scan-frame .corner-br {
  bottom: 10px;
  right: 10px;
}
.scan-frame .corner-tl {
  top: 10px;
  left: 10px;
}
.scan-frame .corner-tr {
  top: 10px;
  right: 10px;
}
.scan-frame .corner-bl {
  bottom: 10px;
  left: 10px;
}
.scan-frame .corner-br {
  bottom: 10px;
  right: 10px;
}

/* Draw crisp L-shaped bracket using an inline SVG as background on ::before. */
.scan-frame .corner::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  /* make the SVG exactly fill the corner box and align to the corner so the inner
    corner sits flush with the video edge — prevents any centered square from
    overlapping the scan-line */
  background-position: left top;
  background-size: 28px 28px;
  /* blue L-shaped bracket, rounded caps — larger SVG to match 48px container
    inner corner moved closer to container edge (starts at 2px) so scan-line can sit flush */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><path d='M2 2 L46 2 M2 2 L2 46' stroke='%232b9cff' stroke-width='5' stroke-linecap='round' fill='none'/></svg>");
  filter: drop-shadow(0 8px 20px rgba(43,156,255,0.16));
}
/* rotate each corner's SVG so the L shape points outward, and position the SVG
   to exactly the corner (background-position) to avoid centering artifacts */
.scan-frame .corner-tr::before { transform: rotate(90deg); background-position: right top; }
.scan-frame .corner-br::before { transform: rotate(180deg); background-position: right bottom; }
.scan-frame .corner-bl::before { transform: rotate(270deg); background-position: left bottom; }
.overlay.scanning .scan-frame .corner::before {
  /* ensure visible while scanning; use smaller SVG fitting 28px */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><path d='M2 2 L26 2 M2 2 L2 26' stroke='%232b9cff' stroke-width='4' stroke-linecap='round' fill='none'/></svg>");
  background-size: 28px 28px;
}

/* nudge corner positions closer to the inner edge for visual match */
.scan-frame .corner-tl { top: 8px; left: 8px; }
.scan-frame .corner-tr { top: 8px; right: 8px; }
.scan-frame .corner-bl { bottom: 8px; left: 8px; }
.scan-frame .corner-br { bottom: 8px; right: 8px; }

.scanner-container {
  position: relative;
  width: 300px;
  height: 300px;
}

.overlay video {
  width: 300px;
  height: 300px;
  border-radius: 12px;
  background: #000;
  object-fit: cover;
  z-index: 1;
}

/* central translucent scan-frame appearance */
.scan-frame {
  position: absolute; /* overlay the video fully */
  inset: 0; /* fill the video container */
  border-radius: 12px;
  overflow: visible;
  background: transparent; /* no filled center */
  border: none;
  box-shadow: none;
  z-index: 10;
}

/* Green focus square shown briefly when a code is detected */
.scan-focus {
  position: absolute;
  left: 8%;
  top: 8%;
  width: 84%;
  height: 84%;
  border-radius: 12px;
  pointer-events: none;
  box-sizing: border-box;
  border: 3px solid rgba(34,197,94,0.0); /* transparent by default */
  box-shadow: 0 10px 30px rgba(16,185,129,0.0), 0 0 0 rgba(34,197,94,0.0);
  transition: border-color 160ms ease, box-shadow 220ms ease, transform 160ms ease, opacity 260ms ease;
  opacity: 0;
  transform: scale(0.98);
  z-index: 10005; /* above corners and scan-line */
}

/* Active / locked focus state */
.scan-focus.active {
  opacity: 1;
  border-color: rgba(34,197,94,0.95);
  box-shadow: 0 20px 48px rgba(16,185,129,0.22), 0 0 36px rgba(34,197,94,0.12);
  transform: scale(1);
}

/* Small pulse on successful lock to give feedback */
.scan-focus.pulse {
  animation: focus-pulse 560ms ease-out 1;
}

@keyframes focus-pulse {
  0% { transform: scale(0.96); box-shadow: 0 10px 30px rgba(16,185,129,0.08); }
  50% { transform: scale(1.03); box-shadow: 0 28px 68px rgba(16,185,129,0.28); }
  100% { transform: scale(1); box-shadow: 0 16px 44px rgba(16,185,129,0.18); }
}

/* bottom help bubble similar to screenshot */
.scanner-help {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  background: rgba(255,255,255,0.96);
  color: #111;
  padding: 12px 16px;
  border-radius: 14px;
  max-width: calc(100% - 36px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.38);
  font-weight: 700;
  text-align: center;
  z-index: 9998;
}

/* Make overlay interactive (buttons) while the visual/video layers don't block clicks */
.overlay {
  pointer-events: auto; /* allow child buttons to be clickable */
}
.overlay video,
.overlay canvas,
.scan-frame {
  pointer-events: none; /* video and canvas shouldn't catch clicks */
}
.overlay .close-btn,
.overlay .camera-switch-btn {
  pointer-events: auto; /* buttons must be clickable */
}

.overlay .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 8px 10px;
  border: none;
  background: rgba(255, 255, 255, 0.25);
  color: white;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 18px;
}

#feedbackBar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: var(--accent);
  width: 0;
  transition:
    width 0.3s ease,
    background 0.3s ease;
  z-index: 99999;
}

/* Mobile-specific button appearance tweaks to match requested visuals */
@media (max-width: 600px) {
  /* Pill-style primary buttons (e.g. Scan) */
  .btn.pill,
  .btn.pill:not(.danger) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
    line-height: 1;
  }

  .btn.pill img,
  .btn.pill .icon,
  .btn.pill i {
    width: 20px;
    height: 20px;
    display: inline-block;
  }

  /* Small circular danger buttons (delete) */
  .btn.small.danger,
  .btn.pill.danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: var(--error);
    color: #fff;
    box-shadow: none;
    border: none;
    line-height: 1;
  }

  .btn.small.danger .label,
  .btn.small.danger span.label {
    display: none !important;
  }

  .btn.small.danger svg,
  .btn.small.danger i,
  .btn.small.danger .icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 1;
  }

  /* Spacing for pill buttons in control rows */
  .controls .btn.pill,
  .row .btn.pill {
    margin-left: 6px;
    margin-right: 6px;
  }
}

/* Small info button next to version text */
.info-btn {
  padding: 4px 6px;
  font-size: 13px;
  border-radius: 9999px; /* fully rounded */
  height: 36px;
  min-width: 36px;
  width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(50, 120, 110, 0.06);
  color: var(--accent);
  border: 1px solid rgba(50, 120, 110, 0.08);
  box-shadow: 0 2px 12px rgba(50, 120, 110, 0.06);
  /* Important: only scale via font-size or container size — avoid transform that would distort circle */
  transform: none !important;
}

/* Prevent info buttons from inheriting .btn width rules on small screens */
.info-btn,
#infoBtnFixed {
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 600px) {
  .info-btn,
  #infoBtnFixed {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    font-size: 14px !important;
  }
}

/* Make Klantnaam and Datum slightly shorter (80%) on larger screens */
@media (min-width: 600px) {
  #clientName,
  #scanDate {
    width: 80%;
    max-width: 720px;
  }
  /* Make meterkast inputs slightly shorter as well */
  .controllerMeterkast {
    width: 80%;
    max-width: 420px;
  }
}

.progress-container {
  height: 5px;
  width: 100%;
  background: #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 6px;
}

.progress-bar {
  height: 5px;
  width: 0;
  background: var(--accent);
  transition: width 0.3s ease;
}

.logo {
  height: 36px;
}

header {
  display: block;
  margin-bottom: 12px;
}

header .header-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Align the header content with the centered card so logo sticks to the card area */
header .header-inner {
  max-width: 720px; /* match .card */
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  box-sizing: border-box;
}

.card {
  position: relative;
  overflow: visible;
}

#icyToast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: 12px;
  color: #fff;
  font-weight: 600;
  z-index: 99999;
  opacity: 0;
  transition:
    opacity 0.5s,
    bottom 0.5s;
  /* default neutral background; per-type classes override */
  background: rgba(0, 0, 0, 0.65);
}

/* Typed toast colors */
#icyToast.icy-toast--danger {
  background: var(--error) !important;
}
#icyToast.icy-toast--success {
  background: var(--success) !important;
}
#icyToast.icy-toast--info {
  background: var(--info) !important;
}
#icyToast.icy-toast--warning {
  background: var(--warning) !important;
}
/* Map old/duplicate messages to danger color */
#icyToast.icy-toast--duplicate {
  background: var(--error) !important;
}

/* Enhanced info button appearance and improved info-card styling */
#infoBtnFixed {
  box-shadow: 0 6px 18px rgba(50, 120, 110, 0.16);
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  font-weight: 700;
}
#infoBtnFixed:hover {
  box-shadow: 0 8px 22px rgba(50, 120, 110, 0.18);
}

.info-card {
  padding: 22px;
  border-radius: 12px;
  max-width: 560px;
}
.info-card h3 {
  font-weight: 800;
  margin-top: 0;
  font-size: 1.4rem;
  margin-bottom: 10px;
}
.info-card ul {
  margin: 12px 0 12px 20px;
  padding: 0;
}
.info-card li {
  margin-bottom: 10px;
  line-height: 1.45;
  font-size: 1rem;
}
.info-close {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--muted);
}
.info-card hr {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin: 12px 0 14px;
}
.info-card p.lead {
  color: var(--muted);
  margin: 6px 0 12px;
}
.info-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--accent);
  border: 2px solid rgba(50, 120, 110, 0.16);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  width: auto;
  cursor: pointer;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}
.info-ok:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 18px rgba(50, 120, 110, 0.14);
}

.info-ok svg {
  fill: currentColor;
}

.info-ok:focus,
.info-ok:active {
  outline: none;
  transform: translateY(0);
}

/* Slightly larger bullets and link visuals */
.info-card a {
  color: var(--accent);
  text-decoration: underline;
}
.info-card ul {
  list-style-type: disc;
}

@media (max-width: 600px) {
  #infoBtnFixed {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
  .info-card {
    padding: 16px;
  }
  .info-ok {
    width: 100%;
  }
}

/* Extra ICY accent backgrounds voor data rijen in Node.js/Excel export preview */
.data-row {
  background: #e5f7f8;
}

/* Responsiveness verbeteringen */
@media (max-width: 768px) {
  .wrap {
    padding: 10px;
  }

  h1 {
    font-size: 1.1rem;
    flex-wrap: wrap;
  }

  .logo {
    height: 30px;
  }

  .card {
    padding: 10px;
  }

  .row:not(.controls-row) {
    flex-direction: column;
    align-items: stretch;
  }

  input[type='text'],
  input[type='date'] {
    font-size: 16px; /* voorkomt iOS zoom bij focus */
  }

  /* Keep control rows inline and avoid forcing footer buttons full-width on small screens */
  .controls-row {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 10px; /* extra space above the control buttons */
  }

  /* Add horizontal padding so buttons don't sit flush against the card edge */
  .card .controls-row {
    padding-left: 24px; /* larger inset from card edge */
    padding-right: 24px;
    box-sizing: border-box;
  }
  .row .btn,
  .controls-row .btn {
    width: auto !important;
    max-width: none !important;
    justify-content: center;
  }
  .card footer {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  /* Keep small danger (delete) buttons compact on small screens.
     They should remain circular/compact instead of stretching full-width. */
  .btn.small.danger {
    width: auto !important;
    min-width: 40px;
    height: 40px;
    padding: 0 8px !important;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 18px;
  }

  /* Stronger override: ensure small danger buttons never stretch inside .row */
  .row .btn.small.danger {
    width: auto !important;
    max-width: 48px;
    min-width: 40px;
    height: 40px;
    padding: 0 !important;
    flex: 0 0 auto !important;
    align-self: flex-start;
  }

  /* Also handle pill-styled danger buttons which are used in some templates */
  .btn.pill.danger,
  .row .btn.pill.danger {
    width: auto !important;
    max-width: 56px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
  }

  footer {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  footer button {
    width: 100%;
  }

  .scanner-container {
    width: 250px;
    height: 250px;
  }

  .overlay video {
    width: 250px;
    height: 250px;
  }

  #icyToast {
    width: 90%;
    left: 5%;
    transform: none;
    text-align: center;
  }
}

/* Mobile UX improvements: make inputs more visible and ensure footer buttons fit */
@media (max-width: 600px) {
  /* Make text inputs more legible on mobile: white background, subtle border and inner shadow */
  input[type='text'],
  input[type='date'],
  .controller-block .controllerInput,
  .controller-block .controllerMeterkast,
  .controller-block input[type='text'] {
    background: #ffffff !important;
    border: 1px solid rgba(16, 24, 32, 0.06) !important;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.03) !important;
    color: #0b1220 !important;
  }

  /* Stack controller block elements vertically on narrow screens so labels and inputs are clear */
  .controller-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px !important;
    align-items: stretch;
  }
  .controller-block label {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    text-align: left;
    font-size: 0.95rem;
  }
  .controller-block .controllerInput,
  .controller-block .controllerMeterkast,
  .controller-block input[type='text'] {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Keep small danger buttons compact but aligned on the same baseline when stacked */
  .controller-block .row,
  .controller-block .module-group {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
  }

  /* Make footer buttons fit: use a 3-column grid on mobile so the three primary buttons fit nicely */
  .card footer {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
  }
  .card footer .btn {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding: 10px 12px !important;
  }

  /* Ensure the Reset button keeps its outlined appearance while matching sizing */
  .card footer button#resetBtn.btn-outline-icy {
    background: #ffffff !important;
    color: var(--accent) !important;
    border: 1px solid rgba(74,234,220,0.18) !important;
    box-shadow: none !important;
  }
}

@media (max-width: 420px) {
  /* On very small phones, stack to two rows (2 / 1) so labels and inputs never feel cramped */
  .card footer {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Make the primary generate button span both columns for prominence */
  .card footer .btn.generate-excel,
  .card footer button#generateExcel {
    grid-column: 1 / -1 !important;
  }
  /* Slightly reduce label size to preserve space */
  .controller-block label {
    font-size: 0.9rem !important;
  }
}

/* Preserve button sizing on small screens: ensure our visual buttons don't collapse to full-width */
@media (max-width: 680px) {
  /* Generic buttons should remain pill-shaped (rounded) not circular */
  .controls-row .btn,
  .card footer .btn,
  .row .btn,
  .btn.small,
  .btn.pill {
    width: auto !important;
    min-width: 84px !important; /* match desktop min-width */
    height: 38px !important;
    padding: 6px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  box-shadow: 0 6px 18px rgba(50, 120, 110, 0.06) !important;
    border-radius: 999px !important; /* pill-shaped */
  }

  /* Keep danger variants compact and circular */
  .btn.pill.danger,
  .btn.small.danger,
  .row .btn.pill.danger {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
  }

  /* keep controls row from stretching buttons across the whole width */
  .card .controls-row {
    justify-content: flex-start !important;
  }
}

/* Visual feedback when a button is temporarily disabled/processing */
.btn.loading,
.btn[disabled] {
  opacity: 0.7;
  pointer-events: none;
}

@media (max-width: 400px) {
  h1 {
    font-size: 1rem;
  }

  .btn.small {
    font-size: 13px;
    padding: 8px;
  }

  label {
    font-size: 0.85rem;
  }
}

/* Keep the info button compact on small screens and avoid full-width behavior */
@media (max-width: 600px) {
  .info-btn {
    width: 28px !important;
    min-width: 28px !important;
    padding: 4px !important;
  }

  #infoBtnFixed:active,
  #infoBtnFixed:focus,
  #infoBtnFixed:hover {
  box-shadow: 0 6px 18px rgba(50, 120, 110, 0.12);
  }

  /* Make the fixed info button more solid: filled accent background with white 'i' */
  #infoBtnFixed {
    background: var(--accent) !important;
    color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
  }
  #infoBtnFixed {
    cursor: pointer;
  }
  #infoBtnFixed:active,
  #infoBtnFixed:focus,
  #infoBtnFixed:hover {
  box-shadow: 0 4px 14px rgba(50, 120, 110, 0.10);
  }

  /* Tailwind-compatible card utility fallback for legacy .card class when tailwind.output.css isn't present */
  .card.bg-white {
    background: var(--card);
  }
  .rounded-xl {
    border-radius: 0.75rem;
  }
  .shadow {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }
  .p-4 {
    padding: 1rem;
  }

  /* ICY helper utilities */
  .bg-icy {
    background: var(--accent) !important;
    color: #fff !important;
  }
  .text-icy {
    color: var(--accent) !important;
  }
  .border-icy {
  border-color: rgba(50, 120, 110, 0.10) !important;
  }

  /* Button hover/active helpers for ICY theme */
  .bg-icy:hover,
  .bg-icy:focus {
    background: var(--accent-dark) !important;
  }
  .btn.bg-icy:active,
  .btn.bg-icy:focus {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(1px);
  }
  .btn {
    transition:
      transform 120ms ease,
      box-shadow 140ms ease;
  }

  /* Make most buttons use the ICY filled style by default unless explicitly marked
   as danger, ghost, or outline. This ensures consistent visuals across the UI. */
  .btn:not(.danger):not(.btn-outline-icy):not(.btn-icy):not(.btn-ghost) {
    background: var(--accent) !important;
    color: #fff !important;
  box-shadow: 0 6px 18px rgba(50, 120, 110, 0.10) !important;
  }
  .btn:not(.danger):not(.btn-outline-icy):not(.btn-icy):not(.btn-ghost):hover,
  .btn:not(.danger):not(.btn-outline-icy):not(.btn-icy):not(.btn-ghost):focus {
    background: var(--accent-dark) !important;
  }

  /* Strong enforcement for footer buttons inside the main card to avoid external overrides */
  .card footer .btn:not(.danger):not(.btn-outline-icy):not(.btn-ghost) {
    background: var(--accent) !important;
    color: #fff !important;
  }
  .card footer .btn:not(.danger):not(.btn-outline-icy):not(.btn-ghost):hover {
    background: var(--accent-dark) !important;
  }

  /* Strong, explicit ICY button utilities to override other rules when needed */
  .btn-icy {
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
  box-shadow: 0 6px 18px rgba(50, 120, 110, 0.10) !important;
    height: 8px;
  }
  .btn-icy:hover,
  .btn-icy:focus {
    background: linear-gradient(
      90deg,
      rgba(225, 29, 72, 0) 0%,
      rgba(225, 29, 72, 0.98) 50%,
      rgba(225, 29, 72, 0) 100%
    );
    box-shadow: 0 0 18px rgba(225, 29, 72, 0.55);
    opacity: 1;
    border-radius: 6px;
    color: var(--accent) !important;
    border: 2px solid var(--accent) !important;
  /* removed animation here to avoid accidental scan-like animation on buttons */
  }
  .btn-outline-icy:hover,
  .btn-outline-icy:focus {
  background: rgba(50, 120, 110, 0.04) !important;
  }

  /* Reduce default button padding on very small screens */
  .btn {
    padding: 8px 10px;
    font-size: 14px;
  }
  .btn.small {
    font-size: 13px;
    padding: 6px 8px;
  }
}

/* Desktop: slightly larger padding so card looks spacious on wide screens */
@media (min-width: 1024px) {
  .card {
    padding: 20px;
  }
}

/* Mobile adjustments: reduce padding and allow buttons to shrink a bit */
@media (max-width: 420px) {
  .card {
    padding: 10px;
  }
  .btn {
    min-width: 64px;
    padding: 8px 10px;
    font-size: 13px;
  }
  .controls-row {
    gap: 10px;
  }
}

/* Extra specific override for the Reset button to ensure outline isn't overridden
   Uses ID and class specificity plus !important to beat other rules. */
.card footer button#resetBtn.btn-outline-icy {
  background: #fff !important;
  color: var(--accent) !important;
  border: none !important; /* removed border to make it flat */
  box-shadow: none !important;
}
.card footer button#resetBtn.btn-outline-icy:hover,
.card footer button#resetBtn.btn-outline-icy:focus {
  background: rgba(50, 120, 110, 0.06) !important;
  box-shadow: 0 6px 18px rgba(50, 120, 110, 0.10) !important;
  transform: translateY(-2px);
}

/* Slight extra spacing for the footer area to separate buttons from inputs */
.card footer {
  padding-top: 24px; /* increased space above footer controls */
}

/* Ensure footer buttons also respect horizontal inset from the card edge */
.card footer {
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* Desktop: add a larger horizontal inset for the controls row so buttons don't sit flush
   against the card edge (matches the user's requested yellow-stripe inset).
   Match mobile spacing so the buttons retain the same inset and top gap across
   breakpoints while keeping responsiveness. */
.card .controls-row {
  margin-top: 12px; /* match mobile gap above the controls */
  padding-top: 10px; /* keep the small top padding from mobile */
  /* align left edge with card padding (p-4 / 1rem = 16px) so buttons line up with inputs */
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* Make Reset button in controls-row have the same hover affordance as the footer one */
.controls-row #resetBtn.btn-outline-icy,
.card footer button#resetBtn.btn-outline-icy {
  transition:
    box-shadow 160ms ease,
    transform 140ms ease,
    background 120ms ease;
}
.controls-row #resetBtn.btn-outline-icy:hover,
.controls-row #resetBtn.btn-outline-icy:focus {
  background: rgba(50, 120, 110, 0.06) !important;
  box-shadow: 0 6px 18px rgba(50, 120, 110, 0.10) !important;
  transform: translateY(-2px);
}

/* Very specific hover override to ensure Reset shows a visible hover/tactile affordance
   across browsers and to beat any utility rules that may override the lighter styles. */
.card .controls-row button#resetBtn.btn-outline-icy:hover,
.card .controls-row button#resetBtn.btn-outline-icy:focus,
.card footer button#resetBtn.btn-outline-icy:hover,
.card footer button#resetBtn.btn-outline-icy:focus {
  background: rgba(50, 120, 110, 0.10) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  box-shadow: 0 10px 30px rgba(50, 120, 110, 0.12) !important;
  transform: translateY(-3px) !important;
}