/* ============================================================
   证书公示及颁发系统 - 后台管理样式
   设计方向: 方形、不对称、深色、无紫色
   ============================================================ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
    --bg: #0B1120;
    --surface: #131C31;
    --surface2: #1A2540;
    --primary: #E8751A;
    --primary-hover: #D1650E;
    --accent2: #14B8A6;
    --text: #E2E8F0;
    --text-muted: #64748B;
    --border: #1E293B;
    --danger: #EF4444;
    --success: #22C55E;
    --shadow: 0 4px 24px rgba(0,0,0,0.3);
    --font: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

html { font-size:16px; }
body {
    font-family:var(--font); background:var(--bg); color:var(--text);
    line-height:1.7; min-height:100vh;
}

/* ===== Login Page ===== */
.login-wrap {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:var(--bg); position:relative; overflow:hidden;
}
.login-wrap::before {
    content:''; position:absolute;
    width:700px; height:700px; background:var(--primary);
    opacity:0.04; transform:rotate(45deg);
    top:-300px; right:-200px;
}
.login-wrap::after {
    content:''; position:absolute;
    width:400px; height:400px; background:var(--accent2);
    opacity:0.03; transform:rotate(45deg);
    bottom:-200px; left:5%;
}
.login-box {
    position:relative; z-index:2; width:420px;
    background:var(--surface); border:1px solid var(--border);
    padding:48px 40px;
}
.login-header { margin-bottom:36px; }
.login-header .square-row { display:flex; gap:8px; margin-bottom:20px; }
.login-header .square-row span {
    width:20px; height:20px; display:block;
}
.login-header .square-row span:nth-child(1) { background:var(--primary); }
.login-header .square-row span:nth-child(2) { background:var(--accent2); }
.login-header .square-row span:nth-child(3) { background:var(--primary); }
.login-header h1 { font-size:1.5rem; font-weight:700; color:#fff; letter-spacing:1px; }
.login-header p { font-size:0.85rem; color:var(--text-muted); margin-top:6px; }

.form-group { margin-bottom:22px; }
.form-group label {
    display:block; font-size:0.8rem; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:1.5px; font-weight:600; margin-bottom:8px;
}
.form-group input[type="file"] {
    width:100%; padding:12px 16px; background:var(--surface2); border:1px solid var(--border);
    color:#94A3B8; font-size:0.9rem; font-family:var(--font); cursor:pointer;
}
.form-group input:not([type="file"]), .form-group textarea, .form-group select {
    width:100%; padding:12px 16px; background:var(--surface2); border:1px solid var(--border);
    color:#fff; font-size:0.95rem; font-family:var(--font);
    transition:border-color 0.25s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    outline:none; border-color:var(--primary);
}
.form-group textarea { min-height:120px; resize:vertical; }

.btn {
    display:inline-block; padding:12px 28px; font-size:0.9rem; font-weight:600;
    text-transform:uppercase; letter-spacing:0.8px; cursor:pointer;
    border:none; transition:background 0.25s, transform 0.15s; font-family:var(--font);
}
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-hover); }
.btn-secondary { background:var(--surface2); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { background:var(--border); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#DC2626; }
.btn-full { width:100%; }
.btn-sm { padding:8px 18px; font-size:0.8rem; }

/* ===== Admin Layout ===== */
.admin-layout { display:flex; min-height:100vh; }

/* Sidebar */
.sidebar {
    width:260px; background:var(--surface); border-right:1px solid var(--border);
    display:flex; flex-direction:column; flex-shrink:0; position:sticky; top:0; height:100vh;
}
.sidebar-header {
    padding:24px 24px 20px; border-bottom:1px solid var(--border);
}
.sidebar-header .logo-text { font-size:1.1rem; font-weight:700; color:#fff; letter-spacing:0.5px; }
.sidebar-header .logo-sub { font-size:0.75rem; color:var(--text-muted); margin-top:4px; }
.sidebar-nav { flex:1; padding:16px 0; }
.sidebar-nav a {
    display:flex; align-items:center; gap:12px; padding:14px 24px;
    color:var(--text-muted); font-size:0.9rem; font-weight:500;
    transition:all 0.2s; border-left:3px solid transparent;
}
.sidebar-nav a:hover { color:#fff; background:rgba(255,255,255,0.03); }
.sidebar-nav a.active { color:#fff; background:rgba(232,117,26,0.1); border-left-color:var(--primary); }
.sidebar-nav a .nav-icon {
    width:20px; height:20px; display:inline-block; flex-shrink:0;
    position:relative;
}
/* Dashboard icon - 4 small squares */
.nav-icon.icon-dash::before, .nav-icon.icon-dash::after {
    content:''; position:absolute; width:8px; height:8px;
    background:#64748B; transition:background 0.2s;
}
.sidebar-nav a.active .nav-icon.icon-dash::before,
.sidebar-nav a.active .nav-icon.icon-dash::after { background:var(--primary); }
.sidebar-nav a:hover .nav-icon.icon-dash::before,
.sidebar-nav a:hover .nav-icon.icon-dash::after { background:#94A3B8; }
.nav-icon.icon-dash::before  { top:0; left:0; box-shadow:10px 0 0 currentColor; }
.nav-icon.icon-dash::after   { top:10px; left:0; box-shadow:10px 0 0 currentColor; }

/* Issue icon - plus sign */
.nav-icon.icon-issue { background:transparent !important; border:2px solid var(--text-muted); transition:border-color 0.2s; }
.sidebar-nav a.active .nav-icon.issue { border-color:var(--primary); }
.sidebar-nav a:hover .nav-icon.issue { border-color:#94A3B8; }
.nav-icon.icon-issue::before, .nav-icon.icon-issue::after {
    content:''; position:absolute; background:var(--text-muted);
    transition:background 0.2s;
}
.sidebar-nav a.active .nav-icon.icon-issue::before,
.sidebar-nav a.active .nav-icon.icon-issue::after { background:var(--primary); }
.sidebar-nav a:hover .nav-icon.icon-issue::before,
.sidebar-nav a:hover .nav-icon.icon-issue::after { background:#94A3B8; }
.nav-icon.icon-issue::before  { width:10px; height:2px; top:9px; left:5px; }
.nav-icon.icon-issue::after   { width:2px; height:10px; top:5px; left:9px; }

/* List icon - lines */
.nav-icon.icon-list::before, .nav-icon.icon-list::after {
    content:''; position:absolute; width:16px; height:2px;
    background:var(--text-muted); transition:background 0.2s;
    left:2px;
}
.sidebar-nav a.active .nav-icon.icon-list::before,
.sidebar-nav a.active .nav-icon.icon-list::after { background:var(--primary); }
.sidebar-nav a:hover .nav-icon.icon-list::before,
.sidebar-nav a:hover .nav-icon.icon-list::after { background:#94A3B8; }
.nav-icon.icon-list::before  { top:4px; box-shadow:0 5px 0 currentColor, 0 10px 0 currentColor; }
.nav-icon.icon-list::after   { display:none; }

/* Home icon - house */
.nav-icon.icon-home { background:transparent !important; position:relative; }
.nav-icon.icon-home::before, .nav-icon.icon-home::after {
    content:''; position:absolute;
}
.nav-icon.icon-home::before {
    width:0; height:0;
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-bottom:12px solid var(--text-muted);
    transition:border-bottom-color 0.2s;
    left:3px; top:1px;
}
.sidebar-nav a.active .nav-icon.icon-home::before { border-bottom-color:var(--primary); }
.sidebar-nav a:hover .nav-icon.icon-home::before { border-bottom-color:#94A3B8; }
.nav-icon.icon-home::after {
    width:14px; height:7px; background:var(--text-muted);
    bottom:1px; left:3px;
    transition:background 0.2s;
}
.sidebar-nav a.active .nav-icon.icon-home::after { background:var(--primary); }
.sidebar-nav a:hover .nav-icon.icon-home::after { background:#94A3B8; }
.sidebar-footer { padding:16px 24px; border-top:1px solid var(--border); }
.sidebar-footer a { color:var(--text-muted); font-size:0.85rem; }
.sidebar-footer a:hover { color:var(--danger); }

/* Main Content */
.main-content { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar {
    background:var(--surface); border-bottom:1px solid var(--border);
    padding:16px 32px; display:flex; justify-content:space-between; align-items:center;
}
.topbar h2 { font-size:1.1rem; font-weight:600; color:#fff; }
.topbar .user-info { font-size:0.85rem; color:var(--text-muted); }
.topbar .user-info strong { color:#fff; }

.content-area { padding:32px; flex:1; }

/* Cards */
.card {
    background:var(--surface); border:1px solid var(--border);
    padding:0; margin-bottom:28px;
}
.card-header {
    padding:18px 24px; border-bottom:1px solid var(--border);
    display:flex; justify-content:space-between; align-items:center;
}
.card-header h3 { font-size:1rem; font-weight:600; color:#fff; }
.card-body { padding:24px; }

/* Stats Row */
.stats-row {
    display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-bottom:32px;
}
.stat-card {
    background:var(--surface); border:1px solid var(--border);
    padding:24px; position:relative; overflow:hidden;
}
.stat-card::after {
    content:''; position:absolute;
    width:80px; height:80px; background:var(--primary);
    opacity:0.05; transform:rotate(45deg);
    top:-30px; right:-30px;
}
.stat-card .stat-label {
    font-size:0.75rem; color:var(--text-muted); text-transform:uppercase;
    letter-spacing:1.5px; font-weight:600; margin-bottom:10px;
}
.stat-card .stat-value { font-size:2rem; font-weight:800; color:#fff; }
.stat-card:nth-child(2)::after { background:var(--accent2); }
.stat-card:nth-child(3)::after { background:var(--success); }
.stat-card:nth-child(4)::after { background:var(--danger); }

/* Tables */
.data-table { width:100%; border-collapse:collapse; }
.data-table th, .data-table td {
    padding:14px 16px; text-align:left; font-size:0.88rem;
    border-bottom:1px solid var(--border);
}
.data-table th {
    font-size:0.75rem; color:var(--text-muted); text-transform:uppercase;
    letter-spacing:1px; font-weight:600; background:var(--surface2);
}
.data-table tr:hover td { background:rgba(255,255,255,0.01); }
.data-table .badge {
    display:inline-block; padding:4px 12px; font-size:0.75rem; font-weight:600;
    text-transform:uppercase;
}
.badge-info { background:rgba(20,184,166,0.15); color:var(--accent2); }
.badge-warn { background:rgba(232,117,26,0.15); color:var(--primary); }

/* Alert */
.alert { padding:14px 20px; margin-bottom:20px; font-size:0.88rem; }
.alert-success { background:rgba(34,197,94,0.1); border-left:4px solid var(--success); color:var(--success); }
.alert-error { background:rgba(239,68,68,0.1); border-left:4px solid var(--danger); color:var(--danger); }

/* QR section in admin */
.qr-preview { margin-top:16px; padding:20px; background:var(--surface2); display:inline-block; }
.qr-preview img { width:180px; height:180px; display:block; }
.qr-preview .qr-label { font-size:0.8rem; color:var(--text-muted); margin-top:10px; text-align:center; }

/* Empty state */
.empty-state { text-align:center; padding:48px 24px; color:var(--text-muted); }
.empty-state h3 { color:var(--text); margin-bottom:8px; }
.empty-state p { font-size:0.9rem; }

/* Pagination */
.pagination { display:flex; justify-content:center; gap:6px; margin-top:24px; }
.pagination a, .pagination span {
    display:inline-block; width:36px; height:36px; line-height:36px;
    text-align:center; background:var(--surface2); border:1px solid var(--border);
    font-size:0.85rem; color:var(--text); font-weight:500;
}
.pagination a:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.pagination .current { background:var(--primary); color:#fff; border-color:var(--primary); }

/* Action buttons */
.action-group { display:flex; gap:8px; }

/* Modal / Inline detail */
.inline-detail { padding:20px; background:var(--surface2); margin-top:16px; display:none; }
.inline-detail.open { display:block; }
.inline-detail .detail-row { display:flex; gap:16px; margin-bottom:12px; }
.inline-detail .detail-label { font-size:0.8rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; width:100px; flex-shrink:0; }
.inline-detail .detail-value { font-size:0.9rem; color:var(--text); }

/* Responsive */
@media (max-width:900px) {
    .admin-layout { flex-direction:column; }
    .sidebar { width:100%; height:auto; position:relative; }
    .sidebar-nav { display:flex; flex-wrap:wrap; padding:8px 0; }
    .sidebar-nav a { flex:1; min-width:120px; justify-content:center; }
    .stats-row { grid-template-columns:repeat(2, 1fr); }
    .content-area { padding:20px; }
    .topbar { padding:14px 20px; }
}
@media (max-width:600px) {
    .login-box { width:90%; padding:32px 24px; }
    .stats-row { grid-template-columns:1fr; }
    .data-table { font-size:0.78rem; }
    .data-table th, .data-table td { padding:10px 8px; }
}