/* ── brand.css ───────────────────────────────────────── */ /* Override Bootstrap styles */ body { font-family: 'Inter', sans-serif !important; } /* 1-A Palette variables */ :root { --charcoal: #2a2a2c; /* lighter header bg */ --electric-coral: #ff5c5c; --off-white: #f7f7f8; --card-blue: #0b79ff; --card-yellow: #fbbc04; --card-green: #19984b; --card-red: #d93025; } /* 1-B Typography (Google Fonts in ) */ body { font-family: 'Inter', sans-serif; background: var(--off-white); color: #111; } h1,h2,h3 { font-family: 'Poppins', sans-serif; } /* 1-C Header tweaks */ .site-header { background: var(--charcoal) !important; color: var(--off-white) !important; display: flex !important; align-items: center; gap: 24px; padding: 24px 40px; margin-left: 250px; border-radius: 0; margin-bottom: 0; } .site-header img.logo { width: 180px; height: auto; } .site-header .tagline { font-size: 1.125rem; line-height: 1.4; margin: 0; color: var(--off-white); opacity: 0.8; } /* 1-D Sidebar nav */ .sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: #4b5563; text-decoration: none; border-radius: 6px; } .sidebar nav a.active { background: var(--electric-coral); color: #fff; } /* 1-E Metric cards */ .metric-card { flex: 1 1 180px; /* equal width, wraps nicely */ display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; padding: 18px 14px; color: #fff; gap: 6px; } .metric-card .count { font-size: 1.5rem; font-weight: 600; } .metric-card svg { width: 24px; height: 24px; } /* individual colours */ .metric-card.total { background: var(--card-blue); } .metric-card.processing { background: var(--card-yellow); color:#000; } .metric-card.completed { background: var(--card-green); } .metric-card.failed { background: var(--card-red); } /* 1-F Ghost refresh button */ .btn-ghost { border: none; background: transparent; color: var(--electric-coral); cursor: pointer; font-size: 1.25rem; padding: 6px 10px; display: inline-flex; align-items: center; } .btn-ghost:hover { opacity: .75; } /* 1-G Empty-state */ .empty-state { margin: 32px 0; text-align: center; color: #6b7280; } /* Main content area */ .main-content { margin-left: 250px; padding: 20px; }