/**
 * 后台管理系统样式 
 */

/* 管理后台样式 - 水果商城 */
:root {
    --primary: #2ecc71;
    --secondary: #27ae60;
    --danger: #e74c3c;
    --warning: #f39c12;
    --info: #3498db;
    --success: #2ecc71;
    --dark: #2c3e50;
    --light: #ecf0f1;
    --text: #333;
    --text-light: #7f8c8d;
    --border: #ddd;
    --bg-light: #f9f9f9;
    --sidebar-w: 250px;
    --sidebar-mini: 70px;
    --trans: 0.3s;
    --shadow: 0 2px 10px rgba(0,0,0,0.1);
    --table-hover: #f1f8f1;
}

* {margin:0;padding:0;box-sizing:border-box;font-family:'Microsoft YaHei','微软雅黑',Arial,sans-serif}
body {background:#f0f3f6;color:var(--text)}
a {text-decoration:none;color:inherit}
ul {list-style:none}

/* 布局 */
.admin-container {display:flex;height:100vh;overflow:hidden}

/* 侧边栏 */
.sidebar {
    width: var(--sidebar-w);
    background: var(--dark);
    color: white;
    height: 100%;
    transition: width var(--trans);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}
.sidebar.collapsed {width:var(--sidebar-mini)}

.brand {display:flex;align-items:center;padding:20px;background:rgba(0,0,0,0.1)}
.brand img {width:32px;height:32px;margin-right:10px}

.sidebar.collapsed .brand h2,
.sidebar.collapsed .admin-details,
.sidebar.collapsed .menu li span,
.sidebar.collapsed .logout-btn span {display:none}

.admin-info {
    display: flex;
    align-items: center;
    padding: 15px;
    background: rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.admin-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
    background: var(--light);
}
.admin-avatar img {width:100%;height:100%;object-fit:cover}
.admin-details {flex:1}
.admin-details h3 {font-size:14px;margin:0}
.admin-details p {font-size:12px;color:rgba(255,255,255,0.7);margin:0}

.toggle-sidebar {
    position: absolute;
    top: 50%;
    right: -12px;
    width: 24px;
    height: 24px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 10;
    transition: transform var(--trans);
}
.sidebar.collapsed .toggle-sidebar {transform:rotate(180deg)}

.menu {list-style:none;padding:0;flex:1;overflow-y:auto}
.menu-item {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
}
.menu-item i {font-size:16px;width:24px;margin-right:10px;text-align:center}
.sidebar.collapsed .menu-item {padding:12px 0;justify-content:center}
.sidebar.collapsed .menu-item i {margin-right:0;font-size:18px}
.menu-item:hover {background-color:rgba(255,255,255,0.1)}
.menu-item.active {background-color:var(--primary)}

.sidebar-footer {padding:15px;border-top:1px solid rgba(255,255,255,0.1)}
.logout-btn {
    display: flex;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    color: white;
    padding: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
    border-radius: 4px;
}
.logout-btn i {margin-right:10px}
.sidebar.collapsed .logout-btn {justify-content:center}
.sidebar.collapsed .logout-btn i {margin-right:0}
.logout-btn:hover {background-color:rgba(255,255,255,0.1)}

/* 主内容区 */
.main-content {
    flex: 1;
    overflow-y: auto;
    background: #f0f3f6;
    display: flex;
    flex-direction: column;
}

/* 顶部栏 */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid var(--border);
    background: white;
    box-shadow: var(--shadow);
}
.search-box {position:relative;display:flex;align-items:center}
.search-box i {position:absolute;left:10px;color:var(--text-light)}
.search-box input {
    padding: 8px 10px 8px 35px;
    border: 1px solid var(--border);
    border-radius: 20px;
    outline: none;
    width: 250px;
    transition: all 0.2s;
}
.search-box input:focus {border-color:var(--primary);width:300px}

.top-bar-actions {display:flex;align-items:center}
.notification-icon, .messages-icon {
    position: relative;
    margin-left: 15px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s;
}
.notification-icon:hover, .messages-icon:hover {background-color:var(--bg-light)}
.badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: var(--danger);
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

/* 面板 */
.panel {display:none;padding:20px;flex:1}
.panel.active {display:block}
.panel-title {margin-bottom:20px;font-weight:600;color:var(--dark)}
.panel-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.panel-actions {display:flex;align-items:center}
.product-summary {margin-right:15px;color:var(--text-light)}
.product-count {font-weight:bold;color:var(--primary)}

.action-btn {
    background: none;
    border: 1px solid var(--border);
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-left: 10px;
    color: var(--text);
    transition: all 0.2s;
}
.action-btn i {margin-right:5px}
.action-btn.primary {background:var(--primary);color:white;border-color:var(--primary)}
.action-btn:hover {background-color:var(--bg-light)}
.action-btn.primary:hover {background-color:var(--secondary)}

/* 数据表格 */
.panel-body {background:white;border-radius:8px;box-shadow:var(--shadow);overflow:hidden}
.data-table {width:100%;border-collapse:collapse}
.data-table th, .data-table td {padding:15px;text-align:left;border-bottom:1px solid var(--border)}
.data-table th {background-color:var(--bg-light);font-weight:600}
.data-table tr:hover {background-color:var(--table-hover)}
.data-table input[type="checkbox"] {cursor:pointer}
.product-img-small {width:40px;height:40px;background-color:var(--bg-light);border-radius:4px;overflow:hidden}
.product-img-small img {width:100%;height:100%;object-fit:cover}

.status-badge {display:inline-block;padding:4px 10px;border-radius:15px;font-size:12px}
.status-badge.available {background-color:rgba(46,204,113,0.2);color:var(--success)}
.status-badge.sold-out {background-color:rgba(231,76,60,0.2);color:var(--danger)}
.status-badge.unavailable {background-color:rgba(127,140,141,0.2);color:var(--text-light)}

.action-buttons {display:flex}
.action-buttons button {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-right: 5px;
}
.action-buttons .edit:hover {background-color:rgba(52,152,219,0.2);color:var(--info)}
.action-buttons .delete:hover {background-color:rgba(231,76,60,0.2);color:var(--danger)}

/* 分页 */
.pagination {display:flex;justify-content:center;align-items:center;padding:15px;border-top:1px solid var(--border)}
.page-numbers {display:flex;align-items:center}
.pagination button {
    width: 35px;
    height: 35px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: white;
    margin: 0 5px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pagination button.active {background-color:var(--primary);color:white;border-color:var(--primary)}
.pagination button:hover:not(.active) {background-color:var(--bg-light)}

/* 统计卡片 */
.dashboard-stats {display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin-bottom:20px}
.stat-card {background:white;border-radius:8px;padding:20px;display:flex;align-items:center;box-shadow:var(--shadow)}
.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 20px;
    color: white;
}
.bg-primary {background-color:var(--primary)}
.bg-success {background-color:var(--success)}
.bg-warning {background-color:var(--warning)}
.bg-danger {background-color:var(--danger)}

.stat-details h3 {font-size:14px;color:var(--text-light);margin-bottom:5px}
.stat-value {font-size:20px;font-weight:600;margin-bottom:5px}
.stat-change {font-size:12px;display:flex;align-items:center}
.stat-change.positive {color:var(--success)}
.stat-change.negative {color:var(--danger)}

/* 图表 */
.dashboard-charts {display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:20px;margin-bottom:20px}
.chart-container {background:white;border-radius:8px;padding:20px;box-shadow:var(--shadow)}
.chart-container h3 {margin-bottom:15px;font-size:16px;color:var(--dark)}
.bar-chart {height:200px;display:flex;flex-direction:column}
.chart-bars {display:flex;justify-content:space-between;align-items:flex-end;height:150px;margin-top:10px}
.chart-bar {width:12%;background-color:var(--primary);border-radius:4px 4px 0 0;transition:height 1s}
.chart-label {display:flex;justify-content:space-between;margin-top:10px}
.chart-label span {font-size:12px;color:var(--text-light);width:12%;text-align:center}

/* 热销商品 */
.hot-products {margin-top:15px}
.product-row {display:flex;padding:10px 0;border-bottom:1px solid var(--border)}
.product-row:last-child {border-bottom:none}
.product-detail {flex:1;margin-left:10px}
.product-detail h4 {font-size:14px;margin-bottom:5px}
.product-detail p {font-size:12px;color:var(--text-light)}

/* 空白占位 */
.placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    background: white;
    border-radius: 8px;
    box-shadow: var(--shadow);
}
.placeholder-content i {font-size:48px;color:var(--primary);margin-bottom:20px;opacity:0.5}
.placeholder-content p {color:var(--text-light)}

/* 通知 */
.notification-container {position:fixed;top:20px;right:20px;z-index:30000;max-width:350px}
.notification {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    transform: translateX(120%);
    transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
    overflow: hidden;
    position: relative;
}
.notification.show {transform:translateX(0)}
.notification::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: var(--primary);
}
.notification.success::before {background:var(--success)}
.notification.error::before {background:var(--danger)}
.notification.warning::before {background:var(--warning)}

.notification-icon {margin-right:15px;font-size:20px}
.notification.success .notification-icon {color:var(--success)}
.notification.error .notification-icon {color:var(--danger)}
.notification.warning .notification-icon {color:var(--warning)}
.notification-content {flex:1}
.notification-title {font-weight:600;margin-bottom:5px}
.notification-message {font-size:14px;color:var(--text-light)}
.notification-close {margin-left:10px;color:var(--text-light);cursor:pointer;transition:color 0.2s}
.notification-close:hover {color:var(--text)}

/* 通知动画增强 */
@keyframes notification-pulse {
    0% {box-shadow:0 3px 10px rgba(0,0,0,0.1)}
    50% {box-shadow:0 5px 15px rgba(0,0,0,0.2)}
    100% {box-shadow:0 3px 10px rgba(0,0,0,0.1)}
}
.notification.show {animation:notification-pulse 2s infinite}

/* 弹出表单 */
.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: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}
.modal-overlay.active {opacity:1;visibility:visible}
.modal {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    transform: translateY(-20px);
    transition: transform 0.3s;
}
.modal-overlay.active .modal {transform:translateY(0)}
.modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-title {font-size:18px;font-weight:600}
.modal-close {background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-light);transition:color 0.2s}
.modal-close:hover {color:var(--danger)}
.modal-body {padding:20px}
.form-group {margin-bottom:15px}
.form-group label {display:block;margin-bottom:5px;font-weight:500}
.form-control {width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:4px;transition:border-color 0.2s}
.form-control:focus {outline:none;border-color:var(--primary)}
.form-row {display:flex;gap:15px}
.form-row .form-group {flex:1}
.modal-footer {padding:15px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end}

.btn {padding:8px 15px;border-radius:4px;border:1px solid var(--border);cursor:pointer;transition:all 0.2s;background:white}
.btn-primary {background-color:var(--primary);color:white;border-color:var(--primary)}
.btn-primary:hover {background-color:var(--secondary)}
.btn-secondary {background-color:var(--light)}
.btn-secondary:hover {background-color:#dce2e3}
.btn-danger {background-color:var(--danger);color:white;border-color:var(--danger)}
.btn-danger:hover {background-color:#c0392b}

/* 动画 */
@keyframes fadeIn {from{opacity:0}to{opacity:1}}
@keyframes slideIn {from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}
.fadeIn {animation:fadeIn 0.3s forwards}
.slideIn {animation:slideIn 0.3s forwards}

/* 响应式 */
@media (max-width:768px) {
    .dashboard-stats, .dashboard-charts {grid-template-columns:1fr}
    .search-box input {width:150px}
    .search-box input:focus {width:200px}
    .sidebar {width:var(--sidebar-mini)}
    .sidebar .brand h2,
    .sidebar .admin-details,
    .sidebar .menu li span,
    .sidebar .logout-btn span {display:none}
    .sidebar .menu-item {padding:12px 0;justify-content:center}
    .sidebar .menu-item i {margin-right:0}
    .sidebar .logout-btn {justify-content:center}
    .sidebar .logout-btn i {margin-right:0}
}

@media (max-width:480px) {
    .top-bar{p:0 10px} /* 顶栏 */
    .admin-name{d:none} /* 隐藏名称 */
    .search-bar{max-w:150px;m:0 10px} /* 搜索栏 */
    .panel{p:15px 10px} /* 面板 */
    .action-btn{p:6px 10px;fs:12px} /* 按钮 */
    .action-btn span{d:none} /* 隐藏图标 */
    .dashboard-charts{overflow-x:auto} /* 图表滚动 */
}

/* 简写别名 - 用于极简代码 */
[style*="d:flex"]{display:flex}[style*="d:none"]{display:none}[style*="d:block"]{display:block}
[style*="bg:"],[style*="bg#"]{background-color:attr(style)}[style*="bg:0"]{background:none}
[style*="p:"]{padding:attr(style)}[style*="m:"]{margin:attr(style)}
[style*="mb:"]{margin-bottom:attr(style)}[style*="mr:"]{margin-right:attr(style)}[style*="mt:"]{margin-top:attr(style)}
[style*="w:"]{width:attr(style)}[style*="h:"]{height:attr(style)}[style*="fs:"]{font-size:attr(style)}[style*="fw:"]{font-weight:attr(style)}
[style*="z:"]{z-index:attr(style)}[style*="max-w:"]{max-width:attr(style)}[style*="min-w:"]{min-width:attr(style)}