/* 全局 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body, #app { height: 100%; }
body { font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif; }

/* 侧边栏 */
.admin-sidebar {
    background-color: #1d1e1f;
    overflow-y: auto;
}
.sidebar-logo {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #333;
}
.sidebar-logo h2 { color: #409eff; font-size: 24px; margin-bottom: 4px; }
.sidebar-logo span { color: #999; font-size: 12px; }
.el-menu { border-right: none !important; }

/* 顶部栏 */
.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e4e7ed;
    background: #fff;
    padding: 0 20px;
}
.admin-user { cursor: pointer; display: flex; align-items: center; gap: 6px; color: #606266; }

/* 内容区 */
.admin-main { background: #f5f7fa; padding: 20px; }

/* 登录页 */
.auth-body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; }
.auth-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.auth-card {
    background: #fff;
    border-radius: 12px;
    padding: 40px;
    width: 420px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.auth-logo { text-align: center; margin-bottom: 30px; }
.auth-logo h1 { font-size: 32px; color: #409eff; }
.auth-logo p { color: #909399; margin-top: 8px; }

/* 统计卡片 */
.stat-card { text-align: center; padding: 20px; }
.stat-card .stat-value { font-size: 28px; font-weight: bold; color: #303133; }
.stat-card .stat-label { font-size: 14px; color: #909399; margin-top: 8px; }

/* 登录表单 */
.login-form .form-group {
    margin-bottom: 20px;
}
.login-form .form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #606266;
    font-weight: 500;
}
.login-form .form-input {
    width: 100%;
    height: 40px;
    padding: 0 15px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    font-size: 14px;
    color: #303133;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.login-form .form-input:focus {
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}
.login-form .form-input::placeholder {
    color: #c0c4cc;
}
.login-btn {
    width: 100%;
    height: 42px;
    background: #409eff;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
    letter-spacing: 4px;
}
.login-btn:hover {
    background: #66b1ff;
}
.login-btn:active {
    background: #3a8ee6;
}

/* 内容卡片 */
.content-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
    margin-bottom: 20px;
}
.content-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #ebeef5;
    font-weight: 500;
    font-size: 16px;
}
.content-card-body {
    padding: 20px;
}

/* 数据表格 */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.data-table th,
.data-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #ebeef5;
}
.data-table th {
    color: #909399;
    font-weight: 500;
    background: #f5f7fa;
}
.data-table tbody tr:hover {
    background: #f5f7fa;
}

/* 详情信息 */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.detail-item {
    display: flex;
    padding: 8px 0;
}
.detail-item-full {
    grid-column: 1 / -1;
}
.detail-label {
    color: #909399;
    min-width: 100px;
    margin-right: 12px;
}
.detail-value {
    color: #303133;
    word-break: break-all;
}

/* 状态标签 */
.status-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 20px;
}
.status-success { background: #f0f9eb; color: #67c23a; border: 1px solid #e1f3d8; }
.status-warning { background: #fdf6ec; color: #e6a23c; border: 1px solid #faecd8; }
.status-danger { background: #fef0f0; color: #f56c6c; border: 1px solid #fde2e2; }
.status-info { background: #f4f4f5; color: #909399; border: 1px solid #e9e9eb; }

/* 筛选栏 */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.filter-bar select,
.filter-bar input[type="text"],
.filter-bar input[type="search"] {
    height: 36px;
    padding: 0 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
}
.filter-bar select:focus,
.filter-bar input:focus {
    border-color: #409eff;
}

/* 分页 */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 0;
    font-size: 14px;
    color: #606266;
}
.pagination a {
    color: #409eff;
    text-decoration: none;
    padding: 6px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
}
.pagination a:hover {
    background: #ecf5ff;
}

/* 按钮样式 */
.btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
    line-height: 1.5;
}
.btn-primary { background: #409eff; color: #fff; border-color: #409eff; }
.btn-primary:hover { background: #66b1ff; border-color: #66b1ff; }
.btn-success { background: #67c23a; color: #fff; border-color: #67c23a; }
.btn-success:hover { background: #85ce61; border-color: #85ce61; }
.btn-warning { background: #e6a23c; color: #fff; border-color: #e6a23c; }
.btn-danger { background: #f56c6c; color: #fff; border-color: #f56c6c; }
.btn-danger:hover { background: #f78989; border-color: #f78989; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-default { background: #fff; color: #606266; border-color: #dcdfe6; }
.btn-default:hover { color: #409eff; border-color: #c6e2ff; background: #ecf5ff; }

/* 空数据提示 */
.empty-cell {
    text-align: center;
    color: #909399;
    padding: 40px 16px !important;
}
.empty-text {
    text-align: center;
    color: #909399;
    padding: 40px 16px;
    font-size: 14px;
}

/* 操作区 */
.action-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    margin-bottom: 20px;
}

/* 页面操作 */
.page-actions {
    margin-bottom: 16px;
}
.back-link {
    color: #409eff;
    text-decoration: none;
    font-size: 14px;
}
.back-link:hover {
    text-decoration: underline;
}

/* 行布局（替代 el-row） */
.row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.row > .col {
    flex: 1;
    min-width: 300px;
}

/* 操作列表 */
.action-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.action-form {
    margin: 0;
}
.btn-block {
    width: 100%;
}

/* 链接 */
.action-link {
    color: #409eff;
    text-decoration: none;
    font-size: 13px;
}
.action-link:hover {
    text-decoration: underline;
}

/* 分页链接（codes页面使用的page-link） */
.page-link {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    text-decoration: none;
    color: #606266;
    border: 1px solid #dcdfe6;
    background: #fff;
}
.page-link:hover {
    color: #409eff;
    border-color: #409eff;
}
.page-link.current {
    background: #409eff;
    color: #fff;
    border-color: #409eff;
}
.page-link.disabled {
    color: #c0c4cc;
    border-color: #e4e7ed;
    cursor: not-allowed;
}

/* 弹窗 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
.modal-box {
    background: #fff;
    border-radius: 8px;
    width: 480px;
    max-width: 90vw;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #ebeef5;
}
.modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #303133;
}
.modal-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #909399;
    cursor: pointer;
}
.modal-close:hover {
    color: #606266;
}
.modal-form {
    padding: 20px;
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: #606266;
}
.form-group .required {
    color: #f56c6c;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #409eff;
}
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* data-table 中的 code 标签 */
.data-table code {
    background: #f4f4f5;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    color: #409eff;
}