/* 补充样式 —— 主要靠 Bootstrap，这里只处理 Streamlit 独有观感的几处 */

.card-form {
  max-width: 720px;
}

.auth-card {
  max-width: 520px;
  margin: 3rem auto;
}

/* 物品详情页的信息块，对应 Streamlit 的 st.info / st.success 卡片 */
.info-line {
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  margin-bottom: 0.5rem;
  background-color: #e7f1ff;
}

.info-line.status-in-use {
  background-color: #d1e7dd;
}

/* CLI 终端 */
.terminal {
  box-sizing: border-box;
  height: 420px;
  overflow-y: auto;
  border: 1px solid rgba(49, 51, 63, 0.2);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #31333f);
  font: 14px/1.45 "Consolas", "Cascadia Mono", "Courier New", monospace;
}

.terminal-content {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.terminal .line {
  margin: 0 0 6px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.terminal .command {
  font-weight: 600;
}

.terminal .output {
  font: inherit;
  margin: 0 0 6px;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.terminal .empty {
  color: rgba(49, 51, 63, 0.6);
}

.terminal-input-wrap {
  position: relative;
}

.terminal-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
  margin-top: 2px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid rgba(49, 51, 63, 0.2);
  border-radius: 8px;
  background: var(--bs-body-bg, #fff);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  font: 14px/1.45 "Consolas", "Cascadia Mono", "Courier New", monospace;
}

/* 下方空间不够时翻到输入框上方 */
.terminal-menu-up {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
}

.terminal-menu-item {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 5px 12px;
  cursor: pointer;
}

/* 选中的那条：实心主色底 + 白字，跟 Bootstrap 的 .dropdown-item.active 一个路子。
   原来用的 --bs-primary-bg-subtle 是浅蓝，在浅色页面上几乎看不出来 */
.terminal-menu-item.active {
  background: var(--bs-primary, #0d6efd);
  color: #fff;
}

.terminal-menu-name {
  flex: 0 0 8em;
  font-weight: 600;
}

/* 还没敲出来的部分淡一点，一眼看出补全补了什么 */
.terminal-menu-name b {
  opacity: 0.55;
}

.terminal-menu-desc {
  flex: 1 1 auto;
  min-width: 0;
  opacity: 0.65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 菜单底部那条：没有文字，只当一根虚线分隔 */
.terminal-menu-hint {
  padding: 4px 12px;
  border-top: 1px dashed rgba(49, 51, 63, 0.2);
  opacity: 0.55;
  font-size: 12px;
}
