/* ==========================================================================
   全局样式
   说明：只定义视觉变量与少量布局微调，颜色统一走 Bootstrap 的 CSS 变量，
   这样浅色 / 深色模式切换不需要写两份样式。
   ========================================================================== */

:root {
    --surge-bg: #f8f9fa;
    --surge-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --surge-radius: 0.5rem;
}

/* 深色模式：跟随系统主题，由 Bootstrap 的 data-bs-theme 机制接管 */
[data-bs-theme="dark"] {
    --surge-bg: #1a1d20;
    --surge-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

body {
    background-color: var(--surge-bg);
    font-family: 'Segoe UI', Tahoma, 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}

.container {
    max-width: 1100px;
}

.card {
    border: 0;
    border-radius: var(--surge-radius);
    box-shadow: var(--surge-shadow);
}

.form-label {
    font-weight: 500;
}

/* 动作标签：按 Surge 语义着色，深浅色模式均保持可读对比度 */
.badge-action {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.03em;
}

.badge-action-action-REJECT { background-color: var(--bs-danger); }
.badge-action-action-PROXY  { background-color: var(--bs-warning); color: #212529; }
.badge-action-action-DIRECT { background-color: var(--bs-success); }
.badge-action-action-FINAL  { background-color: var(--bs-info); }

/* 空状态与错误状态占满整行 */
#rulesTableBody .row-message {
    text-align: center;
    padding: 2.5rem 1rem;
}

/* 操作列按钮间距 */
.action-btns .btn {
    margin-left: 0.25rem;
}
.action-btns .btn:first-child {
    margin-left: 0;
}

/* 域名列用等宽字体，便于肉眼比对 */
.domain-cell {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    word-break: break-all;
}

/* 搜索框：小屏时独占一行 */
.search-form-wrap {
    flex: 0 0 auto;
}
@media (max-width: 576px) {
    .search-form-wrap {
        flex: 1 1 100%;
    }
    .search-form-wrap .form-control {
        flex: 1 1 auto;
        min-width: 0;
    }
    .action-btns .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}