/* hack to hide the upload button */
.unstylable-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.hex-viewer-paintbox {
    width: 300px;
    height: 300px;
}

.unstylable-wrapper input[type=file]{
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.unstylable-wrapper select {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.hex-view {
  display: flex;
  flex-direction: row;
  margin: 20px;
  min-height: 1em;
  font-size: 16px;
  font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
}

.offset {
  /*min-width: 3em;*/
  background-color: var(--table-header-background-color);
  color: var(--table-header-foreground-color);
  padding: 5px;
}

.hex,
.fixtext {
  border: 1px solid var(--separator-color);
  padding: 5px;
}

.hex div,
.fixtext div {
  width: 1.2em;
}

.selected {
  /*width: 8em;*/
  background-color: var(--default-selected-background-color);
  color: var(--default-selected-foreground-color);
  /*border-bottom: 1px solid #888;*/
  /*border-top: 1px solid #888;*/
}

.text {
  padding:3px;
  border: 1px solid #888;
}

.text div {
  /*width: 16em;*/
  line-height: 1em;
  vertical-align: middle;
}

.hex-table table {
  table-layout: fixed;
  border-collapse: collapse;
}

.hex-table table td {
  vertical-align: middle;
  box-sizing: border-box;
  border: 1px solid var(--separator-color);
}

.hex-table table td div {
  height: 1.2em;
  line-height: 1.2em;
  /*display:inline-block;*/
  vertical-align: middle;
}

span[data-control]:after {
  content: attr(data-control);
}

#switch-theme {
  float: right;
}

.instructions {
  padding: 2em;
  margin: 2em;
  border: 1px solid var(--separator-color);
}

.controlButton {
  padding: 5px;
  width: 30px;
  height: 30px;
  position: relative;
  display: inline-block;
}

.controlButton:hover {
  background-color: var(--default-hover-background-color);
}

.aboutIcon {
  width: 100px;
  height: 100px;
}

/* Hexy pane headers styling */
.pane-header {
  background-color: var(--table-header-background-color);
  color: var(--table-header-foreground-color);
  border-bottom: 1px solid var(--separator-color);
  padding: 6px 10px;
  align-items: center;
  box-sizing: border-box; /* include padding within width to avoid overflow into next pane */
}

/* Allow title area to shrink and not force overflow; push right controls to the edge */
.pane-header.left-content-right .left {
  flex: 1 1 auto; /* let the left section take remaining space but allow shrinking */
  min-width: 0;   /* enable text truncation inside */
}

/* Spacer grows to push the right controls to the far edge */
.pane-header.left-content-right .content {
  flex: 1 1 auto;
  width: auto;
}

/* Ensure right control group does not grow */
.pane-header.left-content-right .right {
  flex: 0 0 auto;
}

/* Truncate overly long titles with ellipsis */
.pane-header .pane-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Interpretation and Structure section headers */
.interpret-header,
.entries-header {
  background-color: var(--table-header-background-color);
  color: var(--table-header-foreground-color);
  border-bottom: 1px solid var(--separator-color);
  padding: 6px 10px;
}

/* Optional: make header labels slightly bolder without changing layout */
.interpret-header,
.entries-header,
.pane-header span {
  font-weight: 600;
}

/* Unified styling for interpretation tables in Hexy */
.hexy-int-panel {
  font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
  font-size: 11px;
}

.hexy-filter-bar {
  align-items: center;
  padding: 4px 6px;
}

.hexy-int-table table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.hexy-int-table td,
.hexy-int-table th {
  vertical-align: middle;
}

/* Overlay button alignment and spacing within table cells */
.hexy-int-table .overlay-buttons-container {
  display: inline-flex;
  margin-left: 8px;
}