h1 {
}
h2 {
  font-family: aptos, calibri, sans-serif;
}
body {
  background-color: white;
  font-family: aptos, calibri, sans-serif;
}

/* --- Base Desktop View Definition of .generator-container --- */
.generator-container {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 0.50fr 4.5fr 2.0fr;
  width: fit-content;      /* Shrinks total application width to content */
  max-width: 100%;         /* Prevents horizontal overflow */
  background-color: white;
  padding: 2px;
  border: black 0px solid;
  font-family: aptos, calibri, sans-serif;
  font-size: 0.75em;
  align-self: start;
  align-items: start;
  height: fit-content;
}

/* When deal-only mode is active */
.generator-container.deal-only {
  /* Collapse to 2 columns: Settings + The Deals */
  grid-template-columns: 1fr;
}

.generator-container.deal-only #dealRecipe {
  display: none !important;
}
.generator-container.deal-only #theSettings {
  display: none !important;
}
.generator-item {
  border: black 1px solid;
}
input[type=number] {
  width: 4.5ch;
}
#filterFieldset #parFrom,
#filterFieldset #parTo {
  width: 8ch;
  box-sizing: border-box;
}
/* Slim dropdowns inside the Filter fieldset */
#filterFieldset select {
  font-size: 0.88em;
  padding: 1px 2px;
}

/* Tighten spacing between controls in the row */
#filterFieldset .control-row {
  gap: 2px;
  font-size: 1.45em; /* down slightly from 1.65em to slim labels */
}
a {
  font-family: aptos, calibri, sans-serif;
}
table {
  table-layout: fixed;
  width: 25px;
  border: 1px solid black;
  font-family: aptos, calibri, sans-serif;
}
td {
  vertical-align: top;
  //*border: 1px solid black; */
  font-family: aptos, calibri, sans-serif;
}
tr {
  //*border: 1px solid black; */
  font-family: aptos, calibri, sans-serif;
}
caption {
  text-align: left;
  background-color: black;
  color: white;
  font-size: 1.5em;
  font-family: aptos, calibri, sans-serif;
}
fieldset {
  background-color: white;
  font-family: aptos, calibri, sans-serif;
}
legend {
  background-color: white;
  color: black;
  font-size: 1.5em;
  border: 0px solid black;
  font-family: aptos, calibri, sans-serif;
}
/* 1. Global Legend Base Styling (Larger Font Size) */
fieldset > legend {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  white-space: nowrap;
  font-size: 1.5em;      /* Increased base legend text size */
}

/* 2. Scaled Legend Buttons for Deal Recipe & Shaper Panel */
#dealRecipe > legend button,
#shaperPanel > legend button {
  padding: 3px 7px;
  font-size: 1.0em;        /* Increased from 11px */
  white-space: nowrap;
}

/* Vivid Action Button Colors */
#buttonDanger, 
#closeBtn0, 
#buttonVaryRecipes, 
#buttonVarySmorgasbord {
  background-color: red !important;
  color: white !important;
}

#buttonWarn, 
#closeBtn3, 
#buttonNegateRecipes, 
#buttonNegateSmorgasbord {
  background-color: yellow !important;
  color: black !important;
}
button {
  border: 1px solid black;
  font-family: aptos, calibri, sans-serif;
}
textarea {
  font-family: aptos, calibri, sans-serif;
}
.noborder {
    border: 0px !important;
    border-collapse: collapse !important;
    border: none !important;
    outline: none !important;
    padding: 0px !important;
    vertical-align: middle;
}
.redsuit {
  color:red;
}
.modal {
  display: none; /* Hidden by default */
  position: absolute; /* Stay in place */
  z-index: 9; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 3px solid black;
  width: 50%;
}
.modal-content-big {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 3px solid black;
  width: 70%;
}
.modal table {
  width: 100%;
  table-layout: auto;
  border: none;
}
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 7px 8px;
  transition: 0.3s;
  font-size: 0.85em;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 3px 6px;
    border: 1px solid;
    border-top: none;
    font-size: 1.15em;
    flex: 1;              /* Takes up all remaining vertical space in the fieldset */
    box-sizing: border-box;
}
/* Vertical settings column */
.settings-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 2px;
  padding-bottom: 0;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  height: auto;
}

.settings-panel fieldset {
  margin: 0;
  padding: 6px 8px;
  min-width: 0;
  box-sizing: border-box;
font-size: 1.25em;
}

.settings-panel legend {
  font-size: 1.65em;
}

/* Radio button list alignment */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  font-size: 1.25em;
}

/* Inline controls inside settings (Hands / # of Deals / etc.) */
.setting-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 1.25em;
}
.setting-row select {
  font-size: 1.0em;
}
.setting-row input[type="number"] {
  width: 6ch;
  font-size: 1.0em;
}

/* Links panel vertical list */
.links-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0;
  font-size: 1.25em;
}
.recipe-panel {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 5.5fr 1.8fr; /* Gives Cards more room; trims Recipe Files */
    padding: 2px;
    row-gap: 8px;
    column-gap: 3px;
    border: black 1px solid;
    grid-template-areas:
    "recipe1 recipe1"
    "recipe2 recipe3";
}
.recipe-panel legend a {
  font-size: 1.15em;
}
.shaper-panel {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 3fr 1fr;
    padding: 3px;
    row-gap: 5px;
    column-gap: 3px;
    border: black 1px solid;
    grid-area: recipe1;
    grid-template-areas:
    "shaper1 shaper1"
    "shaper2 shaper3";
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}
.shaper-pairs-panel {
    grid-area: shaper1;
    border: black 1px solid;
}
/* Compact Pair Settings fieldset and content */
.shaper-pairs-panel fieldset {
  margin: 0;
  padding: 6px 6px 6px 6px; /* Ultra-slim top and bottom padding */
  box-sizing: border-box;
}
.shaper-pairs-panel legend {
  font-size: 1.65em;
}
/* Pair Settings Layout */
.pairs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: nowrap;
  padding: 0;
  margin: 0;
}

.pair-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pair-seat-title {
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  font-size: 1.6em;
}

.pair-metric-item {
  display: flex;
  align-items: center;
  gap: 2px;
}

.pair-metric-item label {
  font-size: 1.6em;
  cursor: pointer;
  user-select: none;
}

.pair-metric-item input[type="number"] {
  width: 4.5ch;
  font-size: 1.5em;
}

.pair-sep {
  font-weight: bold;
  color: #666;
}
.shaper-pairs-panel button {
  padding: 1px 4px;
  font-size: 1.75em;
}
.shaper-tab-panel {
    grid-area: shaper2;
    border: black 1px solid;
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-sizing: border-box;
}
.shaper-tab-panel legend {
  font-size: 1.65em;
}
.shaper-selections-panel {
    grid-area: shaper3;
    border: black 1px solid;
    display: flex;             /* 1. Turns the wrapper panel into a flex container */
    flex-direction: column;
    min-height: 0;             /* 2. Allows flexible vertical shrinking and stretching */
}

/* Let Shaper Selections fieldset stretch to fill available height */
.shaper-selections-panel fieldset {
  flex: 1;                     /* 3. Forces the fieldset to take 100% of panel height */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0;
  padding: 4px;
  min-height: 0;
}

.shaper-selections-panel legend {
  font-size: 1.35em;
}

.shaper-selections-panel textarea {
  font-size: 1.35em;
}

#shaperDescriptor {
  flex: 1;                     /* 4. Expands to consume all remaining space below the legend */
  width: 100%;
  height: 100%;                /* 5. Fallback reinforcement for browser compatibility */
  box-sizing: border-box;
  resize: none;
  display: block;              /* 6. Removes baseline whitespace gap common to textareas */
}
/* Container for each active Shaper Tab Content */
.shaper-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;  /* Evenly shares the vertical space across all 3 rows */
    gap: 4px 6px;
    align-items: stretch;             /* Overrides 'start' so fieldsets stretch top-to-bottom */
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 2px 4px;
}
/* Explicit cell placements */
.shp-cell-top-left   { grid-area: 1 / 1 / 2 / 2; }
.shp-cell-north      { grid-area: 1 / 2 / 2 / 3; }
.shp-cell-top-right  { grid-area: 1 / 3 / 2 / 4; }
.shp-cell-west       { grid-area: 2 / 1 / 3 / 2; }
.shp-cell-center     { grid-area: 2 / 2 / 3 / 3; }
.shp-cell-east       { grid-area: 2 / 3 / 3 / 4; }
.shp-cell-south      { grid-area: 3 / 2 / 4 / 3; }

.shp-cell-top-left {
  font-size: 1.4em;  
}
.shp-cell-top-left button {
  font-size: 1.15em;  
}
.shp-cell-top-left select {
  font-size: 1.15em;  
}

.shp-cell-top-right button {
  font-size: 1.4em;  
}

/* Internal layout for each Compass Seat Fieldset */
.seat-fieldset {
  margin: 0;
  padding: 2px 4px;
  box-sizing: border-box;
  height: 100%;                      /* Fills the 1fr grid track */
  display: flex;
  flex-direction: column;
}

.seat-fieldset legend {
  font-size: 1.35em;
}

.seat-fieldset legend button {
  font-size: 0.85em;
}

.seat-fieldset select {
  font-size: 1.10em;
}

.seat-fieldset span {
  font-size: 1.25em;
}
.seat-fieldset label {
  font-size: 1.45em;
}
.seat-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 6px;
  row-gap: 2px;
  align-items: stretch;              /* Stretches the select and metrics controls vertically */
  flex: 1;                           /* Consumes all remaining height inside .seat-fieldset */
  min-height: 0;
}

.seat-grid > div:first-child {
  display: flex;
  height: 100%;
}

.seat-fieldset select[multiple] {
  height: 100% !important;          /* Expands the select list box to fill the panel height */
  min-height: 0;
  box-sizing: border-box;
}

/* 3-column subgrid for HCP / Ctrl / LTC inputs */
.metrics-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: 5px;
  row-gap: 2px;
  align-items: center;
  justify-content: start;
}

.metrics-label {
  text-align: right;
  font-weight: normal;
  font-size: 1.30em; 
  color: #111;
}

.metrics-grid input[type="number"] {
  width: 5.5ch;            
  height: 20px;            
  padding: 0 2px;
  font-size: 1.25em;         
  font-weight: normal;
  box-sizing: border-box;
}
.cards-panel {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 3fr 1fr;
    padding: 4px;
    row-gap: 3px;
    column-gap: 6px;
    border: black 1px solid;
    grid-area: recipe2;
    grid-template-areas:
    "card1 card2";
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}
.cards-entry-panel {
    grid-area: card1;
    border: black 0px solid;
}
/* 3x3 Grid Layout for Compass Hands */
.compass-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr; /* Center column is slightly wider for the suit inputs */
  grid-template-rows: auto auto auto;
  gap: 8px;
  align-items: center;
  width: 100%;
}

/* Explicit cell placements (Row / Column) */
.compass-north-hand  { grid-area: 1 / 2 / 2 / 3; }
.compass-north-ctrls { grid-area: 1 / 3 / 2 / 4; }
.compass-west-hand   { grid-area: 2 / 1 / 3 / 2; }
.compass-center-cell {
  grid-area: 2 / 2 / 3 / 3;
  text-align: center;
  align-self: stretch;     /* Stretches to match the height of the West/East hand rows */
  justify-self: stretch; /* Stretches across the center column */
  min-height: 40px;        /* Ensures a clickable target area even if empty */
  cursor: pointer;
}
.compass-east-hand   { grid-area: 2 / 3 / 3 / 4; }
.compass-south-hand  { grid-area: 3 / 2 / 4 / 3; }

/* Suit input layout inside each hand */
.hand-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 6px;
  column-gap: 6px;
  align-items: center;
}

.hand-grid input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  border: black 1px solid;
  font-size: 1.85em;
}

.suit-symbol {
  font-size: 2.0em;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.cards-usage-panel {
    grid-area: card2;
    border: black 0px solid;
}
.usage-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 3px;
  align-items: baseline;
  font-size: 1.5em;
}

.usage-header {
  font-weight: bold;
  text-decoration: underline;
  font-size: 1.25em;
  padding-bottom: 4px;
}

.usage-key {
  font-weight: bold;
  white-space: nowrap;
}

.usage-val {
  color: #222;
}

/* Compact buttons inside Cards Panel */
.cards-panel button {
  padding: 2px 4px;
  font-size: 1.5em;
  white-space: nowrap;
}

/* 3. Scaled Legend & Header Buttons in Cards Panel */
.cards-panel legend button,
.cards-panel legend a {
  padding: 3px 6px;
  font-size: 1.0em;        /* Increased from 11px */
}
.cards-panel legend {
  font-size: 1.65em;        /* Increased from 11px */
}

.cards-panel legend input[type="text"] {
  padding: 3px 6px;
  font-size: 1.0em;        /* Increased from 11px */
}
/* 3-Row Action Controls Container */
.compass-north-ctrls {
  grid-area: 1 / 3 / 2 / 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  align-items: flex-start;
  padding-left: 4px;
}

.recipe-btn-row {
  display: flex;
  flex-direction: row;
  gap: 6px;
  flex-wrap: nowrap; /* Forces buttons to stay strictly on their designated line */
}
.recipe-files-panel {
  grid-area: recipe3;
  border: black 1px solid;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;            /* Consistent vertical spacing between the two fieldsets */
  min-width: 0;        /* Prevents fieldset overflow blowout */
  box-sizing: border-box;
}
.recipe-files-panel fieldset {
  margin: 0;
  padding: 6px;
  min-width: 0;        /* Allows inputs/selects inside the fieldset to shrink smoothly */
  box-sizing: border-box;
  font-size: 1.35em;
}
/* Compact button and input sizing in Recipe Collection and Recipe Files */
.recipe-files-panel button {
  padding: 2px 3px;
  font-size: 1.25em;
  white-space: nowrap;
}

/* 4. Scaled Legend Buttons in Recipe Files & Collection */
.recipe-files-panel legend {
  font-size: 1.10em;
}

.recipe-files-panel label {
  font-size: 1.35em;
}
.recipe-files-panel span {
  font-size: 1.35em;
}

.recipe-files-panel input[type="text"] {
  font-size: 1.10em;
  padding: 1px 3px;
  box-sizing: border-box;
}
/* Flex container layout for Recipe Collection & Recipe Files */
#recipeCollectionFieldset,
#recipeFileFieldset {
  display: flex;
  flex-direction: column;
  gap: 5px; /* Adjust between 3px and 8px for exact height tuning */
}

/* Ensure single buttons take full or fit width neatly */
#recipeCollectionFieldset > button,
#recipeFileFieldset > button {
  width: fit-content;
}

/* Horizontal control/button sub-rows inside these fieldsets */
.recipe-flex-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* Vertical Deal Display Panel */
.deal-display-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px;
  min-width: 0;
  box-sizing: border-box;
  border: black 0px solid;
}

.deal-display-panel fieldset {
  margin: 0;
  padding: 6px 8px;
  min-width: 0;
  box-sizing: border-box;
  font-size: 1.15em;
}
/* 5. Scaled Legend Text & Buttons Across Deal Display & All Inner Panels */
.deal-display-panel fieldset > legend,
.deal-display-panel fieldset > legend a {
  font-size: 1.25em;      /* Larger title for Deal, Auction, Filter, Collection, Export */
}

/* Flexible row for button bars and inline controls */
.deal-display-panel .control-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 1.65em;
}
.deal-display-panel .control-row select {
  font-size: 1.0em;
}
.deal-display-panel .control-row text {
  font-size: 1.85em;
}
.deal-display-panel .btn-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 1.05em;
}
.deal-display-panel .btn-row label {
  font-size: 1.55em;
}
.deal-display-panel .btn-row button {
  font-size: 1.25em;
}
/* Target the spans and labels inside Deal Collection and Save/Export */
.deal-display-panel .btn-row span,
.deal-display-panel .control-row {
  font-size: 1.55em;
  font-weight: 500;
}
.deal-display-panel .btn-row-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

/* 6. Slightly Larger General Buttons Inside Deal Display */
.deal-display-panel button {
  padding: 3px 7px;
  font-size: 1.05em;        /* Increased from 11px */
  white-space: nowrap;
}

.deal-display-panel legend button {
  padding: 3px 7px;
  font-size: 0.95em;        /* Increased from 11px */
  white-space: nowrap;
}
.deal-display-panel #compactDealFieldset legend button {
  padding: 3px 7px;
  font-size: 0.85em;        /* Increased from 11px */
  white-space: nowrap;
}

.deal-display-panel select,
.deal-display-panel input[type="text"] {
  font-size: 1.0em;
  padding: 1px 3px;
  min-width: 0;            /* Allows text inputs to contract inside narrower fieldsets */
  box-sizing: border-box;
}

#dealFilter {
  width: 100%;             /* Let the 64-board filter fill its row neatly */
  max-width: 135px;
}

#theDateTime {
  font-size: 1.55em; /* Adjust to 1.3em–1.6em depending on preference */
  font-weight: 500;
  display: inline-block;
}

/* Preformatted deal display box */
#compactDeal {
  margin: 0;
  padding: 4px;
  white-space: pre-wrap;
  font-family: monospace;
  font-size: 1.10em;
  min-height: 80px;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}
/* =========================================================
   AUTOMATIC & MANUAL MOBILE/COMPACT LAYOUT STYLES
   ========================================================= */

/* 1. Automatic Media Query for screens 1150px or narrower (e.g., standard tablets) */
@media screen and (max-width: 1150px) {
  .generator-container {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .generator-container .settings-panel {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    align-items: stretch;
  }

  /* Optimized min-width so Dbl Dummy fits nicely alongside other settings */
  .generator-container .settings-panel > fieldset {
    flex: 1 1 110px;
    min-width: 110px;
  }

  .generator-container .recipe-panel,
  .generator-container .shaper-panel,
  .generator-container .cards-panel {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
  }
}

/* 2. Manual Mobile Mode (triggered via button) */
.generator-container.mobile-mode {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.generator-container.mobile-mode .settings-panel {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  align-items: stretch;
}

.generator-container.mobile-mode .settings-panel > fieldset {
  flex: 1 1 110px;
  min-width: 110px;
}

.generator-container.mobile-mode .recipe-panel,
.generator-container.mobile-mode .shaper-panel,
.generator-container.mobile-mode .cards-panel {
  display: flex;
  flex-direction: column;
  grid-template-columns: 1fr;
}

/* 3. Manual Compact Mode (Mobile layout + specific panel omissions) */
.generator-container.compact-mode {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.generator-container.compact-mode .settings-panel {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  align-items: stretch;
}

.generator-container.compact-mode .settings-panel > fieldset {
  flex: 1 1 110px;
  min-width: 110px;
}

.generator-container.compact-mode .recipe-panel,
.generator-container.compact-mode .shaper-panel,
.generator-container.compact-mode .cards-panel {
  display: flex;
  flex-direction: column;
  grid-template-columns: 1fr;
}

/* Compact View Hidden Elements */
.generator-container.compact-mode .shaper-selections-panel,
.generator-container.compact-mode .cards-usage-panel,
.generator-container.compact-mode .recipe-files-panel,
.generator-container.compact-mode #filterFieldset,
.generator-container.compact-mode .deal-collection-panel,
.generator-container.compact-mode .export-panel,
.generator-container.compact-mode .auction-panel,
.generator-container.compact-mode .settings-panel {
  display: none !important;
}
/* =========================================================
   COMPACT MODE: CARDS PANEL VERTICAL SPACE REDUCTION
   ========================================================= */
.generator-container.compact-mode .cards-panel {
  padding: 2px !important;
  row-gap: 1px !important;
}

/* Tighten the spacing within the compass hand grids */
.generator-container.compact-mode .hand-grid {
  row-gap: 2px !important;
}

/* Slim down the text input boxes for the card suits */
.generator-container.compact-mode .hand-grid input[type="text"] {
  font-size: 1.4em !important;
  padding: 1px 2px !important;
}

/* Slim down the suit symbols (♠ ♥ ♦ ♣) slightly */
.generator-container.compact-mode .suit-symbol {
  font-size: 1.5em !important;
}

/* Compact the usage instructions or notes next to the cards if visible */
.generator-container.compact-mode .usage-grid {
  row-gap: 1px !important;
  font-size: 1.2em !important;
}