/* layout.css

/* === App Container Layout === */
.app-container {
  max-width: 420px;
  margin: 0 auto;
  padding: 1rem;
  height: 100vh;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* === Card Container === */
.card {
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* === Chart Area === */
.chart-area {
  background-color: #eaeaea;
  flex-shrink: 1;
  flex-grow: 0;
  flex-basis: 50%;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.chart-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  transition: transform 0.4s ease;
  will-change: transform;
}

.transitioning .chart-slide {
  transition: transform 0.4s ease-in-out;
}

.is-active {
  transform: translateX(0%);
  z-index: 2;
}
.is-incoming {
  transform: translateX(0%);
  z-index: 1;
}
.is-outgoing {
  transform: translateX(-100%);
  z-index: 3;
}
.is-hidden {
  transform: translateX(0%);
  z-index: 0;
  visibility: hidden;
  pointer-events: none;
}

/* === Stats Panel === */
.stats-panel {
  height: 48px;
  flex-shrink: 0;
  flex-grow: 0;
  background-color: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exp-bar {
  font-weight: bold;
  font-size: 1rem;
}

/* === Tabs Bar === */
.tab-buttons {
  height: 48px;
  flex-shrink: 0;
  flex-grow: 0;
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background-color: #f9f9f9;
}

.tab-buttons.locked {
  background-color: #fff;
  border-top: none;
  border-bottom: none;
}

.tab-buttons.locked .tab-btn {
  visibility: hidden;
  pointer-events: none;
}

.tab-btn {
  flex: 1;
  padding: 0.75rem 0;
  font-size: 1rem;
  font-weight: bold;
  border: none;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.tab-btn:hover {
  background-color: #efefef;
}

.tab-btn.active {
  background-color: #fff;
  border-bottom: 2px solid #333;
}

/* === Tab Content Area === */
.tab-content {
  flex-grow: 1;
  flex-shrink: 1;
  min-height: 0;
  overflow: hidden;
}

/* === Individual Tab Panels === */
#tab-trade,
#tab-upgrade {
  flex-grow: 1;
  flex-shrink: 1;
  min-height: 0;
}

#tab-upgrade {
  overflow-y: auto;
}

#tab-trade.hidden,
#tab-upgrade.hidden {
  display: none;
}