/* ===== 大屏 + 全终端自适应补充样式 (screen.css) ===== */
/* 响应式网格: .row + .col 断点 */
.row { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.row > [class*="col-"] { padding: 0 10px; box-sizing: border-box; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
/* badge 颜色补充 */
.badge-danger { background: #e74c3c; color: #fff; }
.badge-success { background: #27ae60; color: #fff; }
.badge-warning { background: #f39c12; color: #fff; }
.badge-info { background: #3498db; color: #fff; }
.badge-primary { background: #2c3e50; color: #fff; }
.badge-gray { background: #95a5a6; color: #fff; }

/* 大屏攻击流 */
.attack-line { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid #f0f0f0; font-size: .8rem; flex-wrap: wrap; }
.attack-line:nth-child(even) { background: #fafafa; }
.attack-time { color: #7f8c8d; font-size: .75rem; white-space: nowrap; }
.attack-server { color: #2c3e50; font-weight: 600; white-space: nowrap; }
.attack-ip { color: #e74c3c; font-weight: 600; }
.attack-detail { color: #555; flex: 1; min-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* TOP 攻击源 */
.top-line { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid #f0f0f0; }
.top-rank { width: 22px; height: 22px; border-radius: 50%; background: #e74c3c; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; flex-shrink: 0; }
.top-ip { font-family: monospace; color: #333; min-width: 120px; }
.top-bar-bg { flex: 1; height: 10px; background: #f0f0f0; border-radius: 5px; overflow: hidden; }
.top-bar { height: 100%; background: linear-gradient(90deg,#e74c3c,#e67e22); border-radius: 5px; }
.top-count { font-size: .8rem; color: #e74c3c; font-weight: 700; white-space: nowrap; }

/* ===== 全终端自适应断点 ===== */
@media (max-width: 1400px) {
  .col-xl-6, .col-xl-4, .col-xl-5, .col-xl-7 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 769px) and (max-width: 1400px) {
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 992px) {
  .col-md-6, .col-xl-4, .col-xl-5, .col-xl-7 { flex: 0 0 100%; max-width: 100%; }
  .stat-cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
}
@media (max-width: 768px) {
  .col-6 { flex: 0 0 100%; max-width: 100%; }
  .attack-line, .top-line { font-size: .75rem; }
  .card-body table { font-size: .78rem; }
  h3 { font-size: 1.05rem; }
  .card-header { font-size: .9rem; }
}

/* 大屏卡片细节 */
.card { box-shadow: 0 1px 3px rgba(0,0,0,.08); border: 1px solid #e8e8e8; border-radius: 8px; background: #fff; }
.card-header { padding: 10px 14px; border-bottom: 1px solid #f0f0f0; background: #fafafa; border-radius: 8px 8px 0 0; }
.card-body { padding: 14px; }
.card-body.p-0 { padding: 0; }
.h-100 { height: 100%; }
code { background: #f5f5f5; padding: 1px 5px; border-radius: 3px; font-size: .85em; }
.text-muted { color: #7f8c8d; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.mb-2 { margin-bottom: 10px; } .mb-3 { margin-bottom: 14px; } .mt-1 { margin-top: 4px; } .mt-3 { margin-top: 14px; }
.py-3 { padding: 12px 0; } .text-center { text-align: center; }
/* ===== 全终端自适应增强 (追加到 screen.css) ===== */

/* 表格响应式: 窄屏允许横向滚动, 不破坏布局 */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 768px) {
    .card-body table.table,
    .card-body > table,
    table.table { display: block; overflow-x: auto; white-space: nowrap; width: 100%; }
    .card-header { flex-wrap: wrap; }
}

/* 统计卡片自适应列数 */
@media (max-width: 992px) {
    .stat-cards { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important; gap: 8px; }
}
@media (max-width: 768px) {
    .stat-cards { grid-template-columns: repeat(2, 1fr) !important; }
    .stat-card .stat-value { font-size: 1.2rem; }
}

/* 主内容区: 更窄屏时减少内边距 */
@media (max-width: 768px) {
    .main-content { padding: 12px !important; }
    .page-content { padding: 10px !important; }
}

/* 大屏/电视墙增强 (1920+ 与 4K) */
@media (min-width: 1920px) {
    body, .page-content { font-size: 1.05rem; }
    .stat-card .stat-value { font-size: 2rem; }
    .card-header { font-size: 1.05rem; padding: 14px 18px; }
    .attack-line, .top-line { padding: 8px 10px; font-size: .9rem; }
}

/* 全屏大屏模式: URL加 #fullscreen 时隐藏侧栏/顶栏, 最大化内容 */
body.fullscreen-mode .sidebar,
body.fullscreen-mode .topbar,
body.fullscreen-mode .sidebar-toggle { display: none !important; }
body.fullscreen-mode .main-content { margin-left: 0 !important; padding: 0 !important; }
body.fullscreen-mode .page-content { padding: 10px !important; max-width: none !important; }
body.fullscreen-mode .breadcrumb { display: none; }

/* 大屏专用全屏按钮 */
.btn-fullscreen {
    position: fixed; right: 16px; bottom: 16px; z-index: 9999;
    background: rgba(44,62,80,.85); color: #fff; border: none;
    padding: 8px 14px; border-radius: 6px; font-size: .85rem; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.btn-fullscreen:hover { background: rgba(44,62,80,1); }