/* ============================================================
   admin.css — 后台管理公共样式（侧栏+顶栏布局）
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Microsoft YaHei', sans-serif; background:#f0f2f5; color:#333; display:flex; min-height:100vh; }

/* ---- 侧栏 ---- */
.sidebar { width:210px; background:#1a1a2e; color:#c0c4cc; display:flex; flex-direction:column; flex-shrink:0; }
.sidebar .logo { padding:18px 20px; font-size:16px; font-weight:700; color:#fff; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar .logo span { font-size:11px; font-weight:400; color:#666; }
.sidebar .logo .logo-ver { font-size:11px; color:#888; margin-left:6px; }
.sidebar nav { flex:1; padding:8px 0; }
.sidebar nav a { display:flex; align-items:center; gap:10px; padding:10px 20px; color:#c0c4cc; text-decoration:none; font-size:13px; transition:.15s; }
.sidebar nav a:hover, .sidebar nav a.active { background:rgba(255,255,255,.06); color:#fff; }
.sidebar nav a .icon { width:18px; text-align:center; font-size:15px; }
.sidebar .divider { border-top:1px solid rgba(255,255,255,.06); margin:4px 16px; }
.sidebar .logout { padding:12px 20px; border-top:1px solid rgba(255,255,255,.08); }
.sidebar .logout a { color:#999; text-decoration:none; font-size:12px; }

/* ---- 主区域 ---- */
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { background:#fff; border-bottom:1px solid #e8e8e8; padding:0 24px; height:50px; display:flex; align-items:center; justify-content:space-between; }
.topbar .page-title { font-size:16px; font-weight:600; }
.topbar .user-menu { display:flex; align-items:center; gap:12px; font-size:13px; color:#666; }
.topbar .user-menu a { color:#1890ff; text-decoration:none; }
.content { flex:1; padding:20px 24px; overflow-y:auto; }

/* ---- 统计卡片 ---- */
.stat-cards { display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-bottom:20px; }
.stat-card { background:#fff; border-radius:8px; padding:18px 20px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.stat-card .stat-num { font-size:28px; font-weight:700; }
.stat-card .stat-label { font-size:13px; color:#999; margin-top:4px; }
.stat-card.total .stat-num { color:#1890ff; }
.stat-card.active .stat-num { color:#52c41a; }
.stat-card.expiring .stat-num { color:#fa8c16; }
.stat-card.revoked .stat-num { color:#f5222d; }

/* ---- 通用卡片 ---- */
.card { background:#fff; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.06); margin-bottom:16px; }
.card-header { padding:14px 20px; border-bottom:1px solid #f0f0f0; font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; }
.card-body { padding:16px 20px; }

/* ---- 表格 ---- */
table { width:100%; border-collapse:collapse; }
th, td { padding:8px 12px; text-align:left; border-bottom:1px solid #f0f0f0; font-size:13px; }
th { background:#fafafa; font-weight:600; color:#666; }
tr:hover td { background:#fafafa; }
tr.clickable { cursor:pointer; }
tr.selected td { background:#e6f7ff !important; }

/* ---- 标签 ---- */
.tag { display:inline-block; padding:2px 8px; border-radius:4px; font-size:12px; }
.tag-active { background:#f6ffed; color:#52c41a; }
.tag-expiring { background:#fff7e6; color:#fa8c16; }
.tag-revoked { background:#fff1f0; color:#f5222d; }
.tag-pending { background:#e6f7ff; color:#1890ff; }
.tag-expired { background:#fff1f0; color:#f5222d; }

/* 到期时间着色 */
.expiry-safe { color: #52c41a; font-weight: 500; }
.expiry-warning { color: #fa8c16; font-weight: 500; }
.expiry-danger { color: #f5222d; font-weight: 500; }
.tag-admin { background:#e6f7ff; color:#1890ff; }
.tag-manager { background:#f9f0ff; color:#722ed1; }
.tag-operator { background:#f0f0f0; color:#666; }
.tag-viewer { background:#fafafa; color:#999; }

/* ---- 按钮 ---- */
.btn { padding:6px 16px; border:none; border-radius:4px; cursor:pointer; font-size:13px; transition:.2s; }
.btn-primary { background:#1890ff; color:#fff; }
.btn-primary:hover { background:#40a9ff; }
.btn-danger { background:#ff4d4f; color:#fff; }
.btn-danger:hover { background:#ff7875; }
.btn-default { background:#fff; color:#333; border:1px solid #d9d9d9; }
.btn-default:hover { border-color:#1890ff; color:#1890ff; }
.btn-sm { padding:4px 10px; font-size:12px; }

/* ---- 表单 ---- */
.form-group { margin-bottom:14px; }
.form-group label { display:block; margin-bottom:4px; font-weight:600; font-size:12px; color:#666; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:7px 10px; border:1px solid #d9d9d9; border-radius:4px; font-size:13px; }
.form-group input:focus, .form-group select:focus { border-color:#1890ff; outline:none; box-shadow:0 0 0 2px rgba(24,144,255,.2); }
.form-inline { display:flex; gap:10px; align-items:flex-end; }
.form-inline .form-group { margin-bottom:0; flex:1; }

/* ---- 搜索栏 ---- */
.search-bar { display:flex; gap:10px; margin-bottom:16px; }
.search-bar input { flex:1; padding:7px 12px; border:1px solid #d9d9d9; border-radius:4px; font-size:13px; }
.search-bar select { padding:7px 12px; border:1px solid #d9d9d9; border-radius:4px; font-size:13px; background:#fff; }

/* ---- 分页 ---- */
.pagination { display:flex; justify-content:center; gap:6px; margin-top:16px; }
.pagination button { padding:6px 12px; border:1px solid #d9d9d9; border-radius:4px; background:#fff; cursor:pointer; font-size:12px; }
.pagination button.active { background:#1890ff; color:#fff; border-color:#1890ff; }
.pagination button:disabled { color:#ccc; cursor:default; }

/* ---- Toast ---- */
.toast { position:fixed; top:20px; left:50%; transform:translateX(-50%); padding:10px 24px; border-radius:6px; font-size:14px; font-weight:500; z-index:2000; opacity:0; transition:opacity .3s; pointer-events:none; box-shadow:0 4px 12px rgba(0,0,0,.15); }
.toast.show { opacity:1; }
.toast.success { background:#52c41a; color:#fff; }
.toast.error { background:#f5222d; color:#fff; }

/* ---- 弹窗 ---- */
.modal-overlay { display:none; position:fixed; top:0;left:0;right:0;bottom:0; background:rgba(0,0,0,.45); z-index:1000; justify-content:center; align-items:flex-start; padding-top:60px; }
.modal-overlay.show { display:flex; }
.modal { background:#fff; border-radius:8px; width:520px; max-height:85vh; overflow-y:auto; box-shadow:0 4px 24px rgba(0,0,0,.15); }
.modal-header { padding:14px 20px; border-bottom:1px solid #f0f0f0; font-size:15px; font-weight:600; display:flex; justify-content:space-between; align-items:center; }
.modal-close { cursor:pointer; font-size:18px; color:#999; }
.modal-body { padding:20px; }
.modal-footer { padding:12px 20px; border-top:1px solid #f0f0f0; display:flex; justify-content:flex-end; gap:10px; }

/* ---- 空状态 ---- */
.empty { text-align:center; color:#999; padding:40px; }

/* ---- 详情面板 ---- */
.detail-panel { background:#fafafa; border:1px solid #f0f0f0; border-radius:6px; padding:16px; margin:12px 0; }
.detail-panel .detail-row { display:flex; padding:4px 0; font-size:13px; }
.detail-panel .detail-row .dl { color:#999; width:80px; flex-shrink:0; text-align:right; margin-right:10px; }

/* ---- 响应式 ---- */
@media (max-width:900px) { .stat-cards { grid-template-columns:1fr 1fr; } }

/* ---- 填满卡片（分页吸底用） ---- */
.card-fill { flex: 1; display: flex; flex-direction: column; min-height: 0; margin-bottom: 0; }
.card-fill > .card-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.card-fill .content-area { flex: 1; min-height: 0; }