:root{
  --bg:#f4f7f5;--panel:#fff;--text:#142019;--muted:#65756c;--border:#d7e0db;
  --accent:#176b47;--accent-dark:#105235;--accent-soft:#e8f4ed;
  --danger:#a72f2f;--danger-soft:#fbeaea;--warn:#8a5a00;--warn-soft:#fff4d8;
  --shadow:0 8px 24px rgba(20,32,25,.08)
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
body{min-height:100vh}button,input,select{font:inherit}
.topbar{min-height:76px;padding:14px 20px;background:var(--panel);border-bottom:1px solid var(--border);
display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:20}
.topbar h1{margin:0;font-size:1.35rem}.connection-label{margin-top:3px;color:var(--muted);font-size:.9rem}
.topbar-actions{display:flex;align-items:center;gap:10px}.user-label{font-size:.9rem;color:var(--muted)}
.demo-banner{margin:12px 20px 0;padding:10px 14px;border:1px solid #e1bb67;border-radius:12px;background:var(--warn-soft);color:#674100}
.app-grid{display:grid;grid-template-columns:minmax(320px,42%) minmax(480px,58%);gap:16px;padding:16px 20px 20px;max-width:1600px;margin:0 auto}
.scanner-panel,.list-panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:18px;min-width:0}
.section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}
.section-heading h2{margin:0;font-size:1.15rem}.section-heading p{margin:5px 0 0;color:var(--muted);font-size:.9rem}
.session-chip{min-width:76px;background:var(--accent-soft);border-radius:12px;padding:8px 12px;text-align:center}
.session-chip span{display:block;color:var(--muted);font-size:.75rem}.session-chip strong{font-size:1.35rem;color:var(--accent-dark)}
.scan-row label,.list-controls label{display:block;font-weight:600;font-size:.9rem}
.scan-input-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:7px}
input,select{width:100%;min-height:46px;border:1px solid #bfcac4;border-radius:10px;padding:9px 11px;background:#fff;color:var(--text)}
input:focus,select:focus,button:focus{outline:3px solid rgba(23,107,71,.18);outline-offset:1px}
#barcode-input{font-size:1.15rem;font-weight:650;letter-spacing:.03em}
.helper,.camera-help{margin:6px 0 0;color:var(--muted);font-size:.82rem}
.button{min-height:44px;border-radius:10px;border:1px solid transparent;padding:9px 14px;cursor:pointer;font-weight:650}
.button:disabled{opacity:.55;cursor:wait}.button.primary,.button.camera{background:var(--accent);color:#fff}
.button.primary:hover,.button.camera:hover{background:var(--accent-dark)}.button.secondary{background:#253f33;color:#fff}
.button.ghost{background:#fff;border-color:var(--border);color:var(--text)}
.camera-actions{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}.camera-wrap{margin-top:12px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#101410}
#camera-reader{width:100%;min-height:240px;background:#101410}.camera-help{margin:0;padding:8px 10px;color:#e6eee9;background:#101410}
.status-card{margin-top:16px;min-height:82px;border-radius:14px;border:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:14px}
.status-card.neutral{background:#f7f9f8}.status-card.success{background:var(--accent-soft);border-color:#a9d2ba}
.status-card.error{background:var(--danger-soft);border-color:#e2aaaa}.status-card.warning{background:var(--warn-soft);border-color:#e1bb67}
.status-icon{font-size:1.8rem;width:34px;text-align:center}.status-card.success .status-icon{color:var(--accent)}
.status-card.error .status-icon{color:var(--danger)}.status-card.warning .status-icon{color:var(--warn)}
.status-title{font-size:1.05rem;font-weight:750}.status-message{margin-top:3px;color:var(--muted)}
.last-record{margin-top:16px;border-top:1px solid var(--border);padding-top:16px}.last-record-title{font-weight:700;margin-bottom:8px}
.last-record dl{margin:0}.last-record dl>div{display:grid;grid-template-columns:120px 1fr;gap:8px;padding:7px 0;border-bottom:1px solid #edf1ef}
.last-record dt{color:var(--muted)}.last-record dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.last-record .freezer-time-row{padding:10px;margin-top:8px;border:0;border-radius:10px;background:var(--accent-soft)}
.list-controls{display:grid;grid-template-columns:minmax(180px,1fr) minmax(200px,1fr);gap:10px;margin-bottom:12px}
.list-controls input,.list-controls select{margin-top:6px}.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px}
table{width:100%;border-collapse:collapse;min-width:760px}th,td{text-align:left;padding:11px 10px;border-bottom:1px solid #e8eeea;white-space:nowrap}
th{position:sticky;top:0;z-index:1;background:#f5f8f6;color:#45564d;font-size:.82rem}td{font-size:.9rem}
tbody tr:first-child td{background:#fbfdfc}tbody tr:hover td{background:#f7faf8}td.duration{font-weight:700}
.empty-row{text-align:center;color:var(--muted);padding:30px 10px}footer{padding:0 20px 20px;text-align:center;color:var(--muted);font-size:.78rem}
.hidden{display:none!important}
@media(max-width:900px){.app-grid{grid-template-columns:1fr}.list-panel{order:2}}
@media(max-width:600px){.topbar{padding:12px}.topbar h1{font-size:1.1rem}.user-label{display:none}.app-grid{padding:10px 12px 16px}
.scanner-panel,.list-panel{padding:14px;border-radius:13px}.scan-input-row,.list-controls{grid-template-columns:1fr}.last-record dl>div{grid-template-columns:105px 1fr}}

.camera-choice{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.85rem;font-weight:600}
.camera-choice select{width:auto;min-width:150px;min-height:44px;margin:0}
@media(max-width:600px){.camera-actions{align-items:stretch}.camera-choice{width:100%;justify-content:space-between}.camera-choice select{flex:1;max-width:220px}}


/* v1.6 compact camera controls */
.compact-camera-actions{
  align-items:center;
}
.icon-button{
  width:48px;
  height:48px;
  min-width:48px;
  border:1px solid var(--border);
  border-radius:50%;
  background:#fff;
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.35rem;
  cursor:pointer;
  line-height:1;
}
.icon-button:active{
  transform:scale(.97);
}
.camera-icon-button{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.close-camera-button{
  background:#fff;
  color:var(--danger);
}
.camera-current-label{
  color:var(--muted);
  font-size:.85rem;
  font-weight:600;
}
.three-controls{
  grid-template-columns:minmax(130px,.75fr) minmax(180px,1.25fr) minmax(190px,1fr);
}
@media(max-width:760px){
  .three-controls{grid-template-columns:1fr;}
}


/* v1.7 — camera controls and scan status share one horizontal row */
.camera-status-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:stretch;
  gap:10px;
  margin-top:14px;
}

.camera-status-row .camera-actions{
  margin-top:0;
  display:flex;
  align-items:center;
  align-self:stretch;
  gap:7px;
  flex-wrap:nowrap;
}

.camera-status-row .status-card{
  margin-top:0;
  min-height:64px;
  padding:10px 12px;
  min-width:0;
}

.camera-status-row .status-icon{
  flex:0 0 30px;
  width:30px;
  font-size:1.55rem;
}

.camera-status-row .status-text{
  min-width:0;
}

.camera-status-row .status-title{
  line-height:1.15;
}

.camera-status-row .status-message{
  line-height:1.25;
  overflow-wrap:anywhere;
}

.camera-status-row .camera-current-label{
  max-width:92px;
  line-height:1.15;
}

/* Keep the camera/status row together even on phones.
   The status card compresses while the camera controls stay tappable. */
@media(max-width:600px){
  .camera-status-row{
    grid-template-columns:auto minmax(0,1fr);
    gap:8px;
  }

  .camera-status-row .camera-actions{
    gap:5px;
  }

  .camera-status-row .status-card{
    min-height:60px;
    padding:9px 10px;
  }

  .camera-status-row .camera-current-label{
    display:none !important;
  }
}
\n\n/* v1.8 — no Check In button; camera control is beside Barcode */\n.scan-input-row{\n  grid-template-columns:minmax(0,1fr) auto;\n  align-items:stretch;\n}\n.barcode-camera-actions{\n  display:flex;\n  align-items:stretch;\n  gap:6px;\n}\n.barcode-camera-actions .icon-button{\n  min-width:52px;\n  min-height:46px;\n  height:100%;\n}\n.camera-status-row{\n  display:block;\n  margin-top:14px;\n}\n.camera-status-row .status-card{\n  width:100%;\n  margin-top:0;\n}\n@media(max-width:600px){\n  .scan-input-row{grid-template-columns:minmax(0,1fr) auto;}\n  .barcode-camera-actions .icon-button{min-width:50px;}\n}\n\n\n/* v1.9 — simplified scanner panel: no Session chip; status + trap info in one expandable group */\n.compact-heading{\n  margin-bottom:12px;\n}\n\n.scan-info-group{\n  margin-top:14px;\n  border:1px solid var(--border);\n  border-radius:14px;\n  overflow:hidden;\n  background:#fff;\n}\n.scan-info-group > summary{\n  list-style:none;\n  cursor:pointer;\n  position:relative;\n}\n.scan-info-group > summary::-webkit-details-marker{display:none;}\n.scan-info-group > summary::after{\n  content:"▸";\n  position:absolute;\n  right:13px;\n  top:50%;\n  transform:translateY(-50%);\n  color:var(--muted);\n  font-size:1.05rem;\n}\n.scan-info-group[open] > summary::after{content:"▾";}\n.scan-info-group .status-card{\n  margin:0;\n  min-height:66px;\n  border:0;\n  border-radius:0;\n  padding:11px 42px 11px 13px;\n}\n.scan-info-body{\n  border-top:1px solid var(--border);\n  padding:11px 13px 13px;\n}\n.scan-rules{\n  margin:0;\n  color:var(--muted);\n  font-size:.86rem;\n}\n.scan-info-group .last-record{\n  margin-top:10px;\n  padding-top:10px;\n}\n.session-chip{display:none!important;}\n\n@media(max-width:600px){\n  .scan-info-group .status-card{\n    min-height:62px;\n    padding:9px 38px 9px 10px;\n  }\n  .scan-info-body{padding:10px;}\n}\n

/* v1.10 — instructions moved behind an info button beside the section title */
.freezer-heading{
  margin-bottom:12px;
}

.title-with-info{
  display:flex;
  align-items:center;
  gap:8px;
  position:relative;
}

.title-with-info h2{
  margin:0;
}

.freezer-help{
  position:relative;
}

.freezer-help > summary{
  list-style:none;
  width:28px;
  height:28px;
  border:1px solid var(--border);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:var(--accent-dark);
  font-family:Georgia, "Times New Roman", serif;
  font-style:italic;
  font-weight:700;
  cursor:pointer;
  user-select:none;
}

.freezer-help > summary::-webkit-details-marker{
  display:none;
}

.freezer-help > summary:hover,
.freezer-help[open] > summary{
  background:var(--accent-soft);
  border-color:#a9d2ba;
}

.freezer-help-popover{
  position:absolute;
  z-index:30;
  top:36px;
  left:0;
  width:min(360px, calc(100vw - 56px));
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel);
  box-shadow:var(--shadow);
  font-size:.88rem;
  color:var(--text);
}

.freezer-help-popover > strong{
  display:block;
  margin-bottom:7px;
}

.freezer-help-popover p strong{
  display:inline;
  margin:0;
}

.freezer-help-popover p{
  margin:0;
}

.freezer-help-popover p + p{
  margin-top:7px;
}


/* v1.11 — instruction popover readability */
.freezer-help-popover{
  width:340px;
  max-width:calc(100vw - 40px);
  line-height:1.35;
}

.freezer-help-popover p{
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
}

@media(max-width:480px){
  .freezer-help-popover{
    width:min(320px, calc(100vw - 28px));
    left:-36px;
  }
}


/* v1.12 — sortable headers replace the Sort dropdown */
.list-controls.two-controls{
  grid-template-columns:minmax(170px,.65fr) minmax(220px,1.35fr);
}

.sort-header{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:700;
  padding:0;
  margin:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}

.sort-header:hover,
.sort-header.active{
  color:var(--accent-dark);
}

.sort-header:focus{
  outline:2px solid rgba(23,107,71,.22);
  outline-offset:3px;
  border-radius:4px;
}

.sort-indicator{
  display:inline-block;
  min-width:10px;
  font-size:.68rem;
  line-height:1;
}

@media(max-width:600px){
  .list-controls.two-controls{
    grid-template-columns:1fr;
  }
}


/* v1.14 — visual loading state for Traps Added queries */
.list-loading-host{
  position:relative;
}

.list-loading-overlay{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:120px;
  padding:18px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(1px);
  color:var(--muted);
  font-weight:650;
}

.spinner{
  width:22px;
  height:22px;
  border:3px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:freezer-spin .8s linear infinite;
  flex:0 0 auto;
}

@keyframes freezer-spin{
  to{transform:rotate(360deg)}
}

#refresh-btn.loading{
  cursor:wait;
}

#period-filter:disabled,
#refresh-btn:disabled{
  opacity:.65;
}

@media (prefers-reduced-motion: reduce){
  .spinner{
    animation-duration:1.6s;
  }
}


/* v1.17 — error X can reset the scanner to Ready */
.status-icon.status-reset{
  cursor:pointer;
  border-radius:50%;
  transition:background .15s ease, transform .15s ease;
}

.status-icon.status-reset:hover{
  background:rgba(180,40,40,.08);
}

.status-icon.status-reset:active{
  transform:scale(.94);
}

.status-icon.status-reset:focus{
  outline:2px solid rgba(180,40,40,.24);
  outline-offset:2px;
}


/* v1.18 — scan-result sound toggle */
.sound-toggle-button{
  width:30px;
  height:30px;
  min-width:30px;
  border:1px solid var(--border);
  border-radius:50%;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  font-size:.95rem;
  line-height:1;
}

.sound-toggle-button:hover{
  background:var(--accent-soft);
  border-color:#a9d2ba;
}

.sound-toggle-button:focus{
  outline:2px solid rgba(23,107,71,.22);
  outline-offset:2px;
}

.sound-toggle-button.muted{
  opacity:.62;
}


/* v1.19 — dedicated close button for all completed scan/status messages */
.scan-info-group .status-card{
  position:relative;
  padding-right:72px;
}

.status-close-btn{
  position:absolute;
  right:34px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  min-width:28px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--muted);
  font-size:1.35rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
}

.status-close-btn:hover{
  background:rgba(0,0,0,.06);
  color:var(--text);
}

.status-close-btn:active{
  transform:translateY(-50%) scale(.94);
}

.status-close-btn:focus{
  outline:2px solid rgba(23,107,71,.22);
  outline-offset:2px;
}

@media(max-width:600px){
  .scan-info-group .status-card{
    padding-right:68px;
  }

  .status-close-btn{
    right:31px;
  }
}