/* ═══════════════════════════════════════════
   设备控制 & 整备卡片组件
   ═══════════════════════════════════════════ */

/* --- Device Control Confirmation Card (Hybrid v2.4) --- */
.confirm-card {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-default);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin: var(--space-3) 0;
  width: 100%;
  max-width: 100%;
}

.confirm-header {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-md); font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  padding: var(--space-4) var(--space-4) var(--space-3);
}

.confirm-content {
  padding: 0 var(--space-4) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}

.confirm-body {
  background-color: var(--color-bg-surface);
  padding: 0;
  display: flex; flex-direction: column; gap: var(--space-3);
}

.confirm-label { font-size: var(--text-xs); color: var(--color-text-secondary); margin-bottom: var(--space-0_5); }
.confirm-val-highlight { font-size: var(--text-md); font-weight: var(--font-bold); color: var(--color-primary); }

.selection-list {
  display: flex; flex-direction: column; gap: var(--space-3);
  margin-top: var(--space-2);
  border-top: 1px solid var(--color-bg-muted);
  padding-top: var(--space-3);
}

.selection-item {
  display: flex; align-items: center; gap: var(--space-2_5);
  font-size: var(--text-sm); color: var(--color-text-primary);
  cursor: pointer;
  min-height: var(--touch-target);
}

.select-circle {
  width: 18px; height: 18px;
  border: 1.5px solid var(--slate-400);
  border-radius: var(--radius-xs);
  display: flex; justify-content: center; align-items: center;
  transition: all var(--duration-fast) var(--ease-out);
  background-color: var(--color-bg-surface);
  position: relative;
  box-sizing: border-box;
  flex-shrink: 0;
}

.selection-item.active .select-circle {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

.selection-item.active .select-circle::after {
  content: '';
  width: 4px; height: 8px;
  border: solid var(--color-text-inverse);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  position: absolute;
  top: 2px;
}

.selection-space-label {
  font-size: var(--text-xs); color: var(--color-text-secondary);
  padding: var(--space-1) 0 var(--space-0_5) var(--space-2);
  font-weight: var(--font-medium);
}

.confirm-actions {
  display: flex; gap: var(--space-2_5);
  margin-top: var(--space-1);
}

.btn-confirm {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border: none; border-radius: var(--radius-sm);
  padding: var(--space-2_5) 0; flex-grow: 1;
  font-size: var(--text-base); font-weight: var(--font-medium);
  cursor: pointer; min-height: var(--touch-target);
  transition: all var(--duration-fast) var(--ease-out);
}
.btn-confirm:hover { background-color: var(--color-primary-hover); }
.btn-confirm:active { transform: scale(0.95); }

.btn-cancel {
  background-color: var(--color-bg-muted);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-2_5) 0; flex-grow: 1;
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  cursor: pointer; min-height: var(--touch-target);
  transition: all var(--duration-fast) var(--ease-out);
}
.btn-cancel:hover { background-color: var(--slate-200); }

/* Numerical / Slider Control */
.float-control-wrapper {
  display: flex; flex-direction: column; gap: var(--space-4);
  align-items: center; padding: var(--space-2_5) 0;
}
.float-val-display {
  font-size: var(--text-3xl); font-weight: var(--font-semibold); color: var(--color-text-primary);
}
.float-slider-row {
  width: 100%; display: flex; align-items: center; gap: var(--space-3);
}
.btn-step {
  width: 32px; height: 32px; border-radius: var(--radius-full);
  border: 1px solid var(--color-border-default); background: var(--color-bg-surface);
  display: flex; justify-content: center; align-items: center;
  font-size: var(--text-lg); font-weight: bold; color: var(--color-text-primary);
  cursor: pointer;
}

/* --- Device Status Card (Execution Result) --- */
.device-status-card {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: var(--space-2);
}

.status-header {
  background-color: var(--color-info-bg);
  padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; gap: var(--space-2_5);
  border-bottom: 1px solid var(--color-info-bg);
}

.status-icon-box {
  width: 32px; height: 32px;
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-full);
  display: flex; justify-content: center; align-items: center;
  font-size: var(--text-lg);
  box-shadow: var(--shadow-xs);
}

.status-text {
  font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--brand-deep);
}

.status-body {
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
}

.status-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--text-sm); color: var(--color-text-secondary);
}

.status-value {
  font-weight: var(--font-semibold); color: var(--color-text-primary);
  background-color: var(--color-bg-muted);
  padding: var(--space-0_5) var(--space-2); border-radius: var(--radius-xs);
}

/* --- Active Prep Card (AUTO / CONFIRM) --- */
.active-prep-card {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: var(--space-2);
  border: 1px solid var(--color-border-light);
}

.active-prep-header {
  background: linear-gradient(135deg, var(--brand-deep) 0%, var(--slate-800) 100%);
  padding: var(--space-2_5) var(--space-3_5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-text-inverse);
}

.active-prep-header .bot-tag {
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.active-prep-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.active-prep-title {
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
  margin-bottom: var(--space-1);
}

.active-prep-info-box {
  background-color: var(--color-bg-muted);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  border: 1px solid var(--color-border-light);
}

.active-prep-room {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.active-prep-time {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.active-prep-status-text {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
  margin-top: var(--space-2);
}

.active-prep-status-text strong {
  color: var(--brand-deep);
}

.active-prep-actions {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2_5) var(--space-4) var(--space-4);
}

.btn-active-primary {
  background-color: var(--brand-deep);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2_5) 0;
  flex: 1;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  min-height: var(--touch-target);
  transition: all var(--duration-fast) var(--ease-out);
}

.btn-active-primary:hover {
  background-color: var(--slate-800);
}

.btn-active-primary:disabled {
  background-color: var(--slate-400);
  cursor: not-allowed;
}

.btn-active-secondary {
  background-color: var(--color-bg-muted);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-2_5) 0;
  flex: 1;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  min-height: var(--touch-target);
  transition: all var(--duration-fast) var(--ease-out);
}

.btn-active-secondary:hover {
  background-color: var(--slate-200);
}