/* ============================================
   settle.css - Siedlungsseiten-Styling
   Für: pages/settle_select/, pages/settlement/, 
        pages/settle_config/, pages/settle_presets/
   
   Basierend auf main.css Theme-Variablen
   Responsive: 667x375px bis 4K
   ============================================ */

/* ============================================
   CSS-Variable Basis (Theme-Kompatibel)
   ============================================ */
/* Alle Werte relativ (clamp/vmin) – skaliert flüssig, keine Width-Breakpoints nötig */
:root {
  /* Siedlungs-spezifische Layout-Variablen */
  --settle-content-max-width: min(1400px, 92vw);
  --settle-footer-height: clamp(48px, 8vmin, 72px);

  /* Icon-Größen (skalen flüssig mit Viewport) */
  --settle-icon-size: clamp(32px, 8vmin, 128px);
  --settle-icon-large: calc(var(--settle-icon-size) * 2);

  /* Schriftgrößen */
  --settle-font-base: clamp(11px, 0.8vmin + 7px, 18px);
  --settle-font-large: clamp(12px, 0.9vmin + 7px, 20px);
  --settle-font-xlarge: clamp(16px, 1.5vmin + 9px, 28px);

  /* Tabellen-Layout (kompakt wie alte Version: wenig vertikal, normal horizontal) */
  --settle-table-cell-padding: 1px 4px;

  /* Button-Größen */
  --settle-btn-height: clamp(32px, 3.5vmin + 10px, 56px);

  /* Grid-Layouts */
  --settle-grid-gap: clamp(8px, 1.5vmin, 24px);
}

/* ============================================
   Gemeinsame Layout-Klassen
   ============================================ */

/* Scrollbarer Content-Bereich */
.settlePageContent {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0; /* Wichtig für flex scrolling */
}

/* Fixer Footer */
.settlePageFooter {
  flex-shrink: 0;
  min-height: var(--settle-footer-height);
  padding: clamp(0.5rem, 0.8vmin + 0.3rem, 1rem) clamp(0.75rem, 2vmin, 3rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background-color: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
}

/* ============================================
   settle_select/index.php - Zivilisationsauswahl
   ============================================ */

/* Spaltenzahl passt sich automatisch an die verfügbare Breite an (Portrait-Handy → ~2, Desktop → 4–6) */
#civilizationSelectGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(140px, 26vmin, 300px)), 1fr));
  gap: var(--settle-grid-gap);
  max-width: var(--settle-content-max-width);
  margin: 0 auto;
}

/* Zivilisations-Button */
.civilizationButton {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  min-height: var(--settle-btn-height);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  font-size: var(--settle-font-large);
}

.civilizationButton:hover {
  border-color: var(--color-bg-accent);
  background-color: var(--color-bg-tertiary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--color-shadow);
}

.civilizationButton:active {
  transform: translateY(0);
}

.civilizationButton img {
  width: var(--settle-icon-large);
  height: var(--settle-icon-large);
  object-fit: contain;
  border-radius: var(--radius-md);
}

/* ============================================
   settlement/index.php - Siedlungs-Hauptseite (S1)
   Flache Top-Bar; Tabellenkopf fix, Body scrollt in sich.
   Buttons/Inputs nutzen main.css (.input-field highlight-btn).
   ============================================ */

#settlementRoot {
  height: 100%;
}

/* Flache Top-Bar (wenig Padding) */
#settleTopBar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 0.5vmin, 0.5rem);
  padding: 0.15rem clamp(0.25rem, 1vmin, 1rem);
  background-color: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}



#settleTopBar a.input-field,
#settleTopBar div.input-field {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Toggle rechtsbündig */
#settleToggleDiv {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
}

/* hidden-Klasse muss display-Regeln mit höherer Spezifität (ID) überschreiben */
#settleResearchFrame.hidden,
#settleQuestFrame.hidden {
  display: none;
}

/* #settleTopBar div.input-field hat Spezifität (1,1,1) → hier (1,2,0) nötig */
#settleToggleDiv .input-field.hidden {
  display: none;
}

/* Content füllt Rest, scrollt nicht selbst (Tabelle scrollt in sich) */
#settlementRoot .settlePageContent {
  overflow: hidden;
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
}

/* Frame füllt den Content-Bereich (Config nutzt denselben Frame-Stil) */
#settleResearchFrame,
#settleQuestFrame,
#setGoodsSetupDiv {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Tabellenkopf fix */
#settleResearchTableHead,
#settleQuestTableHead {
  flex-shrink: 0;
}

/* Tabelle scrollt in sich (überschreibt generische .tableBody) */
#settlementRoot .tableBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  max-height: none;
}

/* Gemeinsame Tabellen-Header (color-set-secondary) */
.tableHead {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}

/* Header-Icons kleiner als Body-Icons */
.tableHead .setGoodPic {
  width: calc(var(--settle-icon-size) * 0.6);
  height: calc(var(--settle-icon-size) * 0.6);
}

/* Alternierende Zeilen im Tabellen-Body */
.tableBody .settleTable tr:nth-child(odd) {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}
.tableBody .settleTable tr:nth-child(even) {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-tertiary);
}

/* Zellen (S2 füllt die Tabellen) */
.setTDRadio {
  width: 48px;
  min-width: 48px;
  text-align: center;
  padding: var(--settle-table-cell-padding);
  position: relative; /* Label deckt ganze Zelle ab (Klickfläche) */
}

/* Label füllt die Zelle → komplette Klickfläche, Radio zentriert + skaliert mit Viewport */
.setTDRadio label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.setTDRadio input[type="radio"] {
  width: clamp(1.1rem, 3vmin + 0.5rem, 1.6rem);
  height: clamp(1.1rem, 3vmin + 0.5rem, 1.6rem);
  margin: 0;
}

.setTDProgress {
  min-width: 100px;
  padding: var(--settle-table-cell-padding);
  font-weight: bold;
}

.setTDAmount {
  text-align: center;
  padding: var(--settle-table-cell-padding);
}

/* Settlement-Tabelle (Head + Body getrennt, colgroup hält Spalten ausgerichtet) */
.settleTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  line-height: 1.2; /* kompakt wie alte Version (überschreibt body line-height 1.5) */
}

#settleResearchTableHead .settleTable td,
#settleQuestTableHead .settleTable td {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
  padding: 1px 0.5rem;
}

#settleResearchTableBodyDiv .settleTable td,
#settleQuestTableBodyDiv .settleTable td {
  border-bottom: 1px solid var(--color-border);
}

/* Lager-Zellen (Head-Zeile, klickbar → Modal) – zentriert in der Zelle */
.settleStockCell {
  width: 80px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  cursor: pointer;
}

/* Erledigte Zeilen (unterhalb/gleich Radio): durchgestrichen + gedimmt */
.settleRowDone td {
  opacity: 0.55;
  text-decoration: line-through;
}

/* Gut-Icons – zentriert in der Zelle (display:block ignoriert text-align) */
.setGoodPic {
  width: var(--settle-icon-size);
  height: var(--settle-icon-size);
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* ============================================
   settle_config/index.php - Güter-Konfiguration
   ============================================ */

/* settle_config: Root nutzt .flex-1 aus dem HTML. Kein height/overflow hier →
   bei kleinem Viewport wächst der Content über #content hinaus und dort scrollt.
   Bei großem Viewport füllt die Tabelle den Platz (Tabelle scrollt intern) */

/* Content füllt Rest, scrollt nicht selbst (Tabelle scrollt in sich) */
#settleConfigRoot .settlePageContent {
  overflow: hidden;
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
}

/* Tabellenkopf fix */
#settleGoodsSetupTableHead {
  flex-shrink: 0;
}

/* Tabelle scrollt in sich (überschreibt generische .tableBody) */
#settleConfigRoot .tableBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  max-height: none;
}

#settleGoodsSetupTableHead td {
  padding: var(--settle-table-cell-padding);
  text-align: center;
  background-color: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}

/* Alternierende Zeilen im Config-Body */
#setGoodsSetupTableBody tr:nth-child(odd) {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}
#setGoodsSetupTableBody tr:nth-child(even) {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-tertiary);
}

#setGoodsSetupTableBody td {
  padding: var(--settle-table-cell-padding);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

/* Config-Tabelle: klickbare Güter-Zellen (nutzt main.css .input-field, hier nur Breite) – zentriert */
#setGoodsSetupTableBody .settleConfigCell {
  width: 80px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  cursor: pointer;
}

/* Config-Tabelle: automatischer Wert (nicht editierbar) */
.autoValue {
  color: var(--color-text-secondary);
  font-weight: bold;
}

/* ============================================
   settle_presets/index.php - Preset-Verwaltung
   (generische .presets-* Klassen liegen in main.css)
   ============================================ */

/* settle_presets: Root/List-Container nutzen .flex-1 aus dem HTML.
   Kein overflow:hidden/height hier → bei kleinem Viewport wächst der
   Content über #content hinaus und dort scrollt (wie snipe/calc). */

/* ============================================
    settle_select - Kompakte Zivilisationsauswahl
   Content-only (wird über index.php geroutet)
   ============================================ */

/* Füllt die verbleibende Höhe von #content (flex-Eltern) – keine Magic Number */
.settleSelectContent {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.settleSelectContainer {
  width: 100%;
  max-width: var(--settle-content-max-width, 1400px);
  text-align: center;
}

.settleSelectContainer h1 {
  font-size: var(--settle-font-xlarge);
  margin-bottom: 0.5rem;
  color: var(--color-text-primary);
}

.settleSelectContainer > p {
  font-size: var(--settle-font-base);
  margin-bottom: 2rem;
  color: var(--color-text-secondary);
}