/* Weather App - TUI Style */
.weather-app-full {
  height: 100%;
  background-color: oklch(0.1 0 0);
  color: oklch(0.8 0.1 140);
  font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;
  font-size: 13px;
  line-height: 1.5;
  padding: 1rem;
  overflow: auto;
}

.tui-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.tui-panel {
  border: 1px solid oklch(0.3 0.05 140);
  padding: 1rem;
  background: oklch(0.12 0 0);
}

.tui-title {
  color: oklch(0.9 0.15 140);
  font-weight: bold;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid oklch(0.25 0 0);
  padding-bottom: 0.5rem;
}

.tui-location {
  color: oklch(0.7 0 0);
  font-size: 12px;
  margin-bottom: 1rem;
}

.tui-weather-display {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.tui-icon-large {
  font-size: 3rem;
  line-height: 1;
}

.tui-temp-large {
  font-size: 2.5rem;
  font-weight: bold;
  color: oklch(0.95 0.15 140);
}

.tui-unit {
  font-size: 1.5rem;
  color: oklch(0.7 0 0);
}

.tui-condition {
  color: oklch(0.8 0 0);
  margin-bottom: 0.5rem;
}

.tui-details {
  display: flex;
  gap: 2rem;
  color: oklch(0.6 0 0);
  font-size: 12px;
}

/* Forecast Grid */
.tui-forecast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 0.5rem;
}

.tui-forecast-item {
  text-align: center;
  padding: 0.5rem;
  border: 1px solid oklch(0.2 0 0);
  background: oklch(0.08 0 0);
}

.tui-forecast-name {
  font-size: 11px;
  color: oklch(0.6 0 0);
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tui-forecast-day .tui-forecast-name {
  font-weight: bold;
  color: oklch(0.85 0.1 140);
}

.tui-forecast-icon {
  font-size: 1.5rem;
  margin: 0.25rem 0;
}

.tui-forecast-temp {
  font-weight: bold;
  color: oklch(0.9 0.1 140);
}

.tui-forecast-desc {
  font-size: 10px;
  color: oklch(0.5 0 0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Controls */
.tui-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid oklch(0.25 0 0);
}

.tui-btn {
  background: transparent;
  border: 1px solid oklch(0.4 0.1 200);
  color: oklch(0.8 0.15 200);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  text-decoration: none;
}

.tui-btn:hover {
  color: oklch(1 0.2 140);
  border-color: oklch(0.6 0.15 140);
  background: oklch(0.15 0.05 140);
}

.tui-btn-primary {
  border-color: oklch(0.5 0.15 140);
  color: oklch(0.9 0.15 140);
}

.tui-inline-form {
  display: inline;
}

.tui-updated {
  color: oklch(0.5 0 0);
  font-size: 11px;
  margin-left: auto;
}

/* Error Panel */
.tui-error-panel {
  border-color: oklch(0.4 0.2 30);
}

.tui-error-msg {
  color: oklch(0.8 0.2 30);
  margin-bottom: 1rem;
}

/* Setup Panel */
.tui-setup-panel {
  max-width: 400px;
  margin: 0 auto;
}

.tui-text {
  color: oklch(0.8 0 0);
  margin-bottom: 0.5rem;
}

.tui-subtext {
  color: oklch(0.5 0 0);
  font-size: 11px;
  margin-bottom: 1rem;
}

.tui-setup-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.tui-divider {
  color: oklch(0.4 0 0);
  font-size: 11px;
}

.tui-search-form {
  display: flex;
  gap: 0.5rem;
}

.tui-input {
  background: oklch(0.08 0 0);
  border: 1px solid oklch(0.3 0 0);
  color: oklch(0.9 0 0);
  font-family: inherit;
  font-size: 12px;
  padding: 0.25rem 0.5rem;
  width: 180px;
}

.tui-input::placeholder {
  color: oklch(0.4 0 0);
}

.tui-input:focus {
  outline: none;
  border-color: oklch(0.5 0.1 140);
}

/* Geocode Results */
.weather-results {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.5rem;
  width: 100%;
}

.weather-result {
  display: block;
  background: oklch(0.12 0 0);
  border: 1px solid oklch(0.25 0 0);
  color: oklch(0.8 0.1 200);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 0.5rem;
  text-align: left;
  width: 100%;
}

.weather-result:hover {
  border-color: oklch(0.5 0.1 140);
  background: oklch(0.15 0.05 140);
}

.weather-result-name {
  color: oklch(0.9 0 0);
}

.weather-result-details {
  color: oklch(0.5 0 0);
  font-size: 10px;
}

.weather-no-results {
  color: oklch(0.5 0 0);
  font-size: 11px;
  text-align: center;
}