/* Consolidated CSS file combining old-index.css, index.css, and gameUI.css
   Priority order: old-index.css → index.css → gameUI.css */

/* Text Adventure Panel Styles */
.text-adventure-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #2d2d2d;
  color: #cecece;
}

.text-adventure-header {
  padding: 8px;
  background-color: #3d3d3d;
  border-bottom: 1px solid #555;
  display: flex;
  align-items: center;
  gap: 8px;
}

.text-adventure-header label {
  font-size: 12px;
  color: #cecece;
}

.custom-data-select {
  flex: 1;
  padding: 4px 8px;
  background-color: #4d4d4d;
  color: #cecece;
  border: 1px solid #666;
  border-radius: 3px;
  font-size: 12px;
}

.text-adventure-display {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.4;
  background-color: #1e1e1e;
  border: 1px solid #555;
  margin: 8px;
  margin-bottom: 0;
}

.text-adventure-message {
  margin-bottom: 8px;
  white-space: pre-wrap;
}

.text-adventure-message.user-input {
  color: #88cc88;
  font-weight: bold;
}

.text-adventure-message.system {
  color: #8888cc;
  font-style: italic;
}

.text-adventure-message.error {
  color: #cc8888;
}

.text-adventure-message.item-discovery {
  color: #4da6ff;
  font-weight: bold;
}

.item-name {
  color: #4da6ff;
  font-weight: bold;
}

.text-adventure-separator {
  height: 8px;
}

.text-adventure-link {
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.text-adventure-link:hover {
  filter: brightness(1.2);
}

.text-adventure-link.accessible {
  color: #88cc88;
}

.text-adventure-link.inaccessible {
  color: #cc8888;
}

.text-adventure-input-container {
  padding: 8px;
  background-color: #3d3d3d;
  border-top: 1px solid #555;
}

.text-adventure-input {
  width: 100%;
  padding: 8px;
  background-color: #4d4d4d;
  color: #cecece;
  border: 1px solid #666;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  box-sizing: border-box;
}

.text-adventure-input:focus {
  outline: none;
  border-color: #88cc88;
  box-shadow: 0 0 3px rgba(136, 204, 136, 0.3);
}

.text-adventure-input::placeholder {
  color: #888;
}

/* Base layout */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #9a9a9a;
  color: #cecece;
}

/* Page Layout */
#page-layout {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  padding: 1rem;
  height: 100%;
  box-sizing: border-box;
}

/* Main Content Area */
#main-content {
  width: 30em;
  min-width: 30em;
  background-color: #2d2d2d;
  border: 2px solid #cecece;
  border-radius: 4px;
  padding: 1em;
  margin: 0;
  color: #cecece;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

#main-content.collapsed {
  width: 0;
  min-width: 0;
  padding: 0;
  border: none;
  overflow: hidden;
  margin: 0;
  opacity: 0;
}

#main-content-collapse-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background-color: rgba(50, 50, 50, 0.7);
  border: 1px solid #cecece;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 200;
  transition: all 0.3s ease;
  font-size: 14px;
  color: #cecece;
}

#main-content.collapsed #main-content-collapse-btn {
  position: fixed;
  left: calc(260px + 1rem);
  top: 50px;
  right: auto;
  transform: rotate(180deg);
  background-color: #2d2d2d;
  width: 26px;
  height: 26px;
  border: 2px solid #cecece;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  color: #fff;
}

#main-content-collapse-btn:hover {
  background-color: rgba(80, 80, 80, 0.9);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* Header Elements */
#header-text {
  text-align: center;
  margin: 0;
  padding: 0;
}

/* Status Bar */
#status-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 1em;
}

/* Progress Container */
#progress-container {
  text-align: center;
}

#progress-container #progress-container-header {
  margin-bottom: 0;
}

#progress-container #progress-bar {
  width: 100%;
}

.button-container {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

#progress-container #control-button,
#progress-container #quick-check-button {
  padding-left: 1em;
  padding-right: 1em;
  flex: 1;
}

/* Console Area */
#console {
  width: 100%;
  height: 500px;
  max-height: 500px;
  margin-top: 1em;
  border-radius: 4px;
  border: 2px solid #cecece;
  overflow-y: auto;
  background-color: #2d2d2d;
}

#console .console-message {
  padding: 0.25em 0.5em;
  border-bottom: 1px solid #cecece;
}

/* Command Input Area */
#command-wrapper {
  display: flex;
  flex-direction: row;
  margin-top: 1em;
}

#command-wrapper #console-input {
  flex-grow: 1;
}

/* Inventory Column */
#inventory-column {
  width: 250px;
  min-width: 250px;
  height: 100%;
  background-color: #2d2d2d;
  border: 2px solid #cecece;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}

.inventory-controls {
  padding: 0.5rem;
  border-bottom: 1px solid #666;
  color: #cecece;
}

/* Inventory Components */
.inventory-header {
  padding: 0.5rem;
  background: #2d2d2d;
  border-bottom: 1px solid #cecece;
  flex-shrink: 0;
  color: #cecece;
  position: relative;
}

.inventory-header h2 {
  margin: 0;
  font-size: 1rem;
  color: #cecece;
}

.inventory-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

/* Inventory Items */
.inventory-group h3 {
  color: #cecece;
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
}

.inventory-items {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.item-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.item-button {
  position: relative;
  background-color: #1a1a1a;
  color: #cecece;
  border: 1px solid #666;
  padding: 0.25rem 0.5rem;
  text-align: left;
  cursor: pointer;
  font-size: 0.8rem;
  flex-grow: 1;
}

.count-badge {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  background: #ffd700;
  color: #000;
  border-radius: 10px;
  font-size: 0.8rem;
  padding: 0 4px;
  margin-left: 4px;
}

.item-button:hover {
  background-color: #2a2a2a;
}

.item-button.active {
  background-color: #000080;
  color: #cecece;
}

.item-count {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #ffd700;
  color: black;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  border: 1px solid #666;
}

.check-mark {
  color: #22c55e; /* A nice green color */
  font-weight: bold;
  margin-left: 8px;
}

.view-selector {
  display: flex;
  gap: 1rem; /* Space between the radio buttons */
}

.view-selector label {
  display: flex;
  align-items: center;
  gap: 0.25rem; /* Space between radio button and text */
}

.view-selector input[type='radio'] {
  margin: 0; /* Remove default margins */
}

.location-controls,
.region-controls {
  display: none; /* Hidden by default */
}

/* When locations view is active */
.location-controls.active {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* When regions view is active */
.region-controls.active {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Locations Column */
#locations-column {
  flex: 1;
  background-color: #2d2d2d;
  border: 2px solid #cecece;
  border-radius: 4px;
  padding: 1em;
  color: #cecece;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: flex 0.3s ease-in-out;
}

/* Enhance locations header scrollability */
.locations-header {
  padding: 1px;
  background-color: #2d2d2d;
  border-bottom: 1px solid #cecece;
  color: #cecece;
  min-height: 96px; /* Compact but sufficient */
  max-height: 200px; /* Cap the maximum height */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: thin; /* Firefox */
}

/* Custom scrollbar for better visibility */
.locations-header::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.locations-header::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.locations-header::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.locations-header::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Better spacing for form controls */
.locations-header select,
.locations-header input,
.locations-header button {
  margin: 3px;
}

/* Adjust control groups for better layout */
.control-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0rem;
  align-items: center;
}

/* Improve hover states for better touch feedback */
.button:hover,
button:hover,
select:hover {
  opacity: 0.9;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}

#locations-grid,
#exits-grid {
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden; /* Prevent horizontal scrolling */
  padding: 0.5rem;
  display: grid;
  /* grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); */ /* REMOVED to allow JS to control this */
  gap: 0.5rem;
  box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
}

/* Location and Exit Cards */
.location-card,
.exit-card {
  padding: 0.5rem;
  cursor: pointer;
  border: 1px solid #cecece;
  color: #cecece;
}

/* --- NEW Detailed Location Card Statuses --- */
.location-card.checked {
  background-color: #000000; /* Black/Dark Gray for Checked */
  color: #cecece;
  border-color: #666;
}

.location-card.fully-reachable {
  background-color: #0a3318; /* Green for Fully Reachable */
}

.location-card.region-only-reachable {
  background-color: #665508; /* Yellow-ish for Region Accessible, Rule Fails */
}

.location-card.location-only-reachable {
  background-color: #6e3b00; /* Orange-ish for Rule Met, Region Inaccessible */
}

.location-card.fully-unreachable {
  background-color: #3a0808; /* Red for Fully Unreachable */
}

/* --- ADDED: Pending Location Card Status --- */
.location-card.pending {
  background-color: #082a4d; /* Dark Blue for Pending */
}

.location-card.pending.colorblind-active::before {
  content: '⌛'; /* Hourglass symbol */
  font-weight: bold;
  margin-right: 4px;
  color: #6cadff; /* A light blue for the symbol, adjust as needed */
}

.location-card.unknown {
  background-color: #333333; /* Default gray for unknown state */
}
/* --- END NEW Detailed Statuses --- */

/* --- Exit Card Statuses --- */
.exit-card.traversable {
  background-color: #0a3318; /* Green */
}

.exit-card.non-traversable-locked {
  background-color: #3a0808; /* Red for locked/non-traversable */
}

.exit-card.unknown-accessibility,
.exit-card.unknown-exit-state {
  background-color: #333333; /* Gray for unknown states */
}

/* Old .not-traversable, can be removed if .non-traversable-locked covers all red cases */
/*
.exit-card.not-traversable {
  background-color: #3a0808;
}
*/

.location-card.region-accessible-but-locked {
  background-color: #665508; /* Yellow-ish */
}

.location-card.region-inaccessible-but-unlocked {
  background-color: #6e3b00; /* Orange-ish */
}

.exit-card.region-accessible-but-locked {
  background-color: #665508; /* Yellow-ish */
}

.exit-card.region-inaccessible-but-unlocked {
  background-color: #6e3b00; /* Orange-ish */
}

.location-card.checked:hover {
  background-color: #1a1a1a;
}

.location-card.undiscovered,
.exit-card.undiscovered {
  border-style: dashed;
  background-color: #222222;
  opacity: 0.8;
}

.exit-item.undiscovered,
.location-item.undiscovered,
.entrance-item.undiscovered {
  opacity: 0.5;
}

#regions-panel {
  flex-grow: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  padding: 1rem;
  gap: 0.5rem;
  background: #222;
  color: #ccc;
}

.region-block {
  border: 1px solid #555;
  margin-bottom: 1rem;
  padding: 0.5rem;
}

.region-block.expanded {
  background: #333;
}
.region-block.collapsed {
  background: #444;
}

.region-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  user-select: none;
}

.region-header:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.region-expand-indicator {
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.7);
  margin-left: auto;
  padding-left: 8px;
  user-select: none;
}

.region-details {
  margin-left: 1rem;
}

.accessible {
  color: #0f0; /* green */
}
.inaccessible {
  color: #f00; /* red */
}

.logic-node {
  padding: 2px 5px;
  margin: 2px;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.2); /* More neutral background */
  border: 1px solid #555555;
  color: #e0e0e0;
}

.logic-node.pass {
  background-color: #2a4d2a; /* Darker green for dark theme */
  border-color: #3c7a3c; /* Brighter green border */
  color: #c8f7c8; /* Light green text */
}

.logic-node.fail {
  background-color: #5d2a2a; /* Darker red for dark theme */
  border-color: #8c3c3c; /* Brighter red border */
  color: #f7c8c8; /* Light red text */
}

.logic-node-unknown {
  background-color: #484848; /* Neutral dark gray for unknown */
  border-color: #606060;
  color: #cccccc; /* Lighter gray text for unknown */
}

.colorblind-symbol {
  font-weight: bold;
  margin-right: 4px;
}

.colorblind-symbol.accessible {
  color: #60d060; /* Brighter green for dark theme */
}

.colorblind-symbol.inaccessible {
  color: #f06060; /* Brighter red for dark theme */
}

.colorblind-symbol.unknown {
  color: #b0b0b0; /* Light gray/off-white for the question mark */
}

/* Style for region links with unknown reachability */
.region-link.unknown-reachability {
  color: #9e9e9e !important; /* Using !important to ensure override if inline styles conflict, adjust as needed */
}

/* Buttons and Controls */
.button {
  background-color: #000080;
  color: #cecece;
  border: 1px solid #666;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  font-size: 0.8rem;
  border-radius: 4px;
}

.button:hover {
  background-color: #0000a0;
}

/* Form Controls */
select,
input[type='checkbox'] {
  border: 1px solid #666;
}

select {
  padding: 0.25rem;
  background: white;
}

/* Utility Classes */
.red {
  color: #ff0000;
}

.green {
  color: #008000;
}

.hidden {
  display: none !important;
}

/* Cookie Message */
#cookie-message {
  display: none;
  flex-direction: row;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  left: 0;
  line-height: 2rem;
  border-top: 1px solid #c3c3c3;
  background-color: #2d2d2d;
  color: #c3c3c3;
  width: 100%;
}

#cookie-message:hover {
  cursor: pointer;
}

#cookie-message span {
  padding: 0 0.5rem;
}

/* Empty State */
.empty-message {
  text-align: center;
  padding: 2rem;
  color: #666;
  font-style: italic;
}

/* Test Cases Panel */
#test-cases-panel {
  flex-grow: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  padding: 1rem;
  background: #222;
  color: #ccc;
}

.test-case-item {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid #444;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
}

.test-case-details {
  margin: 0.5rem 0;
  font-size: 0.9em;
  color: #aaa;
}

.test-case-details ul {
  margin: 0.25rem 0;
  padding-left: 1.5rem;
}

.test-case-item {
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.test-case-item button {
  margin-bottom: 8px;
  padding: 5px 10px;
}

.test-status {
  font-size: 0.9em;
  margin-top: 5px;
}

.test-success {
  color: #4caf50;
}

.test-failure {
  color: #f44336;
}

.test-error {
  color: #ff9800;
}

.location-test-group {
  margin-bottom: 1.5rem;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 0.5rem;
}

.location-test-group h4 {
  margin: 0 0 0.5rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #444;
  color: #cecece;
}

.test-status {
  white-space: pre-line;
  margin-top: 0.5rem;
  padding: 0.5rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
}

/* Region Navigation - CONSOLIDATED VERSION */
.region-link,
.location-link,
.item-link {
  text-decoration: underline;
  cursor: pointer;
}

.region-link:hover,
.location-link:hover,
.item-link:hover {
  text-decoration: underline;
  color: #007bff;
}

/* Location link accessibility states */
.location-link.accessible {
  color: #00ff00; /* Green for accessible locations in accessible regions */
}

.location-link.accessible-but-unreachable {
  color: #ffaa00; /* Orange for accessible locations in unreachable regions */
}

.location-link.inaccessible {
  color: #ff0000; /* Red for inaccessible locations */
}

.region-paths {
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid #555; /* Kept from first definition */
}

.region-path {
  margin-bottom: 0.5rem;
  padding: 0.25rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.highlight-region,
.highlight-location {
  animation: highlight-animation 2s;
}

@keyframes highlight-animation {
  0%,
  100% {
    background-color: inherit;
  }
  50% {
    background-color: rgba(255, 255, 0, 0.3);
  }
}

/* Path-used badges for entrance/exit highlighting */
.path-used-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: rgba(255, 193, 7, 0.25);
  border: 2px solid #FFC107;
}

.path-used-badge img {
  width: 14px;
  height: 14px;
}

.entrance-wrapper.path-used,
.exit-wrapper.path-used {
  border-color: #FFC107 !important;
  background-color: rgba(255, 193, 7, 0.12) !important;
}

.region-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Path controls */
.paths-control {
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid #555;
}

.paths-buttons {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.paths-count {
  color: #aaa;
  font-size: 0.9em;
}

.clear-paths-btn {
  background-color: #722; /* Darker red */
  color: #fff;
}

.clear-paths-btn:hover {
  background-color: #933; /* Lighter red on hover */
}

/* Show More button appearance */
button.show-paths-btn:not(:disabled) {
  background-color: #064; /* Darker green */
  color: #fff;
}

button.show-paths-btn:not(:disabled):hover {
  background-color: #075; /* Lighter green on hover */
}

button.show-paths-btn:disabled {
  background-color: #444;
  color: #999;
  cursor: not-allowed;
}

/* Improve existing location card styles */
.location-card .location-link {
  font-weight: 500;
}

/* Make region and location links more noticeable in test cases */
.results-table .location-link,
.results-table .region-link,
.results-table .item-link {
  color: #4da6ff;
}

.checked-loc {
  color: #22c55e; /* Green */
  text-decoration: line-through;
}

/* Region Path Exit Rules */
.path-exit-rule-container {
  margin: 0.5rem 0 0.5rem 1rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-left: 3px solid #f44336;
  border-radius: 0 4px 4px 0;
}

.path-exit-header {
  margin-bottom: 0.5rem;
  color: #f44336;
  font-size: 0.9em;
}

.path-exit-rule {
  margin-left: 1rem;
}

.show-exit-rules-btn {
  background-color: #555;
  color: #fff;
}

.show-exit-rules-btn:hover {
  background-color: #666;
}

/* Compiled Rules List */
.compiled-rules-list {
  margin: 1rem 0;
  padding: 0.75rem;
  background: rgba(244, 67, 54, 0.1);
  border-left: 3px solid #f44336;
  border-radius: 4px;
}

.compiled-rules-list h4 {
  margin-top: 0;
  color: #f44336;
  font-weight: 500;
}

.compiled-rules-items {
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}

.compiled-rule-item {
  margin-bottom: 0.25rem;
}

.item-related-rule {
  color: #ffc107;
  font-weight: 500;
}

.compiled-rules-empty {
  font-style: italic;
  color: #aaa;
  padding: 0.5rem 0;
}

.compile-list-btn {
  background-color: #7b1fa2;
  color: #fff;
}

.compile-list-btn:hover {
  background-color: #9c27b0;
}

/* Fix for the right column layout */
#locations-column {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Fix for iOS momentum scrolling */
* {
  -webkit-overflow-scrolling: touch;
}

/* Make sure touch targets are appropriately sized */
button,
select,
input[type='checkbox'],
input[type='radio'],
label {
  touch-action: manipulation;
}

#main-content-expand-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 300;
  display: none; /* Hidden by default, shown via JS */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #2d2d2d;
  border: 2px solid #cecece;
  width: 26px;
  height: 26px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  color: #fff;
}

#main-content-expand-btn:hover {
  background-color: rgba(80, 80, 80, 0.9);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Clean up iOS scrolling */
* {
  -webkit-overflow-scrolling: touch;
}

/* Make touch targets appropriately sized */
button,
select,
input[type='checkbox'],
input[type='radio'],
label {
  touch-action: manipulation;
}

/* Alternative Exits Styling */
.alternative-exits-indicator {
  font-size: 0.8em;
  color: #ffc107;
  margin-left: 5px;
  cursor: help;
}

.alternative-exits {
  margin: 5px 0;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.15);
  border-left: 3px solid #ffc107;
  font-size: 0.9em;
}

/* Performance Warning Styling */
.performance-warning {
  background-color: rgba(255, 193, 7, 0.2);
  border: 1px solid #ffc107;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 15px;
  color: #333;
  font-size: 14px;
}

.warning-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 15px;
}

.warning-buttons .button {
  background-color: #666;
  color: white;
  padding: 5px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.warning-buttons .button:hover {
  background-color: #888;
}

#proceed-analysis {
  background-color: #ff9800;
}

#proceed-analysis:hover {
  background-color: #f57c00;
}

#cancel-analysis {
  background-color: #666;
}

#cancel-analysis:hover {
  background-color: #888;
}

#files-panel {
  display: flex;
  flex-direction: column;
  height: 100%; /* or a specific height value based on your layout */
  overflow-y: auto;
}

/* Ensure inner list containers fill height and scroll */
#test-cases-list,
#presets-list {
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box; /* Include padding/border in height */
}

/* Ensure Golden Layout container inherits or has light text */
#goldenlayout-container {
  color: #cecece;
}

/* General Panel Container Style */
.panel-container {
  background-color: #2d2d2d; /* Consistent dark background */
  color: #cecece; /* Ensure light text color */
  padding: 1em; /* Add some padding */
  border-radius: 4px; /* Optional: rounded corners */
  overflow: hidden; /* Prevent content spillover */
  display: flex; /* Use flexbox for internal layout */
  flex-direction: column; /* Default to column layout */
  height: 100%; /* Fill available height */
  box-sizing: border-box; /* Include padding in size */
}

/* Override for specific panels if needed, e.g., regions */
.regions-panel-container {
  background-color: #222; /* Slightly different dark for regions */
  color: #ccc; /* Ensure light text color */
}

.files-panel-container {
  background-color: #222;
  color: #ccc;
}

/* Ensure labels within panels are light */
.panel-container label {
  color: #cecece;
}

/* Specific override for checkbox/radio labels in control groups */
.panel-container .control-group label {
  color: #cecece !important; /* Use !important to ensure override */
}

/* Style for the file input label to look like a button */
.file-input-button-label {
  display: inline-block;
  padding: 6px 12px; /* Match .button padding */
  background-color: #4a5568; /* Match .button background */
  color: white; /* Match .button color */
  border: none; /* Match .button border */
  border-radius: 4px; /* Match .button border-radius */
  cursor: pointer;
  font-size: 0.9em; /* Match .button font-size */
  text-align: center;
  line-height: normal; /* Ensure text is vertically centered like a button */
  transition: background-color 0.2s ease; /* Match .button transition */
}

.file-input-button-label:hover {
  background-color: #2d3748; /* Match .button hover background */
}

/* Hide the actual file input, as the label triggers it */
/* input[type="file"]#json-btn-load-file { */ /* This was already style="display: none;" inline */
/*   display: none; */
/* } */

/* frontend/styles/index.css */

/* === Tests Panel Styles === */

/*
   General panel container style is already in your index.css:
   .panel-container { ... }
   .tests-panel-content inherits from this.
*/

.test-panel-controls {
  display: flex;
  align-items: center;
  gap: 10px; /* Space between buttons/elements */
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #444; /* Separator */
}

.overall-test-status {
  font-weight: bold;
  padding: 5px;
  border-radius: 3px;
}

.tests-ul {
  list-style-type: none;
  padding-left: 0;
  margin-top: 0;
}

.test-item {
  background-color: #383838; /* Slightly lighter than panel background for contrast */
  border: 1px solid #505050;
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 10px 12px;
}

.test-item .test-item-header {
  /* Renamed from .test-item header in UI code */
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* Align items to the start for multi-line descriptions */
  margin-bottom: 8px;
}

.test-item .test-item-name-desc strong {
  font-size: 1.1em;
  color: #e0e0e0; /* Brighter for the name */
}

.test-item .test-item-name-desc p {
  font-size: 0.9em;
  color: #b0b0b0; /* Softer color for description */
  margin: 4px 0 0 0;
  line-height: 1.3;
}

.test-item-controls {
  display: flex;
  align-items: center;
  gap: 8px; /* Spacing between control elements */
  flex-shrink: 0; /* Prevent controls from shrinking too much */
  margin-left: 10px; /* Space from name/description */
}

.test-item-controls label {
  display: flex;
  align-items: center;
  font-size: 0.9em;
  color: #ccc;
  cursor: pointer;
}

.test-item-controls input[type='checkbox'].test-enable-checkbox {
  margin-right: 5px;
  transform: scale(0.9); /* Slightly smaller checkbox */
}

.test-item-controls .button-small {
  /* Style for up/down/run buttons */
  padding: 3px 6px;
  font-size: 0.8em;
  min-width: 25px; /* Ensure arrow buttons have some width */
  text-align: center;
}

.test-status-display {
  font-size: 0.9em;
  margin-top: 6px;
  padding: 4px 6px;
  border-radius: 3px;
  display: inline-block; /* So background only covers text */
  color: #fff; /* Default text color */
}

/* Status-specific colors for .test-status-display */
.test-status-pending {
  background-color: #4a4a4a;
  color: #ddd;
}
.test-status-running {
  background-color: #3b5998;
  color: white;
} /* Example: Facebook Blue */
.test-status-waiting_for_event {
  background-color: #ff8c00;
  color: white;
} /* DarkOrange */
.test-status-passed {
  background-color: #28a745;
  color: white;
} /* Green */
.test-status-failed {
  background-color: #dc3545;
  color: white;
} /* Red */

.test-conditions-list {
  list-style-type: none; /* Remove default bullets */
  padding-left: 15px; /* Indent conditions */
  margin-top: 8px;
  font-size: 0.85em;
}

.test-conditions-list li {
  margin-bottom: 4px;
  display: flex; /* Align icon and text */
  align-items: center;
}

.test-conditions-list li::before {
  /* Custom "bullets" */
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
}

.test-conditions-list li.condition-passed::before {
  background-color: lightgreen;
}
.test-conditions-list li.condition-passed {
  /* For text color */
  color: lightgreen;
}

.test-conditions-list li.condition-failed::before {
  background-color: lightcoral;
}
.test-conditions-list li.condition-failed {
  /* For text color */
  color: lightcoral;
}

.test-log-area {
  max-height: 150px; /* Limit height */
  overflow-y: auto; /* Allow scrolling */
  background-color: #222; /* Darker background for log */
  padding: 8px;
  font-family: monospace; /* Monospace for logs */
  font-size: 0.8em;
  margin-top: 8px;
  border: 1px solid #404040;
  border-radius: 3px;
  color: #bababa; /* Default log text color */
}

.test-log-area div {
  /* Each log entry */
  padding: 2px 0;
  border-bottom: 1px dotted #383838;
}
.test-log-area div:last-child {
  border-bottom: none;
}

.test-log-info {
  color: #b0b0b0;
}
.test-log-error {
  color: lightcoral;
  font-weight: bold;
}
.test-log-warn {
  color: orange;
}

/* General button styling (if you don't have one already) */
.button {
  background-color: #4a5568; /* Tailwind gray-700 */
  color: white;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background-color 0.2s ease;
}

.button:hover:not(:disabled) {
  background-color: #2d3748; /* Tailwind gray-800 */
}

.button:disabled {
  background-color: #718096; /* Tailwind gray-500 */
  color: #a0aec0; /* Tailwind gray-400 */
  cursor: not-allowed;
}

.button-small {
  padding: 4px 8px;
  font-size: 0.8em;
}

/* JSON Module - Checkbox containers with Text buttons */
.checkbox-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.checkbox-container .text-export-btn {
  min-width: 44px;
  flex-shrink: 0;
}

.checkbox-container input[type="checkbox"] {
  margin: 0;
}

.checkbox-container label {
  margin: 0;
  flex-grow: 1;
}