/* v4.3.254 — evenwichtige, schaalvaste werkbalk voor het ON6UHF Logbook */
.logbook > header {
  grid-template-columns: minmax(190px, .78fr) minmax(440px, 1.72fr) minmax(830px, 4fr) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.logbook > header > div,
.logbook > header .operator,
.logbook > header nav { min-width: 0; }

.logbook > header .logbook-title {
  font-weight: 600 !important;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.logbook > header .operator {
  display: grid !important;
  grid-template-columns: minmax(96px, 1fr) max-content max-content minmax(96px, .72fr);
  gap: 5px !important;
  justify-content: stretch !important;
  align-items: end;
}

.logbook > header .operator > label {
  min-width: 0;
  font-weight: 500 !important;
}

.logbook > header .operator input,
.logbook > header .operator select { width: 100%; min-width: 0; font-weight: 500 !important; }

.logbook > header .operator button,
.logbook > header nav > :is(button, a, label) {
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.logbook > header .operator button,
.logbook > header nav > :is(button, a, label) {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: max-content;
  padding-inline: 8px !important;
  line-height: 1.08 !important;
  white-space: nowrap;
}

.logbook > header nav {
  display: flex !important;
  width: 100%;
  gap: 5px !important;
  overflow: visible !important;
  align-items: stretch;
}

.logbook > header nav > :is(button, a, label) { flex: 1 1 auto; }
.logbook > header nav > .backup-status { flex: 1.35 1 154px; min-width: 148px; }
.logbook > header nav > .backup-status :is(b,small) { font-weight: 500 !important; }
.logbook > header nav > .lb-info-button { flex: 0 0 38px; min-width: 38px; padding: 0 !important; }
.logbook > header nav .file input { display: none; }

.lb-ui-icon {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  flex: 0 0 18px;
  display: block;
  overflow: visible;
  color: currentColor;
  font-size: 16px !important;
}

.lb-button-label { font: inherit; font-size: inherit !important; line-height: inherit; }

.actions button .lb-button-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.actions button .lb-ui-icon { width: 17px !important; height: 17px !important; min-width: 17px; }

.lb-hover-tooltip {
  position: fixed;
  z-index: 2147483647;
  max-width: min(310px, calc(100vw - 20px));
  padding: 8px 10px;
  border: 1px solid #52ddff;
  border-radius: 8px;
  background: #02111cf2;
  box-shadow: 0 9px 30px #000b, 0 0 18px #2bdfff2b;
  color: #ecfbff;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
}
.lb-hover-tooltip[data-show="true"] { opacity: 1; transform: translateY(0); }

.lb-icon-legend {
  width: min(720px, calc(100vw - 24px));
  max-height: min(780px, calc(100vh - 24px));
  padding: 0;
  border: 1px solid #54dfff;
  border-radius: 18px;
  background: #041925;
  color: #ecfbff;
  box-shadow: 0 24px 80px #000d, 0 0 35px #27dfff25;
}
.lb-icon-legend::backdrop { background: #010812d9; backdrop-filter: blur(7px); }
.lb-icon-legend > section { position: relative; display: grid; gap: 14px; padding: 24px; }
.lb-icon-legend h2, .lb-icon-legend p { margin: 0; }
.lb-icon-legend h2 { font-size: 1.25rem; font-weight: 650; color: #68e5ff; }
.lb-icon-legend p { color: #9eb9c5; line-height: 1.5; }
.lb-icon-legend-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.lb-icon-legend-item { display: grid; grid-template-columns: 34px 1fr; gap: 9px; align-items: center; min-width: 0; padding: 9px; border: 1px solid #245a70; border-radius: 10px; background: #062131; }
.lb-icon-legend-item .lb-ui-icon { width: 22px !important; height: 22px !important; }
.lb-icon-legend-item b { display: block; font-size: .84rem; font-weight: 600; }
.lb-icon-legend-item small { display: block; margin-top: 2px; color: #91adba; line-height: 1.3; }
.lb-icon-legend-close { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border: 1px solid #306c82; border-radius: 9px; background: #082738; color: #fff; font-size: 1.2rem; }

@media (max-width: 1740px) {
  .logbook > header { grid-template-columns: minmax(180px,.65fr) minmax(420px,1.5fr) minmax(0,3.4fr) !important; }
  .logbook > header nav > :is(button,a,label) { padding-inline: 6px !important; font-size: .75rem; }
  .lb-ui-icon { width: 17px !important; height: 17px !important; min-width: 17px; }
}

@media (max-width: 1450px) {
  .logbook > header { grid-template-columns: minmax(180px,.55fr) minmax(430px,1.45fr) !important; }
  .logbook > header nav { grid-column: 1 / -1; }
  .logbook > header nav > :is(button,a,label) { min-height: 40px; }
}

@media (max-width: 820px) {
  .logbook > header { grid-template-columns: 1fr !important; }
  .logbook > header .operator { grid-template-columns: minmax(105px,1fr) auto auto minmax(90px,.8fr) !important; }
  .logbook > header .operator button { font-size: .76rem !important; overflow: visible !important; }
  .logbook > header .operator button::after { content: none !important; }
  .logbook > header nav { grid-column: auto; display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); overflow: visible !important; }
  .logbook > header nav > :is(button,a,label) { min-width: 0; min-height: 44px; padding: 5px 7px !important; white-space: normal; }
  .logbook > header nav > .backup-status { min-width: 0; }
  .logbook > header nav > .lb-info-button { width: 100%; min-width: 0; }
}

@media (max-width: 560px) {
  .logbook > header .operator { grid-template-columns: 1fr 1fr !important; }
  .logbook > header .operator > label { grid-column: auto; }
  .logbook > header .operator > label:last-child { grid-column: 1 / -1; }
  .logbook > header .operator .operator-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .logbook > header nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lb-icon-legend-list { grid-template-columns: 1fr; }
}

/* Definitieve gereedschapsbalk: vaste uitlijning, Help vooraan en gecontroleerd omlopen. */
.logbook > header {
  grid-template-columns: minmax(190px,260px) minmax(0,1fr) !important;
  grid-template-areas: "brand operator" "tools tools";
  align-items: end !important;
}
.logbook > header > div { grid-area: brand; align-self: center; }
.logbook > header > .operator { grid-area: operator; }
.logbook > header > nav { grid-area: tools; }

.logbook > header nav {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: flex-start;
  gap: 6px !important;
  overflow: visible !important;
}
.logbook > header nav > :is(button,a,label) {
  flex: 0 0 auto !important;
  width: auto;
  min-width: 44px;
  height: 42px;
  min-height: 42px !important;
  padding: 0 10px !important;
  line-height: 1.2 !important;
}
.logbook > header nav > .lb-info-button {
  order: -1000;
  flex-basis: 82px !important;
  min-width: 82px;
  padding: 0 10px !important;
  border-color: #54dfff;
  color: #77e9ff;
  background: linear-gradient(135deg,#08354a,#061c2a);
}
.logbook > header nav > .dx-cluster-button { min-width: 116px; }
.logbook > header nav > .radio-intel-button.propagation { min-width: 118px; }
.logbook > header nav > .radio-intel-button.satellites { min-width: 148px; }
.logbook > header nav > .standalone-launch { min-width: 116px; }
.logbook > header nav > .second-screen-launch { min-width: 126px; }
.logbook > header nav > .lb-icon-only {
  flex: 0 0 44px !important;
  width: 44px;
  min-width: 44px;
  padding: 0 !important;
}
.logbook > header nav > .lb-icon-only .lb-button-label,
.logbook > header .operator-actions .lb-icon-only .lb-button-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.logbook > header nav > .backup-status {
  flex: 0 0 176px !important;
  width: 176px;
  min-width: 176px;
  height: 42px;
  min-height: 42px;
  margin: 0;
}
.logbook > header .operator {
  grid-template-columns: minmax(130px,1fr) minmax(104px,max-content) auto minmax(105px,.72fr) !important;
  align-items: end;
}
.logbook > header .operator > :is(button,label),
.logbook > header .operator .operator-actions,
.logbook > header .operator .operator-actions button { min-height: 42px; }
.logbook > header .operator .operator-actions { align-self: end; }
.logbook > header .operator .operator-actions button {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px;
  padding: 0 !important;
}

@media (min-width: 2200px) {
  .logbook > header {
    grid-template-columns: minmax(190px,.55fr) minmax(520px,1.55fr) minmax(1250px,4fr) !important;
    grid-template-areas: "brand operator tools";
  }
}
@media (max-width: 820px) {
  .logbook > header {
    grid-template-columns: 1fr !important;
    grid-template-areas: "brand" "operator" "tools";
  }
  .logbook > header .operator {
    grid-template-columns: minmax(120px,1fr) minmax(104px,max-content) auto minmax(100px,.75fr) !important;
  }
  .logbook > header nav > .backup-status { flex-basis: 176px !important; width: 176px; }
}
@media (max-width: 560px) {
  .logbook > header .operator { grid-template-columns: 1fr 1fr !important; }
  .logbook > header .operator > label:last-child { grid-column: 1 / -1; }
  .logbook > header .operator .operator-actions { grid-column: 1 / -1; }
  .logbook > header nav { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)); }
  .logbook > header nav > :is(button,a,label),
  .logbook > header nav > .lb-icon-only { width: 100%; min-width: 0; }
  .logbook > header nav > .lb-info-button,
  .logbook > header nav > .dx-cluster-button,
  .logbook > header nav > .radio-intel-button,
  .logbook > header nav > .standalone-launch,
  .logbook > header nav > .second-screen-launch,
  .logbook > header nav > .backup-status { grid-column: span 2; width: 100%; min-width: 0; }
}