/* 页面容器：纵向 flex，让数据层撑满筛选栏以下全部剩余视口 */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.filters {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  min-height: 96px;
  padding: 16px 24px;
  background: $color-bg-white;
  border-top: 1px solid $color-border;
}

.filter-cell {
  flex: 1;
  min-width: 0;

  & + & { margin-left: 18px; }
}

.filter-trigger {
  height: 100%;
  min-height: 64px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: $color-bg-gray;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #606266;
  font-size: 26px;
}

.filter-trigger-active {
  background: $color-primary-light-bg;
  border-color: $color-primary;
  color: $color-primary-deep;
}

.filter-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-arrow {
  font-size: 20px;
  margin-left: 8px;
}

.empty-area {
  min-height: 720px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
}

.empty-hint {
  margin-top: -40px;
  text-align: center;
  font-size: 24px;
  color: $color-text-tertiary;
}

/* 告警卡片列表 */
.alarm-list {
  padding: 24px;
}

.alarm-card {
  background: $color-bg-white;
  border-radius: $radius-lg;
  box-shadow: $shadow-card;
  padding: 28px 32px;
  border: 1px solid transparent;

  & + & { margin-top: 20px; }
}

.alarm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.alarm-type {
  flex: 1;
  min-width: 0;
  font-size: 30px;
  font-weight: 600;
  color: $color-text;
  // 多行文案截断到两行：跌倒类告警 content 常带完整时间戳较长
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

// 告警类型左侧色条行标：红点提示设备类告警语义
.alarm-type-dot {  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: $radius-circle;
  background: $color-danger;
  margin-right: 12px;
  flex-shrink: 0;
}

.alarm-tag {
  display: inline-block;
  font-size: 22px;
  padding: 6px 16px;
  border-radius: $radius-pill;
  color: $color-text-secondary;
  background: $color-bg-gray;
  flex-shrink: 0;
}

// 标题行：红点 + 两行截断文案
.alarmTypeWrap {
  flex: 1;
  min-width: 0;
  margin-right: 16px;
  display: flex;
  align-items: center;
}

.alarmCardPressed {
  border-color: $color-primary-light-border;
}

/* 状态语义色：0-待处理红 2-已处理绿 1/3-已忽略/自动处理灰（2026-09-23 后端确认枚举） */
.tag1 {
  color: $color-danger;
  background: $color-danger-light-bg;
}

.tag2 {
  color: $color-primary-deep;
  background: $color-primary-light-bg;
}

.tag3 {
  color: $color-text-tertiary;
  background: $color-bg-gray;
}

.alarm-row {
  display: flex;
  align-items: flex-start;
  min-height: 48px;
}

.alarm-label {
  width: 120px;
  flex-shrink: 0;
  font-size: 26px;
  color: $color-text-secondary;
}

.alarm-value {
  flex: 1;
  min-width: 0;
  font-size: 26px;
  color: $color-text;
  word-break: break-all;
}

/* 数据层：三抽屉的定位锚点 */
.content-area {
  position: relative;
  flex: 1;
  min-height: 0;
}

.content-mask {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: $color-mask;
  z-index: 10;
}

.drop-panel-options {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: $color-bg-white;
  box-shadow: $shadow-popup;
  z-index: 11;
  display: flex;
  flex-direction: column;
  border-bottom-left-radius: $radius-lg;
  border-bottom-right-radius: $radius-lg;
  overflow: hidden;
  max-height: 60vh;
}

.drawer-header {
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid $color-border;
}

.drawer-title {
  font-size: 32px;
  font-weight: 600;
  color: $color-text;
}

.drawer-close {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-icon {
  font-size: 40px;
  color: #909399;
}

.drawer-list {
  padding: 12px 24px 24px;
}

.drawer-item {
  min-height: 96px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 14px;

  &:active { background: $color-bg-press; }
}

.drawer-item-active { background: $color-primary-light-bg; }

.drawer-item-text {
  font-size: 30px;
  color: $color-text;
}

.drawer-item-active .drawer-item-text {
  color: $color-primary;
  font-weight: 600;
}

.check-icon {
  font-size: 32px;
  color: $color-primary;
}