* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f3; color: #1a1a1a; }

.layout { display: flex; min-height: 100vh; }

.sidebar { width: 210px; background: #fff; border-right: 0.5px solid #e0e0d8; padding: 0; flex-shrink: 0; display: flex; flex-direction: column; }
.sidebar-top { padding: 1rem; border-bottom: 0.5px solid #e0e0d8; }
.sidebar-logo { width: 100%; max-width: 170px; }
.sidebar-nav { padding: 0.75rem; flex: 1; }

.nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: #666; margin-bottom: 3px; text-decoration: none; }
.nav-item:hover { background: #f5f5f3; color: #1a1a1a; }
.nav-item.active { background: #EBF7FD; color: #3AAADC; font-weight: 500; }
.nav-item i { font-size: 17px; }

.main { flex: 1; padding: 1.5rem; overflow: auto; }
.main-strip { height: 3px; background: #3AAADC; margin: -1.5rem -1.5rem 1.5rem -1.5rem; }

.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.topbar-title { font-size: 16px; font-weight: 500; }
.topbar-sub { font-size: 12px; color: #888; margin-top: 2px; }

.btn { padding: 7px 14px; border-radius: 8px; font-size: 13px; border: 0.5px solid #ccc; background: #fff; color: #1a1a1a; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.btn:hover { background: #f5f5f3; }
.btn-primary { background: #3AAADC; color: #fff; border-color: #3AAADC; }
.btn-primary:hover { background: #2a90c0; }
.btn-danger { background: #fff; color: #A32D2D; border-color: #A32D2D; }
.btn-danger:hover { background: #FCEBEB; }

.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 1.25rem; }
.metric { background: #fafaf8; border-radius: 8px; padding: 12px 14px; }
.metric-label { font-size: 12px; color: #888; margin-bottom: 4px; }
.metric-value { font-size: 22px; font-weight: 500; }
.metric-value.green { color: #3B6D11; }
.metric-value.red { color: #A32D2D; }
.metric-value.amber { color: #854F0B; }
.metric-value.blue { color: #3AAADC; }

.card { background: #fff; border: 0.5px solid #e0e0d8; border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.section-title { font-size: 11px; font-weight: 500; color: #888; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.04em; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; padding: 8px 10px; font-size: 11px; font-weight: 500; color: #888; border-bottom: 0.5px solid #e0e0d8; text-transform: uppercase; letter-spacing: 0.04em; }
td { padding: 8px 10px; border-bottom: 0.5px solid #e0e0d8; }
tr:last-child td { border-bottom: none; }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 500; }
.badge-green { background: #EAF3DE; color: #3B6D11; }
.badge-red { background: #FCEBEB; color: #A32D2D; }
.badge-amber { background: #FAEEDA; color: #854F0B; }
.badge-blue { background: #EBF7FD; color: #185FA5; }

.action-btn { padding: 4px 10px; border-radius: 6px; font-size: 11px; border: 0.5px solid #ccc; background: #fff; cursor: pointer; text-decoration: none; color: #1a1a1a; }
.action-btn:hover { background: #f5f5f3; }