:root {
    --cf-bg: #0b1220;
    --cf-surface: rgba(255, 255, 255, 0.06);
    --cf-surface-2: rgba(255, 255, 255, 0.08);
    --cf-border: rgba(255, 255, 255, 0.10);
    --cf-text: rgba(255, 255, 255, 0.92);
    --cf-muted: rgba(255, 255, 255, 0.65);
    --cf-accent: #35b6ff;
    --cf-accent-2: #7c5cff;
}

.industrial-bg {
    background: radial-gradient(1200px 600px at 15% 10%, rgba(53, 182, 255, 0.18), transparent 40%), radial-gradient(900px 500px at 85% 20%, rgba(124, 92, 255, 0.16), transparent 45%), linear-gradient(180deg, #07101f 0%, var(--cf-bg) 100%);
    color: var(--cf-text);
}

.industrial-navbar {
    background: rgba(8, 14, 28, 0.7);
    backdrop-filter: blur(10px);
}

.industrial-footer {
    border-top: 1px solid var(--cf-border);
    background: rgba(8, 14, 28, 0.45);
}

.card-industrial {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.05));
    border: 1px solid var(--cf-border);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.small-muted {
    color: var(--cf-muted);
}

.btn-accent {
    background: linear-gradient(90deg, var(--cf-accent), var(--cf-accent-2));
    color: #061018;
    border: 0;
    font-weight: 600;
}

    .btn-accent:hover {
        filter: brightness(1.05);
        color: #061018;
    }

.form-control,
.form-select,
.input-group-text {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--cf-border);
    color: var(--cf-text);
}

    .form-control:focus,
    .form-select:focus {
        border-color: rgba(53, 182, 255, 0.55);
        box-shadow: 0 0 0 0.25rem rgba(53, 182, 255, 0.15);
        background-color: rgba(255, 255, 255, 0.08);
        color: var(--cf-text);
    }

.input-group-text {
    color: var(--cf-muted);
}

.table-dark {
    --bs-table-bg: rgba(255, 255, 255, 0.04);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.06);
    --bs-table-border-color: rgba(255, 255, 255, 0.08);
}

.table thead th {
    position: sticky;
    top: 0;
    background: rgba(11, 18, 32, 0.95);
    z-index: 1;
}

.badge.bg-secondary {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

.table-active {
    outline: 2px solid rgba(53, 182, 255, 0.45);
    outline-offset: -2px;
}
/* 表格表头：强制水平显示，不换行 */
.table thead th {
    white-space: nowrap;
}

/* 表格单元格可按需不换行（如果你也想内容不换行就保留；想内容可换行就删掉这段） */
.table td {
    white-space: nowrap;
}

/* 给设备列表表格一个最小宽度，避免列被挤到极窄导致表头“竖起来” */
#deviceTable {
    min-width: 1200px;
}

/* 管理员操作日志表：表头可见 + 单元格换行 + 防溢出 */
#adminLogTable {
    table-layout: fixed;
}

    #adminLogTable thead th {
        background: rgba(11, 18, 32, 0.95);
        color: rgba(255, 255, 255, 0.92);
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        white-space: nowrap;
    }

    #adminLogTable td {
        white-space: normal; /* 允许换行 */
        overflow-wrap: anywhere; /* 超长字符串也能断行 */
        word-break: break-word; /* 兼容 */
        vertical-align: top;
    }

        /* 让“备注”列更容易显示完整（第5列） */
        #adminLogTable th:nth-child(5),
        #adminLogTable td:nth-child(5) {
            width: 48%;
        }

        /* 其余列给一个大致宽度（可按需要微调） */
        #adminLogTable th:nth-child(1),
        #adminLogTable td:nth-child(1) {
            width: 140px;
        }

        #adminLogTable th:nth-child(2),
        #adminLogTable td:nth-child(2) {
            width: 140px;
        }

        #adminLogTable th:nth-child(3),
        #adminLogTable td:nth-child(3) {
            width: 140px;
        }

        #adminLogTable th:nth-child(4),
        #adminLogTable td:nth-child(4) {
            width: 160px;
        }
/* 管理员用户管理表：表头文字变亮，避免深色背景看不清 */
#adminUserTable thead th {
    color: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}