.gfl-hb-wrap{max-width:1100px;margin:0 auto}
.gfl-hb-title{
  margin:0 0 10px;
  font-size:22px;
  font-weight:800;
  text-align:left;
}
.gfl-hb-dept{margin:0 0 16px}
.gfl-hb-card{background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px 12px 4px;margin-bottom:16px}
.gfl-hb-h2{margin:0 0 10px;font-size:18px}

/* Tabel-layout: faste kolonner på tværs af sektioner */
.gfl-hb-table{width:100%;border-collapse:collapse;table-layout:fixed}
.gfl-hb-table th,.gfl-hb-table td{padding:8px;border-bottom:1px solid #eee;vertical-align:middle;text-align:center}

/* Ens kolonnebredder – justeret så der er god plads til knapper */
.gfl-hb-table .col-name{width:26%}
.gfl-hb-table .col-qty{width:9%}
.gfl-hb-table .col-unit{width:9%}
.gfl-hb-table .col-received{width:14%}
.gfl-hb-table .col-status{width:14%}
.gfl-hb-table .col-expiry{width:9%}
.gfl-hb-table .col-actions{
  width:19%;
  white-space:nowrap; /* behold knapperne på samme linje */
}

.gfl-hb-table .t-center{text-align:center}
/* Overstyr evt. tidligere højrejusteringer så alt er centreret */
.gfl-hb-table .t-right{text-align:center !important}


/* Badges & knapper */
.gfl-hb-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;white-space:nowrap}
.gfl-hb-badge.ok{background:#e7f7ec;color:#117a36}
.gfl-hb-badge.wait{background:#eef4ff;color:#1f3a93}

.gfl-hb-btn{
  padding:5px 9px;
  border:1px solid #ddd;
  border-radius:6px;
  background:#fafafa;
  cursor:pointer;
  white-space:nowrap;
  max-width:100%;
  display:inline-block;
  transition:
    background-color .15s ease,
    color .15s ease,
    border-color .15s ease,
    transform .12s ease,
    box-shadow .12s ease;
  font-size:12px;           /* lidt større og mere læsbar */
  text-transform:uppercase;
  letter-spacing:.02em;
  font-weight:600;
}

/* afstand mellem knapper */
.gfl-hb-btn + .gfl-hb-btn{
  margin-left:8px;
}

.gfl-hb-btn.is-busy{opacity:.6;cursor:wait}

/* Farver for udløb */
.gfl-hb-table tr.is-expired{background:#fff1f1}
.gfl-hb-table tr.is-soon{background:#fff9e7}

.gfl-hb-empty{color:#666}

/* Undgå at store navne udvider kolonner – afkort med ellipsis */
.gfl-hb-table .col-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Tabs (afdelinger) – NU IDENTISKE MED SPILD */
.gfl-hb-tabs{
  position:relative;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:6px 0 10px;
  padding-bottom:6px;
}
.gfl-hb-tabs::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:#e5e7eb;
}
.gfl-hb-tab{
  appearance:none;
  border:1px solid #e5e7eb;
  background:#f6f8fb;
  color:#0f172a;
  padding:7px 14px;
  border-radius:10px 10px 0 0;
  font-weight:400;           /* inaktiv fane: normal vægt */
  line-height:1;
  cursor:pointer;
  position:relative;
  top:1px;
  text-decoration:none;
  display:inline-block;
  transition:background .15s ease, border-color .15s ease;
}
.gfl-hb-tab:hover{
  background:#eef2f7;
}
.gfl-hb-tab.is-active{
  background:#fff;
  color:#0f172a;
  border-color:#d8dee6;
  border-bottom-color:#fff;
  z-index:1;
  box-shadow:none;
  font-weight:800;           /* aktiv fane: fed tekst */
}

/* ========= HANDLINGSKNAPPER: BASISFARVER ========= */

/* Grønne actions: "Åbn" + "Tag op fra frost" */
.gfl-hb-btn.js-hb-open,
.gfl-hb-btn.js-hb-thaw{
  background:#16a34a;
  border-color:#16a34a;
  color:#fff;
}

/* Røde actions: "Træk fra lager" + "Smid ud" */
.gfl-hb-btn.js-hb-take,
.gfl-hb-btn.js-hb-discard{
  background:#dc2626;
  border-color:#dc2626;
  color:#fff;
}

/* Sorte actions: "Markér som brugt" (optøet / åbnet) */
.gfl-hb-btn.js-hb-used,
.gfl-hb-btn.js-hb-open-used{
  background:#111827;
  border-color:#111827;
  color:#fff;
}

/* ========= FÆLLES HOVER / FOCUS ========= */
/* Ved hover: hvid baggrund, sort tekst & sort kant + zoom */
.gfl-hb-btn:hover,
.gfl-hb-btn:focus-visible{
  background:#fff;
  color:#000;
  border-color:#000;
  transform:scale(1.04);
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}