/* ============================================
   ShortURL Pro - 后台管理样式
   版本: v1.0
   ============================================ */

/* ---- 全局重置 ---- */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background:#f0f2f5; color:#333; font-size:14px; }
a { color:#4a90d9; text-decoration:none; }
a:hover { color:#357abd; }

/* ---- 顶部导航 ---- */
.top-navbar { display:flex; align-items:center; justify-content:space-between; height:56px; background:#fff; padding:0 24px; box-shadow:0 1px 4px rgba(0,0,0,0.06); position:fixed; top:0; left:0; right:0; z-index:100; }
.navbar-brand { display:flex; align-items:center; gap:8px; font-size:18px; font-weight:600; color:#333; }
.brand-icon { font-size:22px; }
.navbar-right { display:flex; align-items:center; gap:16px; }
.admin-name { color:#666; font-size:14px; }
.btn-logout { padding:6px 16px; border:1px solid #ddd; border-radius:6px; color:#666; font-size:13px; transition:all 0.2s; }
.btn-logout:hover { border-color:#d33; color:#d33; }

/* ---- 布局容器 ---- */
.app-container { display:flex; margin-top:56px; min-height:calc(100vh - 56px); }

/* ---- 侧边栏 ---- */
.sidebar { width:220px; background:#fff; border-right:1px solid #e8e8e8; padding:16px 0; flex-shrink:0; position:fixed; top:56px; bottom:0; overflow-y:auto; }
.sidebar-menu { list-style:none; }
.sidebar-menu li a { display:flex; align-items:center; gap:10px; padding:12px 24px; color:#555; font-size:14px; transition:all 0.15s; }
.sidebar-menu li a:hover { background:#f5f7fa; color:#4a90d9; }
.sidebar-menu li.active a { background:#e8f0fe; color:#4a90d9; font-weight:500; border-right:3px solid #4a90d9; }
.menu-icon { font-size:16px; width:20px; text-align:center; }
.menu-divider { height:1px; background:#e8e8e8; margin:8px 16px; }

/* ---- 主内容区 ---- */
.main-content { flex:1; margin-left:220px; padding:24px; }
.page-header { margin-bottom:24px; }
.page-header h2 { font-size:22px; color:#333; font-weight:600; }

/* ---- 统计卡片 ---- */
.stat-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:16px; margin-bottom:24px; }
.stat-card { background:#fff; border-radius:10px; padding:24px; text-align:center; box-shadow:0 1px 6px rgba(0,0,0,0.04); transition:box-shadow 0.2s; }
.stat-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.08); }
.stat-number { font-size:32px; font-weight:700; color:#4a90d9; margin-bottom:4px; }
.stat-label { font-size:13px; color:#999; }

/* ---- 面板 ---- */
.panel { background:#fff; border-radius:10px; box-shadow:0 1px 6px rgba(0,0,0,0.04); margin-bottom:20px; overflow:hidden; }
.panel-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #f0f0f0; }
.panel-header h3 { font-size:16px; font-weight:600; color:#333; }
.panel-body { padding:20px; }

/* ---- 表格 ---- */
.table { width:100%; border-collapse:collapse; }
.table th { background:#fafafa; padding:10px 12px; text-align:left; font-size:13px; color:#888; font-weight:500; border-bottom:1px solid #f0f0f0; }
.table td { padding:10px 12px; border-bottom:1px solid #f5f5f5; font-size:14px; }
.table tr:hover { background:#fafbfc; }
.table code { background:#f5f5f5; padding:2px 8px; border-radius:4px; font-size:13px; color:#e74c3c; }

/* ---- 按钮 ---- */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 20px; border-radius:6px; font-size:14px; cursor:pointer; border:none; transition:all 0.15s; }
.btn-primary { background:#4a90d9; color:#fff; }
.btn-primary:hover { background:#357abd; }
.btn-success { background:#27ae60; color:#fff; }
.btn-success:hover { background:#219a52; }
.btn-danger { background:#e74c3c; color:#fff; }
.btn-danger:hover { background:#c0392b; }
.btn-sm { padding:4px 12px; font-size:12px; border-radius:4px; background:#f0f0f0; color:#666; }
.btn-sm:hover { background:#e0e0e0; }

/* ---- 表单 ---- */
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:14px; color:#555; margin-bottom:6px; font-weight:500; }
.form-group input, .form-group select, .form-group textarea { 
    width:100%; padding:10px 14px; border:1px solid #ddd; border-radius:6px; font-size:14px; outline:none; transition:border-color 0.2s; 
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:#4a90d9; }
.form-hint { font-size:12px; color:#999; margin-top:4px; }

/* ---- 工具栏 ---- */
.toolbar { display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.toolbar .search-input { padding:8px 14px; border:1px solid #ddd; border-radius:6px; font-size:14px; width:250px; outline:none; }
.toolbar .search-input:focus { border-color:#4a90d9; }

/* ---- 分页 ---- */
.pagination { display:flex; align-items:center; gap:8px; margin-top:20px; justify-content:center; }
.pagination a, .pagination span { padding:6px 12px; border-radius:4px; font-size:13px; }
.pagination a { background:#f0f0f0; color:#555; }
.pagination a:hover { background:#4a90d9; color:#fff; }
.pagination .current { background:#4a90d9; color:#fff; }

/* ---- 两栏布局 ---- */
.row-2col { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* ---- 提示消息 ---- */
.alert { padding:12px 20px; border-radius:8px; margin-bottom:16px; font-size:14px; }
.alert-success { background:#d4edda; color:#155724; }
.alert-danger { background:#f8d7da; color:#721c24; }
.alert-warning { background:#fff3cd; color:#856404; }

/* ---- 状态标签 ---- */
.status-tag { display:inline-block; padding:2px 10px; border-radius:10px; font-size:12px; }
.status-active { background:#d4edda; color:#27ae60; }
.status-disabled { background:#f8d7da; color:#e74c3c; }

/* ---- 响应式 ---- */
@media (max-width: 768px) {
    .sidebar { display:none; }
    .main-content { margin-left:0; }
    .row-2col { grid-template-columns:1fr; }
    .stat-cards { grid-template-columns:repeat(2, 1fr); }
}