<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Command Center{% endblock %}</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* === Design Tokens (matching scraped site) === */
:root {
--background: hsl(240, 10%, 98%);
--foreground: hsl(240, 10%, 3.9%);
--card: hsl(0, 0%, 100%);
--card-foreground: hsl(240, 10%, 3.9%);
--popover: hsl(0, 0%, 100%);
--popover-foreground: hsl(240, 10%, 3.9%);
--primary: hsl(240, 5.9%, 10%);
--primary-foreground: hsl(0, 0%, 98%);
--secondary: hsl(240, 4.8%, 95.9%);
--secondary-foreground: hsl(240, 5.9%, 10%);
--muted: hsl(240, 4.8%, 95.9%);
--muted-foreground: hsl(240, 3.8%, 46.1%);
--accent: hsl(240, 4.8%, 95.9%);
--accent-foreground: hsl(240, 5.9%, 10%);
--destructive: hsl(0, 84.2%, 60.2%);
--destructive-foreground: hsl(0, 0%, 98%);
--border: hsl(240, 5.9%, 90%);
--input: hsl(240, 5.9%, 90%);
--ring: hsl(240, 5.9%, 10%);
--radius: 0.5rem;
--success: hsl(142, 71.4%, 45.1%);
--warning: hsl(38, 92.2%, 50.2%);
--info: hsl(221.2, 83.2%, 53.3%);
}
/* === Reset === */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* === Base === */
body {
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--background);
color: var(--foreground);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: var(--primary);
text-decoration: none;
transition: opacity 0.15s;
}
a:hover {
opacity: 0.8;
}
/* === Layout === */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
.container-sm {
max-width: 640px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* === Cards (shadcn/ui style) === */
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.card-header {
padding: 1.5rem;
border-bottom: 1px solid var(--border);
}
.card-title {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.25;
color: var(--foreground);
}
.card-description {
font-size: 0.875rem;
color: var(--muted-foreground);
margin-top: 0.25rem;
}
.card-content {
padding: 1.5rem;
}
.card-footer {
padding: 1.5rem;
border-top: 1px solid var(--border);
}
/* === Buttons === */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
font-family: inherit;
line-height: 1.25;
border: 1px solid transparent;
border-radius: var(--radius);
cursor: pointer;
transition: all 0.15s;
text-decoration: none;
}
.btn:hover {
opacity: 1;
}
.btn-primary {
background: var(--primary);
color: var(--primary-foreground);
}
.btn-primary:hover {
background: hsl(240, 5.9%, 15%);
}
.btn-secondary {
background: var(--secondary);
color: var(--secondary-foreground);
border-color: var(--border);
}
.btn-secondary:hover {
background: hsl(240, 4.8%, 90%);
}
.btn-outline {
background: transparent;
border-color: var(--border);
color: var(--foreground);
}
.btn-outline:hover {
background: var(--secondary);
}
.btn-ghost {
background: transparent;
color: var(--foreground);
}
.btn-ghost:hover {
background: var(--secondary);
}
.btn-destructive {
background: var(--destructive);
color: var(--destructive-foreground);
}
.btn-sm {
padding: 0.375rem 0.75rem;
font-size: 0.8125rem;
}
.btn-lg {
padding: 0.75rem 1.5rem;
font-size: 1rem;
}
.btn-block {
width: 100%;
}
/* === Forms === */
.form-group {
margin-bottom: 1.25rem;
}
.form-label {
display: block;
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 0.375rem;
color: var(--foreground);
}
.form-input {
width: 100%;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
font-family: inherit;
color: var(--foreground);
background: var(--card);
border: 1px solid var(--input);
border-radius: var(--radius);
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus {
border-color: var(--ring);
box-shadow: 0 0 0 2px hsla(240, 5.9%, 10%, 0.1);
}
.form-input::placeholder {
color: var(--muted-foreground);
}
.form-hint {
font-size: 0.75rem;
color: var(--muted-foreground);
margin-top: 0.25rem;
}
.form-error {
font-size: 0.75rem;
color: var(--destructive);
margin-top: 0.25rem;
}
.form-checkbox {
width: 1rem;
height: 1rem;
border: 1px solid var(--input);
border-radius: 0.25rem;
cursor: pointer;
}
.checkbox-group {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* === Badges === */
.badge {
display: inline-flex;
align-items: center;
padding: 0.125rem 0.5rem;
font-size: 0.75rem;
font-weight: 500;
border-radius: 9999px;
line-height: 1.5;
}
.badge-default {
background: var(--secondary);
color: var(--secondary-foreground);
}
.badge-success {
background: hsla(142, 71.4%, 45.1%, 0.1);
color: var(--success);
}
.badge-warning {
background: hsla(38, 92.2%, 50.2%, 0.1);
color: var(--warning);
}
.badge-destructive {
background: hsla(0, 84.2%, 60.2%, 0.1);
color: var(--destructive);
}
.badge-info {
background: hsla(221.2, 83.2%, 53.3%, 0.1);
color: var(--info);
}
/* === Flash Messages === */
.flash-messages {
margin-bottom: 1.5rem;
}
.flash-message {
padding: 0.75rem 1rem;
border-radius: var(--radius);
font-size: 0.875rem;
margin-bottom: 0.5rem;
}
.flash-success {
background: hsla(142, 71.4%, 45.1%, 0.1);
color: var(--success);
border: 1px solid hsla(142, 71.4%, 45.1%, 0.2);
}
.flash-error {
background: hsla(0, 84.2%, 60.2%, 0.1);
color: var(--destructive);
border: 1px solid hsla(0, 84.2%, 60.2%, 0.2);
}
.flash-info {
background: hsla(221.2, 83.2%, 53.3%, 0.1);
color: var(--info);
border: 1px solid hsla(221.2, 83.2%, 53.3%, 0.2);
}
/* === Navigation === */
.nav {
display: flex;
align-items: center;
gap: 0.25rem;
}
.nav-item {
display: inline-flex;
align-items: center;
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--muted-foreground);
border-radius: var(--radius);
transition: all 0.15s;
text-decoration: none;
}
.nav-item:hover {
color: var(--foreground);
background: var(--secondary);
opacity: 1;
}
.nav-item.active {
color: var(--foreground);
background: var(--secondary);
}
/* === Tables === */
.table {
width: 100%;
border-collapse: collapse;
}
.table th {
text-align: left;
padding: 0.75rem 1rem;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted-foreground);
border-bottom: 1px solid var(--border);
}
.table td {
padding: 0.75rem 1rem;
font-size: 0.875rem;
border-bottom: 1px solid var(--border);
}
.table tbody tr:hover {
background: var(--secondary);
}
/* === Grid === */
.grid {
display: grid;
gap: 1.5rem;
}
.grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
.grid-2, .grid-3, .grid-4 {
grid-template-columns: 1fr;
}
}
/* === Flex === */
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
/* === Spacing === */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
/* === Typography === */
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-muted { color: var(--muted-foreground); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-destructive { color: var(--destructive); }
/* === Page Layout === */
.page-header {
margin-bottom: 1.5rem;
}
.page-title {
font-size: 1.5rem;
font-weight: 600;
line-height: 1.2;
color: var(--foreground);
}
.page-description {
font-size: 0.875rem;
color: var(--muted-foreground);
margin-top: 0.25rem;
}
/* === KPI Cards === */
.kpi-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.kpi-label {
font-size: 0.75rem;
font-weight: 500;
color: var(--muted-foreground);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.kpi-value {
font-size: 1.75rem;
font-weight: 700;
color: var(--foreground);
margin-top: 0.25rem;
}
.kpi-trend {
font-size: 0.75rem;
font-weight: 500;
margin-top: 0.25rem;
}
.kpi-trend.up {
color: var(--success);
}
.kpi-trend.down {
color: var(--destructive);
}
/* === Dashboard Layout === */
.dashboard-layout {
display: grid;
grid-template-columns: 250px 1fr;
min-height: 100vh;
}
.sidebar {
background: var(--card);
border-right: 1px solid var(--border);
padding: 1.5rem 1rem;
}
.sidebar-logo {
font-size: 1rem;
font-weight: 700;
color: var(--foreground);
padding: 0 0.75rem;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.sidebar-nav-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--muted-foreground);
border-radius: var(--radius);
transition: all 0.15s;
text-decoration: none;
}
.sidebar-nav-item:hover {
color: var(--foreground);
background: var(--secondary);
opacity: 1;
}
.sidebar-nav-item.active {
color: var(--foreground);
background: var(--secondary);
}
.main-content {
padding: 1.5rem 2rem;
}
@media (max-width: 768px) {
.dashboard-layout {
grid-template-columns: 1fr;
}
.sidebar {
display: none;
}
}
</style>
{% block extra_styles %}{% endblock %}
</head>
<body>
{% block body %}
<div class="container">
<div class="flash-messages">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="flash-message flash-{{ category }}">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
</div>
{% block content %}{% endblock %}
</div>
{% endblock %}
{% block scripts %}{% endblock %}
</body>
</html>