/* ===================================
   管理后台 - 通用样式增强
   =================================== */

:root {
    /* 主题色 */
    --primary-color: #1890ff;
    --primary-color-hover: #40a9ff;
    --success-color: #52c41a;
    --warning-color: #faad14;
    --danger-color: #ff4d4f;

    /* 中性色 */
    --text-primary: #333;
    --text-secondary: #8c8c8c;
    --border-color: #f0f0f0;
    --bg-hover: #e6f7ff;
    --bg-selected: #bae7ff;

    /* 阴影 */
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.16);

    /* 圆角与过渡 */
    --border-radius: 12px;
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}

/* 全局字体 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 浅色主题下 Logo 图片显示修复（覆盖主题可能设置的 filter） */
.ant-layout-sider-light img,
.ant-pro-sider-light img,
.ant-layout-sider-logo img,
.ant-pro-sider-logo img,
.ant-pro-global-header-logo img {
    opacity: 1;
    filter: none;
}

/* ===================================
   卡片样式增强
   =================================== */

.ant-card {
    border-radius: var(--border-radius) !important;
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.ant-card:hover {
    box-shadow: var(--shadow-medium);
}

.ant-card-bordered {
    border: none !important;
}

/* 卡片头部 */
.ant-card-head {
    font-weight: 600;
    color: var(--text-primary);
}

/* 页面内容区卡片 */
.ant-pro-page-container-warp .ant-page-header {
    background: transparent;
}

/* ===================================
   表格样式增强
   =================================== */

/* 表格容器 */
.ant-table-wrapper {
    border-radius: var(--border-radius);
    overflow: hidden;
    background: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* 表格头部 - 提升优先级覆盖主题默认 */
.ant-table-thead > tr > th {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%) !important;
    font-weight: 600 !important;
    font-size: 14px;
    color: var(--text-primary);
    border-bottom: 1px solid #e8e8e8 !important;
    padding: 14px 16px !important;
}

.ant-table-thead > tr > th::before {
    display: none !important;
}

/* 表格行 */
.ant-table-tbody > tr > td {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--border-color) !important;
    transition: background 0.2s ease;
}

.ant-table-tbody > tr:hover > td {
    background: var(--bg-hover) !important;
}

/* 斑马纹 */
.ant-table-tbody > tr:nth-child(even) > td {
    background: #fafafa;
}

.ant-table-tbody > tr:nth-child(even):hover > td {
    background: var(--bg-hover) !important;
}

/* 表格行悬停微位移 */
.ant-table-row {
    transition: transform 0.2s ease;
}

.ant-table-row:hover {
    transform: translateX(2px);
}

/* 固定列背景 */
.ant-table-cell-fix-right,
.ant-table-cell-fix-left {
    background: white !important;
}

/* 选中行样式 */
.ant-table-row-selected > td {
    background: var(--bg-hover) !important;
}

.ant-table-row-selected:hover > td {
    background: var(--bg-selected) !important;
}

/* 分页器样式 */
.ant-pagination {
    margin-top: 16px !important;
    padding: 0 16px;
}

.ant-pagination-total-text {
    color: var(--text-secondary);
    font-size: 13px;
}

.ant-pagination-item {
    border-radius: 6px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ant-pagination-item:hover {
    border-color: var(--primary-color) !important;
}

.ant-pagination-item-active {
    background: linear-gradient(135deg, var(--primary-color) 0%, #722ed1 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}

.ant-pagination-item-active a {
    color: white !important;
}

/* 空状态样式 */
.ant-empty-description {
    color: var(--text-secondary);
}

/* 操作链接样式 */
.ant-table-cell a,
.ant-pro-table-list-toolbar-setting-item a {
    color: var(--primary-color);
    transition: color 0.2s ease;
    font-weight: 500;
}

.ant-table-cell a:hover,
.ant-pro-table-list-toolbar-setting-item a:hover {
    color: var(--primary-color-hover);
}

/* ===================================
   头部右侧内容样式
   =================================== */

.right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.right .action {
    display: flex;
    align-items: center;
    gap: 8px;
}

.right .avatar {
    border-radius: 50%;
    border: 2px solid #e8e8e8;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.right .avatar:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}

.right .name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
}

/* 用户菜单弹出框 */
.ant-popover-inner {
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: var(--shadow-heavy);
}

/* ===================================
   登录页面样式
   =================================== */

.login-wrapper {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f64f59 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    position: relative;
    overflow: hidden;
}

.login-row {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 20px;
}

.login-card {
    width: 100%;
    max-width: 420px;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    padding: 40px;
    animation: slideUp 0.6s ease-out;
}

.login-card:hover {
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35);
}

.login-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 32px;
}

.login-avatar-wrapper {
    position: relative;
    margin-bottom: 16px;
}

.login-title {
    font-size: 26px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 8px 0;
    letter-spacing: 3px;
}

.login-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.login-btn {
    width: 100%;
    height: 48px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #722ed1 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(24, 144, 255, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    letter-spacing: 8px;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(24, 144, 255, 0.5);
    background: linear-gradient(135deg, var(--primary-color-hover) 0%, #9254de 100%);
}

/* ===================================
   统计卡片通用样式
   =================================== */

.stat-card {
    border-radius: var(--border-radius);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-heavy);
}

.stat-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    flex-shrink: 0;
}

.stat-icon-wrapper.bg-blue { background: linear-gradient(135deg, #e6f4ff 0%, #bae0ff 100%); }
.stat-icon-wrapper.bg-green { background: linear-gradient(135deg, #f6ffed 0%, #b7eb8f 100%); }
.stat-icon-wrapper.bg-purple { background: linear-gradient(135deg, #f9f0ff 0%, #d3adf7 100%); }
.stat-icon-wrapper.bg-orange { background: linear-gradient(135deg, #fff7e6 0%, #ffd591 100%); }
.stat-icon-wrapper.bg-yellow { background: linear-gradient(135deg, #fffbe6 0%, #ffe58f 100%); }
.stat-icon-wrapper.bg-red { background: linear-gradient(135deg, #fff1f0 0%, #ffccc7 100%); }
.stat-icon-wrapper.bg-cyan { background: linear-gradient(135deg, #e6fffb 0%, #87e8de 100%); }

.stat-icon {
    font-size: 26px;
    color: #1890ff;
}

.bg-green .stat-icon { color: #52c41a; }
.bg-purple .stat-icon { color: #722ed1; }
.bg-orange .stat-icon { color: #faad14; }
.bg-yellow .stat-icon { color: #faad14; }
.bg-red .stat-icon { color: #ff4d4f; }

.stat-info {
    flex: 1;
}

.stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-desc {
    font-size: 12px;
    color: var(--text-secondary);
}

/* ===================================
   弹窗和抽屉样式
   =================================== */

.ant-modal {
    width: auto !important;
    max-width: 65vw;
    top: 7vh;
}

.ant-modal-content {
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: var(--shadow-heavy);
}

.ant-modal-header {
    border-radius: 12px 12px 0 0 !important;
    padding: 16px 24px !important;
}

.ant-modal-title {
    font-weight: 600 !important;
    font-size: 16px !important;
}

.ant-modal-footer {
    padding: 12px 24px !important;
}

/* 兼容手机模式 */
@media (max-width: 768px) {
    .ant-modal {
        max-width: 90vw;
    }
}

.ant-drawer-header {
    border-radius: 12px 12px 0 0 !important;
    padding: 16px 24px !important;
}

.ant-drawer-body {
    padding: 24px;
}

/* ===================================
   按钮样式
   =================================== */

.ant-btn {
    border-radius: 6px;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    font-weight: 500;
}

.ant-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

.ant-btn-dangerous:hover {
    transform: translateY(-1px);
}

/* ===================================
   标签和徽章样式
   =================================== */

.ant-tag {
    border-radius: 4px;
    font-weight: 500;
}

.ant-badge-count {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ===================================
   Switch 开关样式
   =================================== */

.ant-switch {
    border-radius: 12px;
}

.ant-switch-checked {
    background: linear-gradient(135deg, var(--primary-color) 0%, #722ed1 100%) !important;
}

/* ===================================
   动画关键帧
   =================================== */

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* 动画类 */
.fade-in {
    animation: fadeIn 0.5s ease-out;
}

.slide-in {
    animation: slideIn 0.5s ease-out;
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* ===================================
   商品轮播图样式
   =================================== */

.carousel-upload-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.carousel-preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
}

.carousel-preview-item {
    position: relative;
    width: 104px;
    height: 104px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
}

.carousel-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.carousel-preview-item:hover .carousel-preview-remove {
    opacity: 1;
}

.carousel-preview-remove:hover {
    background: rgba(255, 77, 79, 0.8);
}

.carousel-tips {
    color: #999;
    font-size: 12px;
    margin-top: 4px;
}

/* 轮播图上传按钮样式 */
.carousel-upload-container .ant-upload {
    width: 104px !important;
    height: 104px !important;
}

.carousel-upload-container .ant-upload-select-picture-card {
    border: 1px dashed #d9d9d9 !important;
    background: transparent !important;
    border-radius: 8px !important;
}

/* 上传组件占位符 */
.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 104px;
    height: 104px;
    border: 1px dashed #d9d9d9;
    border-radius: 8px;
    transition: border-color 0.3s;
}

.upload-placeholder .anticon {
    font-size: 28px;
    color: #999;
}

.upload-placeholder .ant-upload-text {
    font-size: 14px;
    color: #666;
}

.upload-placeholder.clickable {
    cursor: pointer;
}

.upload-placeholder:hover {
    border-color: #40a9ff;
}

/* ===================================
   滚动条美化
   =================================== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* ===================================
   表单样式增强
   =================================== */

.ant-input:focus,
.ant-input-affix-wrapper:focus,
.ant-input-affix-wrapper-focused,
.ant-select-focused .ant-select-selector,
.ant-picker-focused {
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.15);
}

.ant-form-item-label > label {
    font-weight: 500;
    color: var(--text-primary);
}

/* ===================================
   面包屑导航
   =================================== */

.ant-breadcrumb {
    font-size: 13px;
}

.ant-breadcrumb a:hover {
    color: var(--primary-color-hover);
}

/* ===================================
   菜单样式微调
   =================================== */

.ant-menu-item-selected {
    font-weight: 600;
}

.ant-menu-submenu-title:hover {
    color: var(--primary-color);
}

/* ===================================
   工具栏与搜索区域
   =================================== */

.ant-pro-table-list-toolbar-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
}

/* 搜索展开收起 */
.ant-pro-form-query-filter {
    padding: 20px 24px;
    background: white;
    border-radius: var(--border-radius);
    margin-bottom: 16px;
}

/* ===================================
   全局响应式工具
   =================================== */

@media (max-width: 768px) {
    .ant-layout-content {
        padding: 12px !important;
    }

    .ant-card-body {
        padding: 16px;
    }
}

/* ===================================
   实用工具类
   =================================== */

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-success { color: var(--success-color); }
.text-warning { color: var(--warning-color); }
.text-danger { color: var(--danger-color); }

.bg-hover { background-color: var(--bg-hover); }

.cursor-pointer { cursor: pointer; }
.no-wrap { white-space: nowrap; }