/* tabs */


/* Container Layout */
.tabs-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 600px;
  margin: 40px auto;
  font-family: sans-serif;
}

/* Hide the actual radio buttons */
.tabs-container input[type="radio"] {
  display: none;
}

/* Style the Labels (The Clickable Tabs) */
.tabs-container label {
  padding: 10px 20px;
  background: #e0e0e0;
  border: 1px solid #ccc;
  border-bottom: none;
  cursor: pointer;
  font-weight: bold;
  margin-right: 4px;
  border-radius: 4px 4px 0 0;
  order: 1; /* Forces all labels to line up at the top */
}

/* Default Content State (Hidden) */
.tabs-container .tab-content {
  width: 100%;
  padding: 20px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0 4px 4px 4px;
  display: none;
  order: 2; /* Forces content to sit beneath the labels */
}

/* Active Tab Label Styling */
.tabs-container input[type="radio"]:checked + label {
  background: #fff;
  border-bottom: 1px solid #fff; /* Blends label into the content box */
  position: relative;
  z-index: 2;
}

/* Dynamic Content Visibility Toggle */
.tabs-container input[type="radio"]:checked + label + .tab-content {
  display: block;
}










/* 2nd google where can collapse the last open tab, requires javascript */



/* Container Layout */
.tab-container2 {
  display: flex;
  flex-wrap: wrap;
  xmax-width: 600px;  /* without this container is 100% wide which is probably a better default for resueable css */
  max-width: 80%; /* scott testing works fine, this should not be in generic defaults but overriden by specific class */
  margin: 0 auto;  /* causes the container to be in the center of the page, scott not working */
  xfont-family: sans-serif;
  xbackground-color: yellow;
}

.tab-header {  /* copied from label above */
  xpadding: 10px 20px;
  xbackground: #e0e0e0;
  xborder: 1px solid #ccc;
  xborder-bottom: none;
  font-weight: bold;
  xmargin-right: 4px;
  xborder-radius: 4px 4px 0 0;

  xorder: 1; /* Forces all labels to line up at the top */

  display: flex;
  justify-content: flex-start; /* aligns buttons left */
  column-gap: 6px; /* Space between buttons */
  width: 100%;
  xbackground-color: orange;

}

.tab-btn {  /* copied from above tab-content */
  width: 100%;
  padding: 20px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px 6px 0 0; /* Top-Left  Top-Right Bottom-Right  Bottom-Left */
  xdisplay: none;
  xorder: 2; /* Forces content to sit beneath the labels */

    /* Equal sizing */
  flex: 1 1 0px;
  max-width: 200px; /* Prevents buttons from getting too wide on large screens */

  /* Text centering */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  /* Styling */
  padding: 12px 16px;
  xborder-radius: 8px; /* Rounded corners */
  border: 1px solid #ccc;
  xbackground-color: #007bff;
  xcolor: #fff;
  font-size: 16px;
  cursor: pointer;

  padding: 10px 20px;
  background: #e0e0e0;
  border: 1px solid #ccc;
  border-bottom: none;
  cursor: pointer;
  font-weight: bold;
  xmargin-right: 4px;
  border-radius: 4px 4px 0 0;
  order: 1; /* Forces all labels to line up at the top */

  flex: 0 1 auto; /* Prevents stretching, allows shrinking if needed */
  width: max-content; /* Sets width based on content */
  min-width: max-content; /* Ensures the button doesn't shrink below its content size */
}


.tab-btn.active {
  background-color: #ddd;
  /* copied from above */

  display: block;
  /* copied from above */
  background: #fff;
  xborder-bottom: 1px solid #fff; /* Blends label into the content box */ /* too subtle to even notice */
  border-bottom: none; /* Remove bottom border on the tab itself */
      /* Overlap the content container's top border
      Pulls the tab downward so that its bottom edge physically overlaps the top edge of the content box*/
  margin-bottom: -1px;
  position: relative;
  /* Bring the active tab in front
   Ensures that the active tab stacks on top of the content border, hiding the line completely. */
  z-index: 10;

}


/* the above header is totally separate from the content, but both are wrapped in the overall container */

.tab-content-container {
  xborder-radius: 4px 4px 0 0;
  xbackground-color: lightpink; /* debug */
  width: 100%;  /* scott  stretch the panel to the width parent container */
}

.tab-panel {
  display: none;  /* scott inital state only ?? */
  border: 1px solid #ccc;
  border-radius: 0 6px 6px 6px; /* Top-Left  Top-Right Bottom-Right  Bottom-Left */

}

.tab-panel.active {
  display: block;
  /* copied from above */
    background: #fff;
  xborder-bottom: 1px solid #fff; /* Blends label into the content box */ /* scott dont want this on panel */
  position: relative;
  z-index: 2;
  width: 100%; /* scott */ /* this didn't work, want it 100% of the tab-container */


}

.tab-empty {
    font-size: 0.6rem;
  border-radius: 0 2px 2px 2px; /* Top-Left  Top-Right Bottom-Right  Bottom-Left */

}

/* scott consider some type of small, medium, large reusable classes to change border width, rounding, etc */






.button-container {
  display: flex;
  justify-content: flex-start;
  gap: 16px; /* Space between buttons */
  width: 100%;
}

.btn {
  /* Equal sizing */
  flex: 1 1 0px;
  max-width: 200px; /* Prevents buttons from getting too wide on large screens */

  /* Text centering */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  /* Styling */
  padding: 12px 16px;
  border-radius: 8px; /* Rounded corners */
  border: 1px solid #ccc;
  background-color: #007bff;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}