/* ================================================================
 *  UI Plugins — 公共组件样式
 *  基于 Material Design 3 设计语言
 * ================================================================ */

/* ================= Icon 映射 (MDI) ================= */
.ui-icon-success::before { content: "\F05E0"; }  /* mdi-check-circle */
.ui-icon-warning::before { content: "\F0028"; }  /* mdi-alert-circle */
.ui-icon-error::before   { content: "\F0159"; }  /* mdi-close-circle */
.ui-icon-info::before    { content: "\F02FC"; }  /* mdi-information */
.ui-icon-close::before   { content: "\F0159"; }  /* mdi-close-circle */
.ui-icon-empty::before   { content: "\F0C76"; }  /* mdi-emoticon-sad */
.ui-icon-loading::before { content: "\F0772"; }  /* mdi-loading */

[class*="ui-icon-"] {
  font-family: 'Material Design Icons' !important;
  font-style: normal;
  font-weight: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ================= 全局容器 ================= */
.__ui_root {
  position: relative;
  z-index: 9000;
  pointer-events: none;
}
.__ui_root > * {
  pointer-events: auto;
}

.ui-btn {
  flex: 1;
  padding: 0 0.28rem;
  border: none;
  border-radius: var(--md-shape-full);
  font-size: 0.16rem;
  font-weight: 500;
  letter-spacing: 0.001rem;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  height: 0.44rem;
  position: relative;
  overflow: hidden;
  transition:
    box-shadow 0.2s var(--md-motion-standard),
    background 0.15s;
  vertical-align: middle;
  line-height: 1;
}
.ui-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.ui-btn:active {
  transform: scale(0.97);
}
/* Filled */
.ui-btn-primary {
  background: var(--md-primary);
  color: var(--md-on-primary);
  box-shadow: var(--md-elevation-1);
}
.ui-btn-primary:active {
  box-shadow: var(--md-elevation-2);
}
.ui-btn-primary::after { background: var(--md-on-primary); }
.ui-btn-primary:active::after { opacity: 0.12; }


/* ================================================================
 *  1. Toast 轻提示
 * ================================================================ */
.ui-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(0.2rem);
  display: flex;
  align-items: center;
  gap: 0.08rem;
  padding: 0.14rem 0.22rem;
  border-radius: var(--md-shape-lg, 0.16rem);
  background: var(--md-on-surface, #1C1B1F);
  color: var(--md-surface, #FAFAFE);
  font-size: 0.24rem;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: 0 0.04rem 0.12rem rgba(0,0,0,0.18), 0 0.01rem 0.03rem rgba(0,0,0,0.1);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s var(--md-motion-emphasized, cubic-bezier(0.2,0,0,1));
  z-index: 9500;
  max-width: 95%;
  pointer-events: auto;
  cursor: pointer;
}
.ui-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ui-toast--hiding {
  opacity: 0;
  transform: translateX(-50%) translateY(0.2rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* 位置 */
.ui-toast--top {
  top: 0.8rem;
  bottom: auto;
}
.ui-toast--center {
  top: 50%;
  bottom: auto;
  transform: translateX(-50%) translateY(-50%);
}
.ui-toast--center.ui-toast--visible {
  transform: translateX(-50%) translateY(-50%);
}
.ui-toast--center.ui-toast--hiding {
  transform: translateX(-50%) translateY(-50%) scale(0.9);
}
.ui-toast--bottom {
  bottom: 1.1rem;
  top: auto;
}

/* 类型颜色 */
.ui-toast--default { background: var(--md-on-surface, #1C1B1F); color: var(--md-surface, #FAFAFE); }
.ui-toast--success { background: var(--md-success, #2E7D32); color: #fff; }
.ui-toast--warning { background: var(--md-warning, #EF6C00); color: #fff; }
.ui-toast--error   { background: var(--md-error, #E53935); color: #fff; }
.ui-toast--info    { background: var(--md-info, #1565C0); color: #fff; }
.ui-toast--loading { background: var(--md-surface-variant, #37474F); color: #fff; }

.ui-toast__icon {
  font-size: 0.3rem;
  flex-shrink: 0;
  line-height: 1;
}
.ui-toast__icon.ui-icon-loading {
  animation: ui-spin 1s linear infinite;
}
@keyframes ui-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ui-toast__content {
  flex: 1;
  min-width: 0;
}
.ui-toast__title {
  font-size: 0.24rem;
  font-weight: 600;
  margin-bottom: 0.04rem;
  opacity: 0.95;
}
.ui-toast__text {
  font-size: 0.22rem;
  word-break: break-word;
  opacity: 0.85;
}

/* ================================================================
 *  2 & 3. Dialog (Alert / Confirm)
 * ================================================================ */
.ui-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 9200;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  pointer-events: auto;
}
.ui-dialog-overlay--visible {
  background: rgba(0, 0, 0, 0.32);
}
.ui-dialog-overlay--hiding {
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s ease;
}

.ui-dialog {
  background: var(--md-surface-container-highest, #E2E2EA);
  border-radius: var(--md-shape-xl, 0.28rem);
  width: 85%;
  max-width: 3.8rem;
  padding: 0.28rem;
  transform: scale(0.85);
  opacity: 0;
  transition: transform 0.25s var(--md-motion-emphasized, cubic-bezier(0.2,0,0,1)),
              opacity 0.2s ease;
  box-shadow: 0 0.08rem 0.24rem rgba(0,0,0,0.15);
}
.ui-dialog-overlay--visible .ui-dialog {
  transform: scale(1);
  opacity: 1;
}

.ui-dialog__title {
  font-size: 0.2rem;
  font-weight: 500;
  color: var(--md-on-surface, #1C1B1F);
  margin-bottom: 0.16rem;
  line-height: 1.4;
}
.ui-dialog__body {
  font-size: 0.16rem;
  color: var(--md-on-surface-variant, #49454F);
  line-height: 1.6;
  margin-bottom: 0.2rem;
  word-break: break-word;
}
.ui-dialog__body:has(.ui-dialog__icon) {
  display: flex;
  align-items: center;
  gap: 0.12rem;
}
.ui-dialog__icon {
  font-size: 0.28rem;
  flex-shrink: 0;
  line-height: 1;
}
.ui-dialog__icon.ui-icon-loading {
  animation: ui-spin 1s linear infinite;
}
.ui-dialog--loading .ui-dialog__icon {
  color: var(--md-primary, #6750A4);
}
.ui-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.08rem;
}
.ui-dialog__actions .ui-btn {
  flex: none;
  min-width: 0.72rem;
}
.ui-dialog__textarea {
  display: block;
  width: 100%;
  margin-top: 0.12rem;
  padding: 0.10rem 0.12rem;
  font-size: 0.15rem;
  line-height: 1.5;
  color: var(--md-on-surface, #1C1B1F);
  background: var(--md-surface-variant, #E7E0EC);
  border: none;
  border-radius: 0.08rem;
  resize: none;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
}
.ui-dialog__textarea:focus {
  outline: 0.02rem solid var(--md-primary, #6750A4);
}
.ui-dialog__textarea::placeholder {
  color: var(--md-on-surface-variant, #49454F);
  opacity: 0.6;
}

/* ================================================================
 *  4. ActionSheet 底部动作面板
 * ================================================================ */
.ui-actionsheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 9200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: background 0.25s ease;
  pointer-events: auto;
}
.ui-actionsheet-overlay--visible {
  background: rgba(0, 0, 0, 0.32);
}
.ui-actionsheet-overlay--hiding {
  background: rgba(0, 0, 0, 0);
  transition: background 0.25s ease;
}

.ui-actionsheet {
  width: 100%;
  max-width: 6rem;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  background: var(--md-surface-container-low, #F5F5FA);
  border-radius: var(--md-shape-xl, 0.28rem) var(--md-shape-xl, 0.28rem) 0 0;
  padding: 0 0.12rem;
  padding-bottom: env(safe-area-inset-bottom, 0.12rem);
  transform: translateY(100%);
  transition: transform 0.3s var(--md-motion-emphasized, cubic-bezier(0.2,0,0,1));
  box-shadow: 0 -0.08rem 0.24rem rgba(0,0,0,0.12), 0 -0.02rem 0.06rem rgba(0,0,0,0.06);
}
.ui-actionsheet--visible {
  transform: translateY(0);
}

/* --- 拖拽手柄 --- */
.ui-actionsheet__handle {
  display: flex;
  justify-content: center;
  padding: 0.12rem 0 0.04rem;
  flex-shrink: 0;
}
.ui-actionsheet__handle span {
  display: block;
  width: 0.40rem;
  height: 0.05rem;
  border-radius: 0.025rem;
  background: var(--md-outline-variant, #CAC4D0);
  opacity: 0.45;
}

.ui-actionsheet__header {
  text-align: center;
  padding: 0.08rem 0.20rem 0.14rem;
  font-size: 0.18rem;
  font-weight: 600;
  color: var(--md-on-surface, #1C1B1F);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  flex-shrink: 0;
}
.ui-actionsheet__header-icon {
  font-family: 'Material Design Icons';
  font-size: 0.24rem;
  color: var(--md-primary, #6750A4);
  line-height: 1;
}
.ui-actionsheet__header-title {
  line-height: 1.3;
}
.ui-actionsheet__header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.20rem;
  right: 0.20rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--md-outline-variant, #CAC4D0) 20%, var(--md-outline-variant, #CAC4D0) 80%, transparent);
  opacity: 0.4;
}
/* --- 搜索框 --- */
.ui-actionsheet__search {
  display: flex;
  align-items: center;
  gap: 0.08rem;
  padding: 0.08rem 0.08rem;
  position: relative;
  flex-shrink: 0;
}
.ui-actionsheet__search::after {
  display: none;
}
.ui-actionsheet__search-icon {
  font-family: 'Material Design Icons';
  font-size: 0.20rem;
  color: var(--md-on-surface-variant, #49454F);
  flex-shrink: 0;
  opacity: 0.45;
  margin-left: 0.08rem;
}
.ui-actionsheet__search-input {
  flex: 1;
  border: none;
  outline: none;
  background: var(--md-surface-container-highest, #ECE6F0);
  font-size: 0.18rem;
  color: var(--md-on-surface, #1C1B1F);
  padding: 0.10rem 0.14rem;
  border-radius: var(--md-shape-full, 1rem);
  line-height: 0.32rem;
  transition: background 0.15s, box-shadow 0.15s;
}
.ui-actionsheet__search-input:focus {
  background: var(--md-surface-container-highest, #E2DDE8);
  box-shadow: 0 0 0 2px rgba(103, 80, 164, 0.15);
}
.ui-actionsheet__search-input::placeholder {
  color: var(--md-on-surface-variant, #49454F);
  opacity: 0.5;
}
.ui-actionsheet__search-clear {
  font-family: 'Material Design Icons';
  font-size: 0.20rem;
  color: var(--md-on-surface-variant, #49454F);
  cursor: pointer;
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: center;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  opacity: 0.5;
  transition: opacity 0.15s, background 0.15s;
}
.ui-actionsheet__search-clear:active {
  opacity: 1;
  background: rgba(0,0,0,0.08);
}

/* --- 列表空状态 --- */
.ui-actionsheet__empty {
  text-align: center;
  padding: 0.24rem 0.16rem;
  font-size: 0.16rem;
  color: var(--md-on-surface-variant, #49454F);
  opacity: 0.6;
}

.ui-actionsheet__list {
  padding: 0.04rem 0;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ui-actionsheet__list::-webkit-scrollbar {
  display: none;
}
.ui-actionsheet__item {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  padding: 0.18rem 0.16rem;
  font-size: 0.2rem;
  font-weight: 400;
  color: var(--md-on-surface, #1C1B1F);
  cursor: pointer;
  transition: background 0.1s;
  position: relative;
  border-radius: var(--md-shape-sm, 0.08rem);
  -webkit-user-select: none;
  user-select: none;
}
.ui-actionsheet__item:active {
  background: rgba(28, 27, 31, 0.07);
}
.ui-actionsheet__item--selected {
  color: var(--md-primary, #6750A4);
  font-weight: 600;
  background: rgba(103, 80, 164, 0.06);
}
.ui-actionsheet__item--selected:active {
  background: rgba(103, 80, 164, 0.12);
}
.ui-actionsheet__item-check {
  font-family: 'Material Design Icons';
  font-size: 0.24rem;
  flex-shrink: 0;
  line-height: 1;
  color: var(--md-primary, #6750A4);
}
.ui-actionsheet__item--destructive {
  color: var(--md-error, #E53935);
  font-weight: 500;
}
.ui-actionsheet__item--disabled {
  color: var(--md-outline, #79747E);
  opacity: 0.5;
  cursor: not-allowed;
}
.ui-actionsheet__item-icon {
  font-size: 0.24rem;
  flex-shrink: 0;
  line-height: 1;
  color: var(--md-on-surface-variant, #49454F);
}
.ui-actionsheet__item-label {
  flex: 1;
  min-width: 0;
  text-align: left;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-actionsheet__gap {
  height: 0.08rem;
  background: transparent;
  flex-shrink: 0;
}
.ui-actionsheet__cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.18rem;
  font-size: 0.20rem;
  font-weight: 600;
  color: var(--md-on-surface-variant, #49454F);
  background: var(--md-surface-container, #F0EEF4);
  cursor: pointer;
  margin: 0 0.08rem 0.10rem;
  border-radius: var(--md-shape-md, 0.12rem);
  transition: background 0.12s;
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;
}
.ui-actionsheet__cancel:active {
  background: var(--md-surface-container-high, #E8E8F0);
}

/* ================================================================
 *  5. NoticeBar 顶部通告栏
 * ================================================================ */
.ui-noticebar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  gap: 0.08rem;
  padding: 0.1rem 0.16rem;
  font-size: 0.15rem;
  font-weight: 500;
  line-height: 1.4;
  transform: translateY(-100%);
  transition: transform 0.3s var(--md-motion-emphasized, cubic-bezier(0.2,0,0,1));
  pointer-events: auto;
  cursor: pointer;
}
.ui-noticebar--visible {
  transform: translateY(0);
}
.ui-noticebar--hiding {
  transform: translateY(-100%);
  transition: transform 0.25s ease;
}

.ui-noticebar--info {
  background: var(--md-primary-container, #E8EAF6);
  color: var(--md-on-primary-container, #1A237E);
}
.ui-noticebar--warning {
  background: var(--md-tertiary-container, #FFF8E1);
  color: var(--md-on-tertiary-container, #E65100);
}
.ui-noticebar--error {
  background: var(--md-error-container, #FFEBEE);
  color: var(--md-on-error-container, #B71C1C);
}
.ui-noticebar--success {
  background: #E8F5E9;
  color: #2E7D32;
}

.ui-noticebar__icon {
  font-size: 0.2rem;
  flex-shrink: 0;
}
.ui-noticebar__content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.ui-noticebar__text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-noticebar__scroll-wrap {
  overflow: hidden;
  white-space: nowrap;
}
.ui-noticebar__scroll-wrap .ui-noticebar__text {
  display: inline-block;
  animation: ui-noticebar-scroll 12s linear infinite;
  white-space: nowrap;
  padding-left: 100%;
}
@keyframes ui-noticebar-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.ui-noticebar__close {
  font-size: 0.18rem;
  flex-shrink: 0;
  opacity: 0.7;
  cursor: pointer;
  padding: 0.02rem;
  border-radius: 50%;
  transition: opacity 0.15s, background 0.15s;
}
.ui-noticebar__close:active {
  opacity: 1;
  background: rgba(0,0,0,0.08);
}

/* ================================================================
 *  6. Skeleton 骨架屏
 * ================================================================ */
.ui-skeleton {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: var(--md-surface, #FAFAFE);
  padding: 0.16rem;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.ui-skeleton--visible {
  opacity: 1;
}
.ui-skeleton--hidden {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.ui-skeleton__block {
  background: var(--md-surface-container-high, #E8E8F0);
  border-radius: var(--md-shape-xs, 0.25rem);
}
.ui-skeleton--animated .ui-skeleton__block {
  animation: ui-skeleton-pulse 1.5s ease-in-out infinite;
}
@keyframes ui-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.ui-skeleton__row {
  display: flex;
  align-items: flex-start;
  gap: 0.12rem;
  margin-bottom: 0.2rem;
}
.ui-skeleton__row:last-child {
  margin-bottom: 0;
}
.ui-skeleton__avatar {
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.ui-skeleton__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}
.ui-skeleton__title {
  height: 0.16rem;
}
.ui-skeleton__para {
  height: 0.12rem;
}
.ui-skeleton__card {
  border-radius: var(--md-shape-md, 0.12rem);
  overflow: hidden;
  background: var(--md-surface-container-lowest, #fff);
  box-shadow: var(--md-elevation-1, 0 0.0625rem 0.125rem rgba(0,0,0,.08));
}

/* ================================================================
 *  7. Empty 空状态
 * ================================================================ */
.ui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.24rem 0.16rem;
  text-align: center;
  opacity: 0;
  transform: translateY(0.2rem);
  transition: opacity 0.3s ease, transform 0.3s var(--md-motion-emphasized, cubic-bezier(0.2,0,0,1));
}
.ui-empty--visible {
  opacity: 1;
  transform: translateY(0);
}
.ui-empty--hidden {
  opacity: 0;
  transform: translateY(0.2rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.ui-empty__icon {
  font-size: 0.48rem;
  color: #E0DDE5;
  margin-bottom: 0.12rem;
  line-height: 1;
}
.ui-empty__icon .ui-icon-empty {
  font-size: 0.48rem;
}
.ui-empty__image {
  width: 0.8rem;
  height: 0.8rem;
  margin-bottom: 0.12rem;
}
.ui-empty__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ui-empty__title {
  font-size: 0.17rem;
  font-weight: 500;
  color: #9A97A0;
  margin-bottom: 0.16rem;
}
.ui-empty__desc {
  font-size: 0.14rem;
  color: #B0ADB5;
  line-height: 1.5;
  margin-bottom: 0.12rem;
  max-width: 2.8rem;
}
.ui-empty__action {
  min-width: 0.8rem;
}

/* ================================================================
 *  Mobile date/time pickers: touch sizes stay in CSS pixels, independent of page rem scaling.
 * ================================================================ */
.ui-datepicker-overlay, .ui-timepicker-overlay { z-index: 9300; padding: 16px; box-sizing: border-box; }
.ui-dialog.ui-datepicker, .ui-dialog.ui-timepicker { width: 100%; max-width: 480px; padding: 0; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); border-radius: 24px; background: var(--md-surface-container-highest, #f3f2f7); }
.ui-datepicker button, .ui-timepicker button { box-sizing: border-box; touch-action: manipulation; -webkit-tap-highlight-color: transparent; font-family: inherit; }
.ui-datepicker__header, .ui-timepicker__header { flex-shrink: 0; padding: 18px 20px; color: var(--md-on-primary, #fff); background: var(--md-primary, #5C6BC0); }
.ui-datepicker__title, .ui-timepicker__title { font-size: 16px; font-weight: 500; line-height: 24px; margin-bottom: 6px; opacity: .9; }
.ui-datepicker__selected-date { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ui-datepicker__date-week { font-size: 15px; opacity: .9; }
.ui-datepicker__date-main { font-size: 28px; font-weight: 600; line-height: 36px; }
.ui-datepicker__nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; flex-shrink: 0; }
.ui-datepicker__nav-btn { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0; background: transparent; border: 0; border-radius: 24px; color: var(--md-on-surface-variant, #49454F); cursor: pointer; }
.ui-datepicker__nav-btn i { font-size: 26px; line-height: 1; }
.ui-datepicker__nav-label { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; background: transparent; border: 0; border-radius: 16px; font-size: 18px; font-weight: 600; color: var(--md-on-surface, #1C1B1F); }
button.ui-datepicker__nav-label { cursor: pointer; }
.ui-datepicker__weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 0 6px; flex-shrink: 0; }
.ui-datepicker__weekday { text-align: center; font-size: 13px; font-weight: 500; color: var(--md-on-surface-variant, #49454F); padding: 5px 0; line-height: 20px; }
.ui-datepicker__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px 0; padding: 6px 6px 12px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ui-datepicker__day { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; height: 48px; margin: 0; border: 0; border-radius: 24px; background: transparent; font-size: 17px; font-weight: 500; color: var(--md-on-surface, #1C1B1F); cursor: pointer; }
.ui-datepicker__day--today { border: 2px solid var(--md-primary, #5C6BC0); color: var(--md-primary, #5C6BC0); font-weight: 600; }
.ui-datepicker__day--selected, .ui-datepicker__day--range-start, .ui-datepicker__day--range-end { background: var(--md-primary, #5C6BC0) !important; color: var(--md-on-primary, #fff) !important; font-weight: 600; z-index: 1; border-color: transparent; }
.ui-datepicker__day--outside { opacity: .5; }
.ui-datepicker__day--outside.ui-datepicker__day--selected, .ui-datepicker__day--outside.ui-datepicker__day--range-start, .ui-datepicker__day--outside.ui-datepicker__day--range-end, .ui-datepicker__day--outside.ui-datepicker__day--range-middle { opacity: 1; }
.ui-datepicker__day--range-middle { background: var(--md-primary-container, #e1e4f6); color: var(--md-on-primary-container, #25336d); border-radius: 0; }
.ui-datepicker__day--preview { opacity: .6; }
.ui-datepicker__day--disabled, .ui-datepicker__month-cell--disabled, .ui-datepicker__year-cell--disabled { opacity: .35; color: var(--md-outline, #79747E); cursor: not-allowed; }
.ui-datepicker__months, .ui-datepicker__years { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 12px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ui-datepicker__month-cell, .ui-datepicker__year-cell { display: flex; align-items: center; justify-content: center; min-width: 0; height: 56px; border: 0; border-radius: 12px; background: transparent; font-size: 17px; font-weight: 500; color: var(--md-on-surface, #1C1B1F); cursor: pointer; }
.ui-datepicker__month-cell--today, .ui-datepicker__year-cell--today { border: 2px solid var(--md-primary, #5C6BC0); color: var(--md-primary, #5C6BC0); }
.ui-datepicker__month-cell--selected, .ui-datepicker__year-cell--selected { border-color: transparent; background: var(--md-primary, #5C6BC0) !important; color: var(--md-on-primary, #fff) !important; font-weight: 600; }
.ui-datepicker__range-dates { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.ui-datepicker__range-date { display: inline-flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 2px; min-width: 0; font-size: 18px; font-weight: 600; line-height: 24px; }
.ui-datepicker__range-year { flex-basis: 100%; font-size: 13px; font-weight: 400; opacity: .85; line-height: 18px; }
.ui-datepicker__range-date--pending { font-size: 16px; font-weight: 400; opacity: .85; }
.ui-datepicker__range-month { font-size: 16px; }
.ui-datepicker__range-day { font-size: 20px; }
.ui-datepicker__range-sep { flex-shrink: 0; font-size: 20px; opacity: .75; }
.ui-datepicker__hint { margin-top: 8px; font-size: 13px; line-height: 20px; opacity: .9; }
.ui-datepicker__actions, .ui-timepicker__actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-shrink: 0; border-top: 1px solid var(--md-outline-variant, #CAC4D0); padding: 12px; background: var(--md-surface-container-highest, #f3f2f7); }
.ui-datepicker__actions .ui-btn, .ui-timepicker__actions .ui-btn { flex: none; min-width: 72px; height: 48px; padding: 0 16px; border-radius: 24px; font-size: 16px; line-height: 24px; white-space: nowrap; }
.ui-datepicker__actions .ui-datepicker__clear { min-width: 64px; padding: 0 12px; }
.ui-datepicker__actions .ui-datepicker__confirm, .ui-timepicker__actions .ui-timepicker__confirm { min-width: 96px; background: var(--md-primary, #5C6BC0); color: var(--md-on-primary, #fff) !important; }
.ui-datepicker__confirm[disabled] { opacity: .4; cursor: not-allowed; }
.ui-datepicker button:active:not(:disabled), .ui-timepicker button:active { filter: brightness(.94); }
.ui-datepicker button:focus-visible, .ui-timepicker button:focus-visible, .ui-timepicker__col:focus-visible { outline: 3px solid var(--md-primary, #5C6BC0); outline-offset: -3px; }
.ui-timepicker__header { text-align: center; }
.ui-timepicker__value { font-size: 32px; line-height: 40px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-timepicker__hint { font-size: 13px; line-height: 20px; margin: 6px 0 0; opacity: .9; }
.ui-timepicker__labels { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); text-align: center; padding: 10px 12px 0; font-size: 13px; line-height: 20px; color: var(--md-on-surface-variant, #49454F); flex-shrink: 0; }
.ui-timepicker__labels:has(span:nth-child(4)) { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) minmax(64px, .75fr); }
.ui-timepicker__body { position: relative; display: flex; align-items: center; padding: 8px 12px 12px; flex-shrink: 0; }
.ui-timepicker__col { position: relative; flex: 1; min-width: 0; width: auto; height: calc(var(--ui-time-rows, 5) * 56px); overflow: hidden; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.ui-timepicker__col:active { cursor: grabbing; }
.ui-timepicker__col-inner { will-change: transform; }
.ui-timepicker__item { height: 56px; line-height: 56px; text-align: center; font-size: 22px; font-weight: 500; color: var(--md-on-surface-variant, #49454F); opacity: .6; font-variant-numeric: tabular-nums; }
.ui-timepicker__item--selected { color: var(--md-primary, #5C6BC0); font-weight: 600; opacity: 1; font-size: 28px; }
.ui-timepicker__sep { flex: 0 0 16px; text-align: center; font-size: 28px; color: var(--md-on-surface-variant, #49454F); }
.ui-timepicker__highlight { position: absolute; left: 12px; right: 12px; top: calc(50% - 2px); height: 56px; transform: translateY(-50%); border-radius: 12px; background: var(--md-primary, #5C6BC0); opacity: .1; pointer-events: none; }
.ui-timepicker__col--period { flex: .75; min-width: 64px; }
.ui-timepicker__col--period .ui-timepicker__item { font-size: 18px; }
.ui-timepicker__col--period .ui-timepicker__item--selected { font-size: 22px; }
@media (max-width: 600px) {
  .ui-datepicker-overlay, .ui-timepicker-overlay { align-items: flex-end; padding: 12px 0 0; }
  .ui-dialog.ui-datepicker, .ui-dialog.ui-timepicker { max-width: 100%; border-radius: 24px 24px 0 0; max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); }
  .ui-datepicker__actions, .ui-timepicker__actions { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-height: 440px) {
  .ui-datepicker__header { padding: 8px 16px; }
  .ui-datepicker__date-main { font-size: 24px; line-height: 28px; }
  .ui-datepicker__hint { margin-top: 4px; }
  .ui-timepicker__header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 16px; }
  .ui-timepicker__title { margin: 0; }
  .ui-timepicker__value { font-size: 28px; line-height: 36px; }
  .ui-timepicker__hint { display: none; }
  .ui-timepicker__labels { padding-top: 2px; }
  .ui-timepicker__body { padding-top: 0; padding-bottom: 0; }
  .ui-timepicker__highlight { top: 50%; }
  .ui-datepicker__actions, .ui-timepicker__actions { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .ui-datepicker-overlay .ui-dialog, .ui-timepicker-overlay .ui-dialog { transition: none; }
  .ui-timepicker__col-inner { transition: none !important; }
}

/* ================================================================
 *  ListRefresh — 下拉刷新列表组件样式
 * ================================================================ */

/* MiniRefresh 容器适配 — 用 flex 填满 lr-wrap > div 的剩余空间（header 下方） */
.minirefresh-wrap {
  position: relative; /* 作为 downwrap 绝对定位的参考 */
  flex: 1;
  min-height: 0;     /* 允许 flex 子项缩小 */
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.minirefresh-scroll {
  position: relative;
  background: var(--md-surface) !important;
}

/* 列表内容区域 */
.lr-list-content {
  min-height: 0.8rem;
}

/* 列表项通用样式 */
.lr-item {
  background: var(--md-surface-container-low, #f5f5f8);
  border-radius: var(--md-shape-md, 12px);
  margin: 0.08rem 0.12rem;
  padding: 0.14rem 0.16rem;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.lr-item:active {
  background: var(--md-surface-container, #efeff3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 列表项头部 */
.lr-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.08rem;
}

.lr-item__title {
  font-size: 0.17rem;
  font-weight: 600;
  color: var(--md-on-surface, #1c1b1f);
  line-height: 1.4;
}

.lr-item__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.02rem 0.08rem;
  border-radius: var(--md-shape-full, 9999px);
  font-size: 0.11rem;
  font-weight: 500;
  line-height: 1.6;
}

.lr-item__badge--success {
  background: var(--md-success-container, #e8f5e9);
  color: var(--md-success, #2e7d32);
}

.lr-item__badge--warning {
  background: var(--md-warning-container, #fff3e0);
  color: var(--md-warning-dark, #e65100);
}

.lr-item__badge--error {
  background: var(--md-error-container, #fce4ec);
  color: var(--md-error, #c62828);
}

.lr-item__badge--info {
  background: var(--md-primary-container, #e8eaf6);
  color: var(--md-primary, #3949ab);
}

/* 列表项内容 */
.lr-item__body {
  font-size: 0.13rem;
  color: var(--md-on-surface-variant, #49454f);
  line-height: 1.5;
}

.lr-item__row {
  display: flex;
  align-items: center;
  gap: 0.06rem;
  margin-bottom: 0.04rem;
}

.lr-item__row i {
  color: var(--md-on-surface-variant, #79747e);
  flex-shrink: 0;
}

/* 列表项底部 */
.lr-item__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.08rem;
  padding-top: 0.08rem;
  border-top: 1px solid var(--md-outline-variant, #e0e0e0);
}

.lr-item__meta {
  font-size: 0.14rem;
  color: var(--md-on-surface-variant, #79747e);
}

.lr-item__amount {
  font-size: 0.16rem;
  font-weight: 600;
  color: var(--md-primary, #3949ab);
}

/* 加载状态提示 */
.lr-loading-tip {
  text-align: center;
  padding: 0.12rem 0;
  font-size: 0.12rem;
  color: var(--md-on-surface-variant, #79747e);
}

.lr-loading-tip__spinner {
  display: inline-block;
  width: 0.16rem;
  height: 0.16rem;
  border: 2px solid var(--md-outline, #c4c7c5);
  border-top-color: var(--md-primary, #3949ab);
  border-radius: 50%;
  animation: lr-spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 0.06rem;
}

@keyframes lr-spin {
  to { transform: rotate(360deg); }
}

/* 列表页 page-container 作为定位上下文（由 JS 添加 .list-page 类） */
.page-container.list-page {
  position: relative;
  height: calc(100vh - 0.5rem); /* navbar 下方到视口底部 */
  overflow: hidden;
  box-sizing: border-box;
  padding: 0; /* 列表页不需要内边距，由 lr-header 自行控制 */
  margin: 0 auto; /* 保留水平居中 */
}

/* 列表容器绝对定位，填满 page-container（底部预留 nav-bar 空间） */
.lr-wrap {
  position: absolute;
  top: 0;
  left: 0.12rem;
  right: 0.12rem;
  bottom: 0.65rem; /* 预留底部 nav-bar 空间 */
  overflow: hidden;
}

/* #tripList 用 flex 列布局：header 固定 + minirefresh-wrap 填满剩余空间 */
.lr-wrap > div {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* 筛选头部（固定在顶部，不随列表滚动） */
.lr-header {
  flex-shrink: 0;
  padding: 0.04rem 0.04rem 0.02rem;
  background: var(--md-surface, #fafafe);
  position: relative;
  z-index: 10;
  box-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.08);
}
.lr-header .search-bar {
  margin-bottom: 0.06rem;
}

/* 日期 + 筛选标签同行 */
.lr-filter-row {
  display: flex;
  align-items: center;
  gap: 0.06rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.04rem;
}
.lr-filter-row::-webkit-scrollbar { display: none; }

/* 紧凑 chip 按钮 */
.lr-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.04rem;
  padding: 0.04rem 0.1rem;
  border-radius: var(--md-shape-full);
  border: 1px solid var(--md-outline);
  background: transparent;
  font-size: 0.14rem;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}
.lr-chip:active {
  background: var(--md-surface-container);
}
.lr-chip--clear {
  border-color: var(--md-primary);
  color: var(--md-primary);
}
.lr-chip--active {
  background: var(--md-primary-container);
  border-color: var(--md-primary);
  color: var(--md-primary);
}

/* 紧凑筛选标签 */
.lr-tabs {
  display: flex;
  gap: 0.04rem;
  flex-shrink: 0;
}
.lr-tabs__tab {
  padding: 0.04rem 0.1rem;
  border-radius: var(--md-shape-full);
  border: 1px solid var(--md-outline);
  background: transparent;
  font-size: 0.14rem;
  font-weight: 500;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  white-space: nowrap;
}
.lr-tabs__tab--active {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  border-color: transparent;
}

/* ================================================================
 *  MiniRefresh 死循环修复补丁 (覆盖矫正高度)
 * ================================================================ */

/* 1. 强制纠正 minirefresh-wrap 的高度计算基准 */
.lr-wrap > div > .minirefresh-wrap {
  display: block !important; /* 强制转为块级，避免 flex 测量延迟 */
  position: relative;
  width: 100%;
  height: calc(100% - 1.1rem) !important; /* 动态减去顶部 .lr-header 的大概高度 */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* 2. 确保 MiniRefresh 内部滚动区域有足够触底空间 */
.minirefresh-scroll {
  width: 100%;
  min-height: 101%; /* 关键：强制产生超过 100% 的滚动高度，避免空列表/少列表误判 */
  box-sizing: border-box;
}

/* 3. 避免 upwrap 上拉提示块高度重叠 */
.minirefresh-upwrap {
  min-height: 0.4rem;
  padding: 0.1rem 0;
  text-align: center;
}