/* 辅食过敏自查样式 */

.al-config {
  background: linear-gradient(135deg, #ffe9d4 0%, #ffd2a8 100%);
  border: 1px solid #ffc080;
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 18px;
}
.al-config h3 { margin: 0 0 12px; color: #5a3a00; font-size: 1.05rem; }
.al-row { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 8px; }
.al-row label { font-weight: 600; color: #5a3a00; }
.al-row input[type="text"], .al-row input[type="number"] {
  padding: 6px 10px; border: 1px solid #d9a86b; border-radius: 8px;
  background: #fff; font-size: 0.95rem; min-width: 100px;
}

.al-summary {
  display: flex; gap: 16px; flex-wrap: wrap; margin: 14px 0 8px;
}
.al-stat {
  flex: 1; min-width: 140px; background: #fff; padding: 14px 18px;
  border-radius: 10px; text-align: center; border: 1px solid #ffd9b3;
}
.al-stat-n { font-size: 1.8rem; font-weight: 800; color: #ff8c00; }
.al-stat-l { color: #666; font-size: 0.85rem; margin-top: 4px; }

.al-stage-list { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.al-stage {
  flex: 1; min-width: 230px; padding: 14px 16px; background: #fff;
  border: 1px solid #e2e2e2; border-radius: 10px;
}
.al-stage.current { border-color: #ff8c00; background: #fff7e6; box-shadow: 0 2px 8px rgba(255, 140, 0, 0.15); }
.al-stage-h { font-weight: 700; color: #5a3a00; margin-bottom: 6px; }
.al-stage ul { padding-left: 18px; margin: 0; color: #444; font-size: 0.88rem; line-height: 1.7; }
.al-tag { background: #ff8c00; color: #fff; font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; }

.al-filter {
  background: #fff; border: 1px solid #e2e2e2; border-radius: 10px;
  padding: 12px 16px; margin-bottom: 16px;
}
.al-filter h4 { margin: 0 0 8px; font-size: 0.95rem; color: #555; }
.al-filter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 6px; }
.al-filter-row label { font-size: 0.85rem; color: #555; }
.al-radio {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; background: #f5f5f5; border-radius: 999px;
  cursor: pointer; font-size: 0.85rem;
}
.al-radio:has(input:checked) { background: #ffd9b3; color: #5a3a00; }

.al-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

.al-btn {
  padding: 8px 16px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent; font-size: 0.9rem; transition: all 0.15s;
}
.al-btn-primary { background: #ff8c00; color: #fff; border-color: #e07b00; }
.al-btn-primary:hover { background: #e07b00; }
.al-btn-ghost { background: #fff; color: #555; border-color: #d9d9d9; }
.al-btn-ghost:hover { background: #f5f5f5; }
.al-btn-edit {
  background: #fff; color: #ff8c00; border-color: #ffb070;
  font-size: 0.85rem; padding: 5px 12px;
}
.al-btn-edit:hover { background: #fff7e6; }

.al-cat { margin-bottom: 22px; }
.al-cat-h {
  font-size: 1.05rem; color: #5a3a00; margin: 0 0 10px;
  padding-bottom: 6px; border-bottom: 2px solid #ffd9b3;
  display: flex; align-items: center; gap: 10px;
}
.al-cat-desc { font-size: 0.78rem; color: #999; font-weight: normal; }

.al-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.al-food {
  background: #fff; border: 1px solid #e2e2e2; border-radius: 10px;
  padding: 12px 14px; transition: box-shadow 0.15s;
}
.al-food:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.al-food-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.al-food-name { font-weight: 700; color: #222; }
.al-risk {
  font-size: 0.7rem; padding: 2px 8px; border-radius: 999px;
}
.al-allergen {
  font-size: 0.72rem; color: #f5222d; background: #fff1f0;
  padding: 2px 8px; border-radius: 999px; border: 1px solid #ffccc7;
}
.al-food-meta { display: flex; gap: 12px; font-size: 0.82rem; color: #666; margin-bottom: 4px; }
.al-month { color: #888; }
.al-status { font-weight: 600; }
.al-food-desc { font-size: 0.85rem; color: #555; line-height: 1.5; margin: 4px 0; }
.al-food-symp { margin: 6px 0; }
.al-food-symp summary {
  font-size: 0.82rem; color: #888; cursor: pointer;
  user-select: none; padding: 4px 0;
}
.al-food-symp[open] summary { color: #ff8c00; }
.al-food-symp > div {
  font-size: 0.82rem; color: #f5222d; line-height: 1.6;
  background: #fff1f0; padding: 8px 10px; border-radius: 6px;
}
.al-food-act { margin-top: 8px; }

/* 弹窗 */
.al-modal-bg {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.al-modal {
  background: #fff; border-radius: 12px; max-width: 480px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.al-modal-h {
  padding: 14px 18px; border-bottom: 1px solid #eee;
  display: flex; align-items: center; gap: 10px;
}
.al-modal-h strong { color: #ff8c00; }
.al-x {
  margin-left: auto; background: transparent; border: 0;
  font-size: 1.5rem; cursor: pointer; color: #999;
}
.al-modal-body { padding: 16px 18px; }
.al-fld { margin-bottom: 12px; }
.al-fld > label { display: block; margin-bottom: 4px; font-weight: 600; color: #444; font-size: 0.9rem; }
.al-fld input[type="date"], .al-fld textarea {
  width: 100%; padding: 6px 10px; border: 1px solid #d9d9d9;
  border-radius: 6px; font-size: 0.95rem;
}
.al-fld textarea { resize: vertical; }
.al-sev-row { display: flex; flex-direction: column; gap: 6px; }
.al-sev {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 6px; cursor: pointer;
  font-size: 0.88rem;
}
.al-sev:has(input:checked) { background: #fff7e6; }
.al-warn {
  background: #fff1f0; border-left: 4px solid #f5222d; padding: 8px 12px;
  font-size: 0.85rem; color: #cf1322; border-radius: 4px; margin-top: 8px;
}
.al-modal-foot {
  padding: 12px 18px; border-top: 1px solid #eee;
  display: flex; align-items: center; gap: 10px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .al-list { grid-template-columns: 1fr; }
  .al-summary { gap: 8px; }
  .al-stat { min-width: 100px; padding: 10px 12px; }
  .al-stat-n { font-size: 1.4rem; }
}

/* 打印隐藏 */
@media print {
  .m-tabbar, nav.m-tabbar, #toolFavBtn, .float-cta,
  .al-config, .al-actions, .al-filter, .al-btn,
  .al-food-act { display: none !important; }
}