/* Page-specific enhancements and visualization styles mapped to Dith tokens */

/* Input section used for Token Forecast Visualization */
.input-section {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 12px;
}

.input-section > div {
  flex: 1 1 320px;
  min-width: min(100%, 320px);
}

.input-section button {
  flex: 1 1 240px;
  min-width: 240px;
}

/* Normalize controls to theme */
label {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
}

input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  background: #0f1320; /* close to --code while readable */
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
input[type="text"]::placeholder { color: #8aa0b3; opacity: .7; }
input[type="text"]:focus { outline: none; border-color: #2a3340; box-shadow: var(--focus); }

/* Button inside input-section inherits .btn look via element selector override */
.input-section button {
  appearance: none;
  border: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(94,234,212,0.12), rgba(96,165,250,0.12));
  color: var(--text);
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.input-section button:hover { transform: translateY(-1px); border-color: #27303a; box-shadow: var(--shadow-1); }
.input-section button:focus-visible { outline: none; box-shadow: var(--focus); }

/* Chart area and status */
.chart-container { min-height: 400px; margin-top: 18px; border: 1px dashed var(--border); border-radius: var(--radius-md); }
#loading { text-align: center; padding: 18px; color: var(--muted); font-style: italic; }

/* Errors */
.error {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.08);
  border-left: 3px solid #ff6b6b;
  padding: 12px 14px;
  margin: 14px 0;
  border-radius: 6px;
}

/* Token data blocks */
.token-info { display: grid; gap: 12px; }
.wallet-address {
  background: #0f1320;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9rem;
  word-break: break-all;
  border: 1px solid var(--border);
}

/* Utility */
.section:empty { display: none; }

/* Extra responsive tweaks */
@media (max-width: 600px) {
  .input-section { flex-direction: column; gap: 12px; }
  .chart-container { min-height: 300px; }
}