/* style.css - 科技感主题 (修复分页按钮背景突兀问题) */

:root {
    --tech-bg-dark: #050a14;
    --tech-bg-panel: #0a1020;
    --tech-cyan: #00f2ff;
    --tech-blue: #0d6efd;
    --tech-text-main: #ffffff;
    --tech-text-muted: #8b9bb4;
    --tech-glow-border: 0 0 10px rgba(0, 242, 255, 0.3), inset 0 0 5px rgba(0, 242, 255, 0.1);
    --tech-glow-active: 0 0 15px rgba(0, 242, 255, 0.6);
    --glass-bg: rgba(10, 16, 32, 0.85);
}

/* === 全局基础样式 === */
body {
    font-family: 'Segoe UI', Roboto, 'Microsoft YaHei', sans-serif;
    background-color: var(--tech-bg-dark);
    color: var(--tech-text-main);
    background-image: 
        linear-gradient(rgba(0, 242, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 242, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    min-height: 100vh;
    cursor: default !important;
    user-select: none;
}

/* 强制所有交互元素保持箭头 */
a, button, .btn, .nav-link, .key-btn, .paginate_button { 
    text-decoration: none; 
    cursor: default !important; 
}

.text-muted { color: var(--tech-text-muted) !important; }
h1, h2, h3, h4, h5, h6 { color: var(--tech-text-main); font-weight: 600; letter-spacing: 1px; }

/* === Bootstrap 组件深度覆盖 === */

/* 1. 卡片 */
.card {
    background-color: var(--glass-bg) !important;
    border: 1px solid rgba(0, 242, 255, 0.15);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    backdrop-filter: blur(10px);
    border-radius: 8px;
}
.card-header {
    background-color: rgba(0, 242, 255, 0.05) !important;
    border-bottom: 1px solid rgba(0, 242, 255, 0.2);
    color: var(--tech-cyan) !important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.card-body { box-shadow: inset 0 0 20px rgba(0,0,0,0.2); }

/* 2. 表格 */
.table { color: var(--tech-text-main); border-color: rgba(0, 242, 255, 0.1); }
.table thead th {
    background-color: rgba(13, 110, 253, 0.2) !important; 
    color: var(--tech-cyan);
    border-bottom: 2px solid var(--tech-cyan);
    text-transform: uppercase;
    font-size: 0.9rem;
}
.table-hover tbody tr:hover {
    background-color: rgba(0, 242, 255, 0.1) !important;
    box-shadow: inset 2px 0 0 var(--tech-cyan);
    color: white;
}
.table tbody td { border-color: rgba(255, 255, 255, 0.05); }

/* === 核心修复：DataTables 分页按钮 === */
.dataTables_wrapper .dataTables_paginate {
    padding-top: 10px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button { 
    color: var(--tech-text-muted) !important;
    background: transparent !important; /* 强制透明背景 */
    border: 1px solid transparent !important; /* 去除默认边框 */
    border-radius: 4px;
    margin-left: 5px;
    transition: all 0.3s;
}

/* 悬停或当前页状态 - 显示科技蓝 */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--tech-blue) !important;
    border: 1px solid var(--tech-cyan) !important;
    color: white !important;
    box-shadow: var(--tech-glow-border);
}

/* 禁用状态 (如第一页时的'上一页') - 隐身处理 */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: rgba(255,255,255,0.1) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: default !important;
}

/* 3. 输入框 */
.form-control, .form-select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(0, 242, 255, 0.3);
    color: var(--tech-text-main) !important;
    border-radius: 4px;
    user-select: auto; 
    cursor: text !important;
}
.form-control:focus, .form-select:focus {
    background-color: rgba(0, 242, 255, 0.1) !important;
    border-color: var(--tech-cyan);
    box-shadow: var(--tech-glow-active);
    color: white !important;
}
.form-control::placeholder { color: rgba(255,255,255,0.3); }

/* 4. 按钮 */
.btn-primary {
    background-color: var(--tech-blue);
    border-color: var(--tech-blue);
    box-shadow: 0 0 5px rgba(13, 110, 253, 0.5);
    font-weight: bold;
    letter-spacing: 1px;
}
.btn-primary:hover {
    background-color: var(--tech-cyan);
    border-color: var(--tech-cyan);
    color: #000;
    box-shadow: var(--tech-glow-active);
}

/* 5. 侧边栏 */
.admin-sidebar {
    background: linear-gradient(180deg, var(--tech-bg-panel) 0%, var(--tech-bg-dark) 100%);
    border-right: 1px solid rgba(0, 242, 255, 0.15);
    box-shadow: 5px 0 15px rgba(0,0,0,0.3);
    z-index: 10;
}
.admin-sidebar h4 {
    color: var(--tech-cyan);
    text-shadow: 0 0 10px rgba(0, 242, 255, 0.5);
}
.nav-link {
    color: var(--tech-text-muted) !important;
    margin-bottom: 8px;
    border: 1px solid transparent;
    transition: all 0.3s;
    font-weight: 500;
}
.nav-link:hover {
    color: var(--tech-cyan) !important;
    background: rgba(0, 242, 255, 0.05);
    border-color: rgba(0, 242, 255, 0.2);
    padding-left: 20px;
}
.nav-link.active {
    background: rgba(13, 110, 253, 0.2) !important;
    color: var(--tech-cyan) !important;
    border: 1px solid var(--tech-cyan);
    box-shadow: var(--tech-glow-border);
    font-weight: bold;
}
hr.text-white { border-top-color: rgba(0, 242, 255, 0.3) !important; opacity: 1; }

/* 其他 */
.badge.bg-primary {
    background-color: rgba(13, 110, 253, 0.5) !important;
    border: 1px solid var(--tech-cyan);
    color: var(--tech-cyan);
    box-shadow: 0 0 5px rgba(0, 242, 255, 0.3);
}
.badge.bg-success {
    background-color: rgba(25, 135, 84, 0.5) !important;
    border: 1px solid #20c997;
    color: #20c997;
}
.alert-info, .alert-primary {
    background-color: rgba(13, 110, 253, 0.2);
    border-color: var(--tech-cyan);
    color: var(--tech-cyan);
}

/* 弹窗适配 */
.modal-content {
    background-color: var(--tech-bg-panel);
    border: 1px solid var(--tech-cyan);
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.3);
    color: white;
}
.modal-header { border-bottom: 1px solid rgba(0, 242, 255, 0.2); }
.modal-footer { border-top: 1px solid rgba(0, 242, 255, 0.2); }
.btn-close { filter: invert(1); }

/* 登录/前台 */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, rgba(13, 110, 253, 0.15) 0%, var(--tech-bg-dark) 70%);
}
.login-card { width: 100%; max-width: 450px; border-top: 3px solid var(--tech-cyan); }
.mobile-app-view {
    max-width: 480px; margin: 0 auto; min-height: 100vh;
    background: var(--tech-bg-dark);
    border-left: 1px solid rgba(0, 242, 255, 0.1);
    border-right: 1px solid rgba(0, 242, 255, 0.1);
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
.app-header {
    background: linear-gradient(135deg, var(--tech-blue), #0a1020);
    padding: 20px;
    border-bottom: 1px solid var(--tech-cyan);
    color: white;
}
.nav-pills .nav-link.active {
    background-color: var(--tech-blue);
    box-shadow: var(--tech-glow-active);
}
#plateInput {
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid var(--tech-cyan) !important;
    color: var(--tech-cyan) !important;
    box-shadow: var(--tech-glow-border);
    text-shadow: 0 0 5px var(--tech-cyan);
}
.key-btn {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(0, 242, 255, 0.2) !important;
    color: var(--tech-text-main) !important;
}
.key-btn:active {
    background: var(--tech-cyan) !important;
    color: #000 !important;
    box-shadow: var(--tech-glow-active) !important;
}
/* === 修复 DataTables "显示 X 项" 下拉框 === */

/* 1. 定位下拉框并应用深色科技风 */
.dataTables_wrapper .dataTables_length select {
    background-color: rgba(10, 16, 32, 0.9) !important; /* 深色背景 */
    color: var(--tech-cyan) !important;                /* 霓虹文字 */
    border: 1px solid rgba(0, 242, 255, 0.3) !important; /* 霓虹边框 */
    border-radius: 4px;
    padding: 4px 24px 4px 8px; /* 给右边留出箭头的位置 */
    margin: 0 5px;
    outline: none;
    cursor: pointer !important; /* 强制显示小手(或者箭头，看您喜好) */
    
    /* 自定义下拉箭头 (可选，为了极致美观) */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300f2ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 10px 10px;
}

/* 2. 下拉框里面的选项 (Options) */
.dataTables_wrapper .dataTables_length select option {
    background-color: var(--tech-bg-dark);
    color: white;
}

/* 3. 修复 "搜索" 框的样式 (确保和下拉框一致) */
.dataTables_wrapper .dataTables_filter input {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(0, 242, 255, 0.3) !important;
    color: white !important;
    border-radius: 20px;
    padding: 5px 15px;
    margin-left: 10px;
    outline: none;
    transition: all 0.3s;
}
.dataTables_wrapper .dataTables_filter input:focus {
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.5);
    border-color: var(--tech-cyan) !important;
}

/* 4. 修正顶部文字颜色 (显示 xx 项 / 搜索) */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: var(--tech-text-muted) !important;
    font-weight: normal;
    display: flex; /* 让文字和控件对齐 */
    align-items: center;
}