@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --ink: #0A0A0A; --ink-soft: #1C1C1C; --blue: #0D78BE; --blue-dark: #0A5D93;
  --steel: #6B6F76; --steel-light: #C7C9CC; --paper: #FFFFFF; --white: #FFFFFF;
  --green: #2E7D46; --red: #C63C3C; --yellow: #B8860B; --radius: 6px;
  --font-head: 'Barlow Condensed', sans-serif; --font-body: 'Inter', sans-serif;
}
* { box-sizing: border-box; }
body { margin:0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 14.5px; }
h1,h2,h3 { font-family: var(--font-head); font-weight: 600; margin: 0 0 6px; }
h1 { font-size: 28px; } h2 { font-size: 20px; } h3 { font-size: 16px; }
a { color: var(--blue-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 220px; background: var(--ink); color: var(--white); flex-shrink: 0;
  padding: 22px 0; position: sticky; top: 0; height: 100vh;
}
.sidebar .brand { font-family: var(--font-head); font-size: 22px; font-weight: 700; padding: 0 20px 22px; border-bottom: 1px solid #33373B; }
.sidebar .brand span { color: var(--blue); }
.sidebar nav { margin-top: 14px; }
.sidebar nav a {
  display: block; padding: 11px 20px; color: #C7C9CC; font-size: 14px; font-weight: 500;
  border-left: 3px solid transparent;
}
.sidebar nav a:hover { color: var(--white); text-decoration: none; background: var(--ink-soft); }
.sidebar nav a.active { color: var(--white); border-left-color: var(--blue); background: var(--ink-soft); }
.sidebar .foot { padding: 16px 20px; border-top: 1px solid #33373B; margin-top: 20px; }
.sidebar .foot form button { background:none; border:none; color:#C7C9CC; font-size:13px; cursor:pointer; padding:0; font-family: var(--font-body); }
.sidebar .foot form button:hover { color: var(--white); }

.main { flex: 1; padding: 30px 36px; max-width: 1100px; }
.pagehead { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:20px; }

.card { background: var(--white); border: 1px solid #E4E1D8; border-radius: var(--radius); padding: 20px; }
.stat-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:14px; margin-bottom:24px; }
.stat-card { background: var(--white); border:1px solid #E4E1D8; border-radius: var(--radius); padding:16px 18px; }
.stat-card .num { font-family: var(--font-head); font-size: 30px; font-weight:600; }
.stat-card .lbl { font-size:12.5px; color: var(--steel); }

table { width:100%; border-collapse: collapse; background: var(--white); }
table thead th {
  text-align:left; font-size:12px; text-transform: uppercase; letter-spacing:0.4px; color: var(--steel);
  padding: 10px 12px; border-bottom: 2px solid var(--ink); background: #F2F2F2;
}
table tbody td { padding: 11px 12px; border-bottom: 1px solid #E4E1D8; font-size: 13.8px; vertical-align: middle; }
table tbody tr:hover { background: #FAFAFA; }
.table-wrap { border: 1px solid #E4E1D8; border-radius: var(--radius); overflow: hidden; }

.badge { display:inline-block; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:20px; background: #F2F2F2; color: var(--steel); }
.badge-green { background:#E4F3E8; color: var(--green); }
.badge-orange { background:#DCEEF9; color: var(--blue-dark); }
.badge-red { background:#F8E1E1; color: var(--red); }
.badge-yellow { background:#FDF1CC; color: var(--yellow); }

button, .btn { font-family: var(--font-body); font-weight:600; font-size:13px; border:none; border-radius: var(--radius); padding:9px 15px; cursor:pointer; }
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--blue-dark); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-outline { background: transparent; border:1.5px solid var(--ink); color: var(--ink); }
.btn-red { background: var(--red); color: var(--white); }
.btn-green { background: var(--green); color: var(--white); }
.btn-sm { padding:6px 11px; font-size:12px; }

input, select, textarea {
  font-family: var(--font-body); font-size:13.5px; padding:9px 11px; border:1.5px solid var(--steel-light);
  border-radius: var(--radius); width:100%; background: var(--white); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline:none; border-color: var(--blue); }
label { font-size:12.5px; font-weight:600; color: var(--steel); display:block; margin-bottom:4px; }
.field { margin-bottom:13px; }
.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap:14px; }

.alert { border-radius: var(--radius); padding:11px 14px; font-size:13.5px; margin-bottom:16px; }
.alert-error { background:#F8E1E1; color: var(--red); }
.alert-success { background:#E4F3E8; color: var(--green); }
.muted { color: var(--steel); }
.small { font-size:12.5px; }
.divider { border:none; border-top:1px solid #E4E1D8; margin:16px 0; }
.empty-state { text-align:center; padding:50px 20px; color: var(--steel); }
.actions { display:flex; gap:6px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .sidebar { width:100%; height:auto; position:static; }
  .main { padding: 20px; }
}