:root{--bg:#f3f5f7;--card:#fff;--text:#0f172a;--muted:#667085;--line:#e5e8ed;--navy:#0b2d64;--orange:#e97b24;--green:#22a86d}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.app{max-width:720px;margin:auto;padding:18px 14px 100px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.brand{font-size:11px;font-weight:900;letter-spacing:.11em;color:var(--navy)}h1{margin:2px 0 0;font-size:27px;letter-spacing:-.03em}.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:800}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px}.stat span,.stat small{display:block;color:var(--muted);font-size:12px}.stat strong{display:block;font-size:28px;margin:4px 0}.stat.orange strong{color:var(--orange)}
.scanner-card{background:#fff;border:1px solid var(--line);border-radius:21px;padding:17px;margin-top:12px}.section-title{display:flex;align-items:center;justify-content:space-between}.section-title small,.sheet-header small{font-size:10px;letter-spacing:.08em;font-weight:900;color:var(--muted)}.section-title h2{margin:2px 0;font-size:21px}.section-title>span{font-size:12px;background:#eef2f6;border-radius:999px;padding:7px 10px;color:#475467;font-weight:700}.scanner-card>p{font-size:13px;color:var(--muted);line-height:1.45}.primary{width:100%;min-height:57px;border:0;border-radius:15px;background:linear-gradient(90deg,#092a5c,#153b77);color:#fff;font-weight:850;font-size:16px}
.scanner-area{margin-top:13px;background:#090b0e;border-radius:18px;padding:10px;position:relative;overflow:hidden}#reader{min-height:310px;background:#000;border-radius:13px;overflow:hidden}#reader video{object-fit:cover!important}.camera-overlay{position:absolute;inset:10px 10px 75px;pointer-events:none}.label-frame{position:absolute;left:6%;right:6%;top:39%;height:22%;border:2px solid #fff;border-radius:10px;box-shadow:0 0 0 9999px rgba(0,0,0,.56)}.scan-line{position:absolute;left:5%;right:5%;height:2px;top:50%;background:var(--green);box-shadow:0 0 11px var(--green)}.scanner-help{text-align:center;color:#d6dbe2;font-size:10px;font-weight:800;letter-spacing:.06em;padding:9px}.dark-button{width:100%;min-height:44px;border:1px solid #3d454e;border-radius:11px;background:#20252b;color:#fff;font-weight:700}.manual-row{display:flex;gap:8px;margin-top:10px}.manual-row input{min-width:0;flex:1;min-height:48px;border:1px solid var(--line);border-radius:12px;padding:0 12px;font-size:16px}.manual-row button{border:0;border-radius:12px;background:#111827;color:#fff;padding:0 14px;font-weight:750}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.quick-grid button{min-height:76px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:16px;padding:13px}.quick-grid b,.quick-grid span{display:block}.quick-grid span{font-size:11px;color:var(--muted);margin-top:3px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.58);z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:12px}.sheet{width:100%;max-width:690px;max-height:92vh;overflow:auto;background:#fff;border-radius:24px 24px 16px 16px;padding:18px}.sheet-header{display:flex;justify-content:space-between;gap:12px}.sheet-header h2{margin:4px 0 2px;font-size:23px}.sheet-header p{margin:2px 0;font-size:12px;color:var(--muted)}.sheet-header button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:24px}.product-visual{height:110px;display:grid;place-items:center}.luminaire{width:132px;height:66px;border-radius:50%;background:radial-gradient(ellipse,#111 0 14%,#292929 15% 31%,#101010 32% 45%,#303030 46% 58%,#0c0c0c 59% 70%,transparent 71%)}.facts{display:grid;grid-template-columns:1fr 1fr;gap:8px}.facts>div{background:#f7f8fa;border-radius:14px;padding:11px}.facts span{display:block;font-size:11px;color:var(--muted)}.facts strong{font-size:20px}.details{margin-top:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.details div{display:flex;justify-content:space-between;gap:12px;padding:9px 2px;font-size:13px}.details span{color:var(--muted)}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}.actions button{min-height:50px;border:1px solid var(--line);border-radius:13px;background:#fff;font-weight:750}.actions .action-main{background:var(--navy);color:#fff;border-color:var(--navy)}.toast{position:fixed;z-index:70;left:50%;bottom:22px;transform:translateX(-50%);max-width:90%;background:#111827;color:#fff;border-radius:999px;padding:11px 14px;font-size:13px;text-align:center}
@media(min-width:590px){.stats{grid-template-columns:repeat(4,1fr)}.quick-grid{grid-template-columns:repeat(4,1fr)}}

/* =========================================================
   TEAMTRONIC LAGERBOARD
   MOBILFIX TIL VARE-POPUP
   Tilføj nederst i styles.css
   ========================================================= */

/* Forhindrer hele siden/popup i at kunne scrolles vandret */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.modal {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 10px;
  overflow-x: hidden;
}

/* Selve varekortet */
.sheet {
  box-sizing: border-box;
  width: 100%;
  max-width: 680px;
  min-width: 0;
  margin: 0 auto;

  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overflow-x: hidden;

  border-radius: 24px;
  padding: 18px;

  -webkit-overflow-scrolling: touch;
}

/* Headeren må aldrig presse popup bredere */
.sheet-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  width: 100%;
  min-width: 0;
}

.sheet-header > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 50px);
}

/* Lang BC-beskrivelse brydes pænt */
#pName {
  width: 100%;
  max-width: 100%;
  margin: 5px 0 8px;

  font-size: clamp(22px, 6vw, 32px);
  line-height: 1.08;
  font-weight: 800;

  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Varenummer / EAN */
#pNumber,
#pEan {
  margin: 3px 0;
  max-width: 100%;

  font-size: 16px;
  line-height: 1.3;

  color: #667085;

  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Luk-knappen skal altid blive inde i popup'en */
#closeModal {
  flex: 0 0 42px;

  width: 42px;
  height: 42px;

  padding: 0;
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
}

/* Illustration må ikke være for stor */
.product-visual {
  width: 100%;
  max-width: 100%;
  min-height: 110px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  margin: 6px 0 12px;
}

.luminaire {
  max-width: 170px;
  max-height: 105px;
}

/* Lagerkort */
.facts {
  width: 100%;
  min-width: 0;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.facts > div {
  min-width: 0;
  padding: 12px;
}

.facts span,
.facts strong {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Detaljer */
.details {
  width: 100%;
  min-width: 0;
}

.details > div {
  width: 100%;
  min-width: 0;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  align-items: center;
  gap: 12px;

  padding: 10px 2px;
}

.details > div > span {
  min-width: 0;
}

.details > div > b {
  min-width: 0;
  text-align: right;

  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Store mobilvenlige handlingsknapper */
.actions {
  width: 100%;
  min-width: 0;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;

  margin-top: 14px;
}

.actions button {
  width: 100%;
  min-width: 0;
  min-height: 56px;

  padding: 10px 8px;

  font-size: 15px;
  line-height: 1.15;
  font-weight: 750;

  white-space: normal;
  overflow-wrap: anywhere;
}

/* =========================================================
   IPHONE / SMÅ MOBILER
   ========================================================= */

@media (max-width: 520px) {

  .modal {
    padding:
      max(8px, env(safe-area-inset-top))
      8px
      max(8px, env(safe-area-inset-bottom));
  }

  .sheet {
    width: 100%;
    max-width: 100%;

    padding: 16px;
    border-radius: 22px;

    max-height: calc(100dvh - 16px);
  }

  .sheet-header {
    gap: 8px;
  }

  .sheet-header > div:first-child {
    max-width: calc(100% - 46px);
  }

  #pName {
    font-size: 24px;
    line-height: 1.08;
  }

  #pNumber,
  #pEan {
    font-size: 15px;
  }

  #closeModal {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  .product-visual {
    min-height: 90px;
  }

  .luminaire {
    max-width: 145px;
  }

  .facts > div {
    min-height: 82px;
    padding: 11px;
  }

  .facts span {
    font-size: 12px;
  }

  .facts strong {
    font-size: 22px;
  }

  .details > div {
    grid-template-columns: 42% 58%;
    gap: 8px;
  }

  .actions button {
    min-height: 58px;
    font-size: 14px;
  }
}

/* Ekstra smalle telefoner */
@media (max-width: 360px) {

  .sheet {
    padding: 13px;
  }

  #pName {
    font-size: 21px;
  }

  .actions {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   TEAMTRONIC LAGERBOARD
   REN / CENTRERET SCANNERRAMME TIL MOBIL
   Tilføj HELT NEDERST i styles.css
   ========================================================= */

.scanner-area {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #05070a;
  padding: 12px;
}

#reader {
  position: relative;
  width: 100%;
  min-height: 430px;
  overflow: hidden;
  border-radius: 18px;
  background: #000;
}

#reader video {
  display: block !important;
  width: 100% !important;
  height: 430px !important;
  object-fit: cover !important;
  border-radius: 18px;
}

/* Fjern html5-qrcode's egne markeringsgrafikker hvis de vises */
#reader__scan_region img,
#reader__dashboard_section_csr span,
#reader div[style*="border"] {
  box-sizing: border-box;
}

/* Hele vores eget overlay */
.camera-overlay {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  height: 430px;
  pointer-events: none;
  z-index: 10;
}

/* Én ren aflang labelramme */
.label-frame {
  position: absolute;

  left: 7%;
  right: 7%;

  top: 50%;
  transform: translateY(-50%);

  height: 132px;

  border: 3px solid rgba(255,255,255,.98);
  border-radius: 18px;

  background: rgba(255,255,255,.025);

  box-shadow:
    0 0 0 9999px rgba(0,0,0,.43),
    inset 0 0 0 1px rgba(0,0,0,.12);

  overflow: hidden;
}

/* Scan-linjen helt præcist i midten */
.label-frame .scan-line {
  position: absolute;

  left: 6%;
  right: 6%;

  top: 50%;
  transform: translateY(-50%);

  height: 3px;

  background: #24c889;
  border-radius: 999px;

  box-shadow:
    0 0 7px rgba(36,200,137,.55);
}

/* Fire diskrete hjørner DIREKTE på den hvide ramme */
.label-frame::before,
.label-frame::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  top: -3px;
  border-top: 6px solid #fff;
}

.label-frame::before {
  left: -3px;
  border-left: 6px solid #fff;
  border-radius: 16px 0 0 0;
}

.label-frame::after {
  right: -3px;
  border-right: 6px solid #fff;
  border-radius: 0 16px 0 0;
}

/* Nederste hjørner laves med ekstra pseudo-elementer via shadow */
.camera-overlay::before,
.camera-overlay::after {
  content: "";
  position: absolute;

  width: 34px;
  height: 34px;

  top: calc(50% + 66px - 31px);

  z-index: 12;
}

.camera-overlay::before {
  left: calc(7% - 3px);
  border-left: 6px solid #fff;
  border-bottom: 6px solid #fff;
  border-radius: 0 0 0 16px;
}

.camera-overlay::after {
  right: calc(7% - 3px);
  border-right: 6px solid #fff;
  border-bottom: 6px solid #fff;
  border-radius: 0 0 16px 0;
}

/* Teksten under kameraet */
.scanner-help {
  margin-top: 12px;
  padding: 0 8px;

  text-align: center;

  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: .09em;

  color: #a7adb7;
}

/* OCR-felt */
#ocrDebug {
  margin-top: 14px !important;
  background: #0b1115 !important;
  border: 1px solid #111a20;
  color: #55b98b !important;
}

/* Luk kamera */
#stopScan {
  width: 100%;
  margin-top: 12px;
}


/* =========================================================
   IPHONE
   ========================================================= */

@media (max-width: 520px) {

  .scanner-area {
    padding: 10px;
    border-radius: 20px;
  }

  #reader,
  #reader video {
    height: 400px !important;
    min-height: 400px;
  }

  .camera-overlay {
    left: 10px;
    right: 10px;
    top: 10px;
    height: 400px;
  }

  .label-frame {
    left: 6%;
    right: 6%;
    height: 118px;
    border-radius: 16px;
  }

  .camera-overlay::before,
  .camera-overlay::after {
    top: calc(50% + 59px - 31px);
  }

  .camera-overlay::before {
    left: calc(6% - 3px);
  }

  .camera-overlay::after {
    right: calc(6% - 3px);
  }
}