/* Container og titel */
.gfl-varemodtagelse{
  width:100%;
  max-width:none;
  margin:0;
  padding-bottom:40px;
}

.gfl-vm-title{
  margin:0 0 10px;
  font-size:22px;
  font-weight:800;
  text-align:left;
}

/* ====== Afdelingsfaner – samme stil som spild/personaleforbrug ====== */
.gfl-pf-tabs{
  position:relative;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:6px 0 10px;
  padding-bottom:6px;
}

.gfl-pf-tabs::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:#e5e7eb;
}

.gfl-pf-tab{
  appearance:none;
  border:1px solid #e5e7eb;
  background:#f6f8fb;
  color:#0f172a;
  padding:7px 14px;
  border-radius:10px 10px 0 0;
  font-weight:400;
  line-height:1;
  cursor:pointer;
  position:relative;
  top:1px;
  text-decoration:none;
  display:inline-block;
  transition:background .15s ease, border-color .15s ease;
}

.gfl-pf-tab:hover{
  background:#eef2f7;
}

.gfl-pf-tab.is-active{
  background:#fff;
  color:#0f172a;
  border-color:#d8dee6;
  border-bottom-color:#fff;
  z-index:1;
  box-shadow:none;
  font-weight:800;
}

/* ====== Tom-besked ====== */
.gfl-empty{
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  padding:12px;
  border-radius:8px;
}

/* ====== Liste / kort ====== */
.gfl-vm-actions{
  display:flex;
  gap:10px;
  margin:8px 0 12px;
}

.gfl-vm-list{
  display:grid;
  gap:12px;
}

.gfl-vm-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:14px;
  background:#fff;
}

.gfl-vm-check{
  display:flex;
  align-items:flex-start;
  padding-top:4px;
}

/* Øverste linje: varenavn + mængde-pill */
.gfl-vm-title-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:4px;
}

.gfl-pill{
  background:#eef2ff;
  color:#3730a3;
  border:1px solid #c7d2fe;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
}

/* Varekategori (Frostvare/Kølevare/…) */
.gfl-vm-category{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:999px;
  background:#f3f4f6;
  color:#0f172a;
  font-size:13px;
  font-weight:600;
  margin-bottom:6px;
}

/* Modtaget antal */
.gfl-vm-confirm{
  margin-top:2px;
  margin-bottom:6px;
  font-size:13px;
  color:#334155;
}

.gfl-vm-confirm label{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.gfl-vm-confirm input{
  width:80px;
  height:34px;
  padding:0 8px;
  border-radius:6px;
  border:1px solid #cbd5e1;
}

.gfl-vm-confirm input:focus{
  outline:none;
  border-color:#0f172a;
  box-shadow:0 0 0 2px rgba(15,23,42,.08);
}

.gfl-vm-confirm-note{
  opacity:.8;
}

/* Note-felt */
.gfl-vm-note{
  font-size:13px;
  color:#475569;
  background:#f8fafc;
  border:1px dashed #e2e8f0;
  padding:8px;
  border-radius:6px;
  margin-top:4px;
}

/* Knap-række (øverste "Vælg udløbsdato(er)") */
.gfl-vm-row-actions{
  margin-top:8px;
}

/* Sort knap med inverteret hover (øverst) */
.gfl-vm-row-actions .button{
  background:#000;
  border:1px solid #000;
  color:#fff;
  border-radius:8px;
  padding:8px 16px;
  cursor:pointer;
  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease,
    transform .1s ease,
    box-shadow .1s ease;
}

.gfl-vm-row-actions .button:hover,
.gfl-vm-row-actions .button:focus-visible{
  background:#fff;
  color:#000;
  border-color:#000;
  transform:scale(1.03);
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}

/* Disabled state – ingen hover-effekt */
.gfl-vm-row-actions .button[disabled]{
  opacity:.6;
  cursor:not-allowed;
  background:#9ca3af;
  border-color:#9ca3af;
  color:#fff;
  transform:none;
  box-shadow:none;
}

/* ====== Editor-knapper (Annullér + Gem & bekræft) ====== */
.gfl-varemodtagelse .js-vm-cancel.button,
.gfl-varemodtagelse .js-vm-save.button-primary{
  border-radius:8px;
  padding:8px 16px;
  cursor:pointer;
  box-shadow:none;
  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease,
    transform .1s ease,
    box-shadow .1s ease;
}

/* Annullér – rød baggrund, hvid tekst */
.gfl-varemodtagelse .js-vm-cancel.button{
  background:#dc2626 !important;
  border:1px solid #dc2626 !important;
  color:#fff !important;
}

/* Gem & bekræft – sort baggrund, hvid tekst */
.gfl-varemodtagelse .js-vm-save.button-primary{
  background:#000 !important;
  border:1px solid #000 !important;
  color:#fff !important;
}

/* Hover: begge får hvid baggrund, sort tekst/kanter + lille zoom */
.gfl-varemodtagelse .js-vm-cancel.button:hover,
.gfl-varemodtagelse .js-vm-cancel.button:focus-visible,
.gfl-varemodtagelse .js-vm-save.button-primary:hover,
.gfl-varemodtagelse .js-vm-save.button-primary:focus-visible{
  background:#fff !important;
  color:#000 !important;
  border-color:#000 !important;
  transform:scale(1.03);
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}

/* Disabled state for editor-knapper */
.gfl-varemodtagelse .js-vm-cancel.button[disabled],
.gfl-varemodtagelse .js-vm-save.button-primary[disabled]{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* Bulk-udløbsdato (øverst i editoren) */
.gfl-vm-bulkdate{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}

.gfl-vm-bulkdate label{
  font-size:13px;
  color:#334155;
  display:flex;
  align-items:center;
  gap:8px;
}

.gfl-vm-bulkdate input[type="date"]{
  height:34px;
  padding:0 8px;
  border-radius:6px;
  border:1px solid #cbd5e1;
}

/* Individuelle enheder – TO kolonner */
.gfl-vm-rows-wrap{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 16px;
}

.gfl-vm-row-label{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
  color:#0f172a;
}

.gfl-vm-unitlabel{
  font-weight:600;
}

.gfl-vm-row-label input[type="date"]{
  height:34px;
  padding:0 8px;
  border-radius:6px;
  border:1px solid #cbd5e1;
}

.gfl-vm-row-label input[type="date"]:focus{
  outline:none;
  border-color:#0f172a;
  box-shadow:0 0 0 2px rgba(15,23,42,.08);
}

/* Feedback-bokse */
.gfl-vm-success{
  margin-top:10px;
  background:#ecfeff;
  border:1px solid #a5f3fc;
  padding:10px;
  border-radius:6px;
}

.gfl-vm-error{
  margin-top:10px;
  background:#fee2e2;
  border:1px solid #fecaca;
  padding:10px;
  border-radius:6px;
}

/* Responsiv */
@media (max-width: 820px){
  .gfl-vm-card{
    grid-template-columns:1fr;
  }
  .gfl-vm-rows-wrap{
    grid-template-columns:1fr;
  }
}