body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f5f5f5;
}

label.busy {
    color: gray;
    pointer-events: none;
    opacity: 0.6;
}

.intro-container {
    margin: 20pt;
}

.intro-text {
    width: 600pt;
}

.ai-available {
    color: green;
}

.ai-not-available {
    color: red;
}

.ai-not-available-details {
    color: #ff8888;
}

.button-blue {
  background-color: #007BFF;       /* Bootstrap-style blue */
  color: white;                    /* Text color */
  padding: 10px 20px;              /* Spacing */
  border: none;                    /* No border */
  border-radius: 5px;              /* Rounded corners */
  font-size: 16px;                 /* Readable text */
  font-weight: 500;                /* Slightly bold */
  cursor: pointer;                /* Pointer on hover */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.button-blue:hover {
  background-color: #0056b3;       /* Darker blue on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Enhanced shadow */
}
.button-blue:disabled {
  background-color: #999999;
  cursor: not-allowed ;
}

.button-blue:disabled:hover {
  background-color: #aaaaaa;
}

/* Wrap the three divs in a parent container */
.page-row {
    display: flex;              /* arrange children in a row */
    align-items: center;        /* vertical center alignment */
    gap: 1rem;                   /* space between the divs */
}

/* Optional: make each section behave nicely */
#input-container,
#button-container,
#results-container {
    /* Adjust as needed */
    flex: 0 0 auto;              /* don't stretch unless you want them to */
}


.results-container {
    display: grid;
    grid-template-columns: auto 1fr; /* label column auto-sized, input/group column fills */
    gap: 0.5rem 1rem; /* row gap, column gap */
    align-items: start; /* top-align so multi-line groups look tidy */
    max-width: 500px; /* allow more space for nested groups */
}

/* Only flatten *direct* children that are simple label+input pairs */
.results-container > div {
    display: contents;
}

/* But if the right-hand cell contains a group of child fields, make it a sub-grid */
.results-container .child-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 0.5rem;
    align-items: center;
}

/*
.results-container .child-group {
    display: block; // or flex/column if you want vertical stacking
    gap: 0.25rem 0.5rem; // gap will only apply if using flex/grid 
}
*/

/* Labels in both main grid and sub-grids */
.results-container label,
.results-container .child-group label {
    text-align: right;
    font-weight: bold;
}

/* Inputs in both main grid and sub-grids */
.results-container input,
.results-container .child-group input {
    width: 100%;
    padding: 0.4rem;
    box-sizing: border-box;
}


.spinner {
    width: 20px;
    height: 20px;
    border: 8px solid #ccc;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.invisible {
  display: none;
}

.status-text-container {
    border: 2px solid #ccc;
    border-radius: 5%;
    opacity: 1;
    transition: opacity 5s ease;
}

.fade-out {
    opacity: 0.2;
}

.todo {
    color: gray;
}

.doing {
    color: green;
}

.done {
    color: black;
}

.error {
    color: red;
}

.error-message {
    color: red;
}

/* Basic styling for the combo box */
label {
  font-weight: bold;
  margin-right: 8px;
}
select {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  min-width: 200px;
}
select:focus {
  border-color: #0078d7;
  outline: none;
  box-shadow: 0 0 4px rgba(0,120,215,0.5);
}

 table, th, td {
  border-color: #96D4D4;
  border: 1px solid;
  border-collapse: collapse;
  padding: 10px;
}