/**
 * css/ad_guard.css —— 反广告管理页样式
 *
 * 复用 base.css / operation.css / users.css 中的通用类：
 *   .stat-grid-4 / .stat-card / .data-table / .filter-form / .filter-item /
 *   .table-toolbar / .table-loading / .table-wrap / .pagination / .page-btn /
 *   .modal-mask / .modal / .detail-form / .detail-field / .form-input /
 *   .form-select / .btn / .btn-text / .status-tag / .row-actions /
 *   .btn-link / .btn-link-warn / .field-hint / .required-mark 等
 *
 * 本文件只补充反广告管理页专属样式：
 *   双标签页、处罚规则条、关键词等宽展示、违规档位色阶、
 *   处置结果标记、记录详情弹层。
 */

/* ==================== 统计卡片 ==================== */

/* icon-blue / icon-orange / icon-purple 虽在 finance.css / operation.css 中
 * 已有定义，但本页补齐一份，避免将来调整引入顺序时统计卡片丢失底色。 */
.stat-card .stat-icon.icon-blue {
    background: #e8f1ff;
}

.stat-card .stat-icon.icon-orange {
    background: #fff2e6;
}

.stat-card .stat-icon.icon-purple {
    background: #f1ecff;
}

.stat-card .stat-icon.icon-green {
    background: #e6f7f0;
}

/* ==================== 头部与标签页 ==================== */

.guard-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    padding: 4px;
    border-radius: 8px;
    background: #f3f4f6;
    width: fit-content;
}

.guard-tab {
    padding: 7px 18px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 13.5px;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.guard-tab:hover {
    color: #1f2937;
}

.guard-tab.active {
    background: #fff;
    color: #2563eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ==================== 处罚规则说明条 ==================== */

.guard-rule {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 14px;
    border-radius: 6px;
    border-left: 3px solid #2563eb;
    background: rgba(37, 99, 235, 0.06);
    font-size: 12.5px;
    line-height: 1.6;
    color: #1e40af;
}

.guard-rule-title {
    padding: 1px 8px;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
}

.guard-rule-item {
    color: #1e3a8a;
}

.guard-rule-arrow {
    color: #93c5fd;
}

.guard-rule-danger {
    color: #b91c1c;
    font-weight: 600;
}

.guard-rule-note {
    margin-left: auto;
    color: #6b7280;
    font-size: 12px;
}

/* ==================== 表格 ==================== */

.guard-table {
    min-width: 1100px;
}

.guard-table-record {
    min-width: 1320px;
}

/* 关键词：等宽字体，便于辨认 @ / 空格等易混淆字符 */
.guard-keyword {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(220, 38, 38, 0.08);
    color: #b91c1c;
    font-family: Menlo, Consolas, monospace;
    font-size: 12.5px;
    word-break: break-all;
}

/* 违规用户：名称 + ID 两行 */
.guard-user {
    font-weight: 500;
    color: #1f2937;
}

.guard-user-id {
    margin-top: 2px;
    font-family: Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: #9ca3af;
}

/* 群组ID：等宽字体（长负数不易看错） */
.guard-chat-id {
    font-family: Menlo, Consolas, monospace;
    font-size: 12px;
    color: #4b5563;
}

/* 违规消息：截断展示，hover 显示完整内容（title 属性） */
.guard-msg {
    display: inline-block;
    max-width: 220px;
    vertical-align: middle;
    color: #374151;
    cursor: help;
}

.guard-mute {
    font-weight: 500;
    color: #b45309;
}

/* ==================== 违规档位色阶 ==================== */

.guard-level {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

/* 第 2 次：黄色预警 */
.guard-level-warn {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

/* 第 3 次起：红色（永久禁言档） */
.guard-level-danger {
    background: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
}

/* ==================== 处置结果标记 ==================== */

.guard-flag {
    display: inline-block;
    margin-right: 4px;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 11.5px;
    white-space: nowrap;
}

.guard-flag-ok {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.guard-flag-fail {
    background: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
}

/* 表格空态（含错误态） */
.guard-table .table-empty {
    padding: 36px 12px;
    text-align: center;
    font-size: 13px;
    color: #9ca3af;
}

.guard-table .table-empty-error {
    color: #b91c1c;
}

/* ==================== 弹层补充 ==================== */

.guard-modal-tip {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.6;
    background: rgba(37, 99, 235, 0.07);
    border-left: 3px solid #2563eb;
    color: #1e40af;
}

/* 记录详情：标签 + 值 的两列布局 */
.guard-detail {
    border-top: 1px solid #eef0f3;
}

.guard-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 2px;
    border-bottom: 1px solid #eef0f3;
    font-size: 13px;
    line-height: 1.7;
}

.guard-detail-label {
    flex: 0 0 84px;
    color: #6b7280;
}

.guard-detail-value {
    flex: 1 1 auto;
    color: #1f2937;
    word-break: break-all;
}

/* 详情内的违规消息原文：保留换行、可滚动，避免长文撑破弹层 */
.guard-detail-msg {
    max-height: 160px;
    overflow-y: auto;
    padding: 8px 10px;
    border-radius: 6px;
    background: #f9fafb;
    font-family: Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.7;
    white-space: pre-wrap;
}

/* ==================== 响应式 ==================== */

@media (max-width: 720px) {
    .guard-table {
        min-width: 900px;
    }

    .guard-table-record {
        min-width: 1080px;
    }

    .guard-rule-note {
        margin-left: 0;
    }

    .guard-detail-row {
        flex-direction: column;
        gap: 4px;
    }

    .guard-detail-label {
        flex: none;
    }
}