styles.css

/* styles.css */
body {
  font-family: sans-serif;
  margin: 0;
  padding: 1px;
  background-color: #f4f4f4;
}

.container {
  max-width: 1400px; /* Increased max-width for wider layout */
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h1, h2, h3 {
  color: #333;
  margin-top: 0; /* Reset top margin for headings */
}

.header-content {
  display: flex;         /* ** Crucial: Makes children (<a> and <h1>) align horizontally ** */
  align-items: center;     /* Vertically aligns the logo and title */
  gap: 20px;              /* Adds space between the logo and the title (adjust as needed) */
  margin-bottom: 5px;   /* Adds space below the header area */
  flex-wrap: nowrap;     /* Ensures items stay on one line (usually default, but good to be explicit) */
}

/* Optional: Resetting h1 margin can help with alignment */
.header-content h1 {
  margin-top: 0;
  margin-bottom: 0;
}

/* Ensure image doesn't have weird spacing issues */
.header-content img {
  display: block; /* Prevents potential extra space below the image if treated as inline */
}

.search-form {
  margin-bottom: 20px;
  display: flex;
  gap: 5px;
  align-items: center;
}

#searchInput {
  flex-grow: 1; /* Allow input to take available space */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#searchButton, #clearButton {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

#searchButton {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

#searchButton:hover {
    background-color: #0056b3;
}

#clearButton {
    background-color: #6c757d;
    color: white;
    border-color: #6c757d;
}

#clearButton:hover {
    background-color: #545b62;
}

/* API Endpoint Selector Styles - Compact and discrete */
.api-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  padding: 6px 10px;
  background-color: #f0f0f0;
  border-radius: 3px;
  border: 1px solid #e0e0e0;
  font-size: 12px;
  justify-content: center;
}

.api-selector label {
  font-weight: 500;
  color: #666;
  white-space: nowrap;
  margin: 0;
}

#apiEndpoint {
  flex-grow: 0;
  padding: 3px 6px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 11px;
  font-family: monospace;
  background-color: #fff;
  max-width: 250px;
  color: #555;
}

#apiEndpoint:focus {
  outline: none;
  border-color: #007bff;
}

#addEndpointBtn, #removeEndpointBtn {
  padding: 3px 8px;
  border: 1px solid #999;
  border-radius: 3px;
  background-color: #e8e8e8;
  color: #555;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
}

#addEndpointBtn:hover {
  background-color: #d4edda;
  border-color: #28a745;
  color: #28a745;
}

#removeEndpointBtn {
  border-color: #999;
  background-color: #e8e8e8;
}

#removeEndpointBtn:hover {
  background-color: #f8d7da;
  border-color: #dc3545;
  color: #dc3545;
}

/* Block Navigation Styles */
.block-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #dee2e6;
}

.block-navigation button {
  padding: 6px 16px;
  border: 1px solid #007bff;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  font-size: 14px;
}

.block-navigation button:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

#currentBlockInfo {
  font-weight: bold;
  color: #333;
  font-size: 14px;
}

/* --- Layout Rearrangement Starts Here --- */

.info-panels {
  display: flex; /* Enable Flexbox */
  gap: 20px;     /* Add space between the left and right columns */
  align-items: flex-start; /* Align items to the top */
}

.dynamic-info {
  flex: 1; /* Take up 1 part of the available space */
  display: flex;
  flex-direction: column; /* Stack children vertically */
  gap: 15px; /* Space between sections inside */
}

.search-results {
  flex: 1.5; /* Take up 1.5 parts (make it wider than the left column) */
  display: flex; /* Make it a flex container */
  flex-direction: column; /* Stack h2 and results vertically */
  /* This column will stretch vertically based on content or explicit height */
  /* We want its content (#searchResults) to fill the space */
  min-height: 500px; /* Give it a minimum height, adjust as needed */
  /* Or calculate height based on viewport: calc(100vh - height_of_header_and_search - padding) */

  min-width: 0; /* Allows the flex item to shrink below its content's intrinsic width */

}

.info-section {
   border: 1px solid #eee;
   padding: 15px;
   background-color: #f9f9f9;
   border-radius: 4px;
   /* Removed display:flex, flex-direction: column as it's not needed here */
}

.info-section h3 {
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

.json-content {
  background-color: #fff; /* White background for content area */
  border: 1px solid #ddd;
  padding: 10px;
  font-family: monospace; /* Good for JSON */
  white-space: pre;     /* Preserve formatting */
  overflow-y: auto;     /* Add scrollbars when needed */
  overflow-x: auto;     /* Add horizontal scroll if needed too */
  word-break: break-all; /* Prevent long strings from breaking layout */
  border-radius: 4px;
  -webkit-user-select: text; /* Enable text selection for copy */
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Specific height and scrolling for Global Properties */
#globalProperties {
  max-height: 180px; /* Adjust this value for ~10 lines based on your font/line-height */
  /* height is handled by max-height + overflow */
}

/* Property row styling for Global Properties - each on own line, no blank lines */
.prop-row {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

.prop-row .key {
  color: #8b4513;
}

.prop-row .value {
  color: #006400;
}

/* "Show All" button next to Global Properties label */
.show-all-btn {
  padding: 1px 6px;
  font-size: 11px;
  background-color: #e8e8e8;
  border: 1px solid #999;
  border-radius: 3px;
  cursor: pointer;
  margin-left: 8px;
  color: #555;
  vertical-align: middle;
}

.show-all-btn:hover {
  background-color: #d4edda;
  border-color: #28a745;
  color: #28a745;
}

/* "search" button for property values - very compact */
.use-value-btn {
  padding: 0 3px;
  font-size: 9px;
  line-height: 1.2;
  background-color: transparent;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  margin-left: 4px;
  color: #999;
  vertical-align: baseline;
  height: auto;
  min-height: 0;
}

.use-value-btn:hover {
  background-color: #e8f5e9;
  color: #28a745;
}

/* Specific height and scrolling for Witness Schedule */
#witnessSchedule {
   max-height: 450px; /* Adjust this value for ~25 lines based on your font/line-height */
   /* height is handled by max-height + overflow */
}

/* Make Search Results content fill available vertical space */
.search-results > h2 {
    margin-bottom: 10px; /* Space between title and content */
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}

#searchResults {
  flex-grow: 1; /* Allows this div to grow and fill vertical space in .search-results */
  /* min-height needed to ensure it doesn't collapse completely when empty */
  min-height: 100px;
  /* overflow-y: auto; is already handled by .json-content */
  /* white-space: pre; is already handled by .json-content */
}

/* --- Layout Rearrangement Ends Here --- */

#refreshTimer {
  font-size: 0.8em;
  color: #666;
  margin-left: 10px;
  font-weight: normal;
}