/**
 * alerts.css — 预警卡片统一样式(被 dashboard.php 与 alert_board.php 共享)
 * 提供 .alert-card 的全套子元素样式:badge / type / title / subject / detail / link / dismiss
 * 颜色变量来自各页面 :root 中定义的 --surface / --border / --crit / --warn / --accent 等
 */

.alert-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--text-2);
    border-radius: 14px;
    padding: 14px 16px;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease;
}
.alert-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.alert-card.critical { border-left-color: var(--crit); }
.alert-card.warning  { border-left-color: var(--warn); }

.alert-card .a-dismiss {
    position: absolute; top: 10px; right: 12px;
    width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface-2);
    color: var(--text-2); font-size: 12px; line-height: 20px; text-align: center;
    cursor: pointer; z-index: 2; padding: 0;
}
.alert-card .a-dismiss:hover { color: var(--crit); border-color: var(--crit); }

.alert-card .a-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.alert-card .a-badge {
    font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
    background: var(--text-2); color: #fff;
}
.alert-card.critical .a-badge { background: var(--crit); }
.alert-card.warning  .a-badge { background: var(--warn); }

.alert-card .a-type {
    font-size: 12px; color: var(--text-2); font-weight: 600; letter-spacing: .5px;
    cursor: pointer; user-select: none;
}
.alert-card .a-type:hover { color: var(--accent); text-decoration: underline dotted; }

.alert-card .a-title {
    font-size: 13px; font-weight: 700; color: var(--text);
    margin: 2px 0; padding-right: 28px;
}
.alert-card .a-subject {
    font-size: 15px; font-weight: 700; color: var(--text);
    margin: 2px 0; padding-right: 28px; line-height: 1.4;
}
.alert-card .a-detail { font-size: 12px; color: var(--text-2); line-height: 1.5; margin-top: 4px; }

.alert-card .a-link {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 10px; font-size: 12px; font-weight: 700;
    color: var(--accent); text-decoration: none;
}
.alert-card .a-link:hover { text-decoration: underline; }

/* 大屏(电视墙)模式下放大 */
body.tv .alert-card .a-subject { font-size: 20px; }
body.tv .alert-card .a-detail { font-size: 15px; }