@font-face { font-family: "Jost"; src: url(/fonts/jost-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --cps-ground: #F4F2EB; --cps-surface: #FCFBF8; --cps-ink: #16201F; --cps-muted: #4A5654; --cps-text-soft: #545958;
  --cps-line: #DDD8CC; --cps-card-line: #DEDFDD; --cps-border: #C9CFCD;
  --cps-brand: #6B1317; --cps-brand-dark: #4A0D10; --cps-on-brand: #F5F2EB; --cps-pink: #F1DEDC;
  --cps-status-available: #2F6B4F; --cps-status-available-tint: #E6EFEA;
  --cps-status-hold: #A16B18; --cps-status-hold-ink: #8A5A10; --cps-status-hold-tint: #FFFAF2;
  --cps-status-reserved: #34557A; --cps-status-reserved-tint: #E3E9F0;
  --cps-danger: #B42318; --cps-danger-tint: #FBE9E7;
  --cps-font: "Jost", system-ui, sans-serif;
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-full: 999px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--cps-font); background: var(--cps-ground); color: var(--cps-ink); font-size: 16px; line-height: 24px; -webkit-font-smoothing: antialiased; }
a { color: var(--cps-brand); }
h1, h2, h3, p { margin: 0; }
button { font-family: inherit; }

/* Icons (Unicons line, painted with the text colour) */
.ic { display: inline-block; width: 20px; height: 20px; background: currentColor; flex: none;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.i-apps { --ic: url(/img/apps.svg); } .i-users-alt { --ic: url(/img/users-alt.svg); } .i-user { --ic: url(/img/user.svg); }
.i-globe { --ic: url(/img/globe.svg); } .i-trophy { --ic: url(/img/trophy.svg); } .i-camera { --ic: url(/img/camera.svg); }
.i-building { --ic: url(/img/building.svg); } .i-star { --ic: url(/img/star.svg); } .i-book-open { --ic: url(/img/book-open.svg); }
.i-lightbulb-alt { --ic: url(/img/lightbulb-alt.svg); } .i-shield-check { --ic: url(/img/shield-check.svg); }
.i-angle-double-left { --ic: url(/img/angle-double-left.svg); } .i-angle-double-right { --ic: url(/img/angle-double-right.svg); }
.i-sign-out-alt { --ic: url(/img/sign-out-alt.svg); }

/* Login pages */
.login-page { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--cps-ground) url(/img/swirl.svg) center / cover no-repeat; }
.login-card { width: 541px; max-width: 100%; background: var(--cps-surface); border: 1px solid var(--cps-border); border-radius: 16px;
  padding: 56px 60px; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.login-brand img { width: 154px; height: 31px; }
.login-brand span { font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--cps-text-soft); line-height: 20px; }
.login-card h1 { font-size: 20px; line-height: 28px; font-weight: 500; }
.login-card p { color: var(--cps-muted); line-height: 25px; }
.login-actions { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.login-foot { width: 100%; border-top: 1px solid var(--cps-line); padding-top: 24px; font-size: 14px; line-height: 21px; color: var(--cps-muted); }
.who { font-weight: 500; color: var(--cps-ink); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 56px; width: 100%; border-radius: var(--radius-lg);
  font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; border: 1px solid var(--cps-border); background: #fff; color: var(--cps-ink); }
.btn:hover { background: var(--cps-surface); }
.btn:focus-visible, .nav a:focus-visible, .link-btn:focus-visible { outline: 2px solid var(--cps-brand); outline-offset: 2px; }
.btn-main { background: var(--cps-brand); border-color: var(--cps-brand); color: var(--cps-on-brand); }
.btn-main:hover { background: var(--cps-brand-dark); }
.btn-sm { height: 36px; width: auto; padding: 0 16px; font-size: 14px; border-radius: var(--radius-md); }
.btn-ink { background: var(--cps-ink); border-color: var(--cps-ink); color: var(--cps-on-brand); }
.btn-ink:hover { background: #2a3533; }
.link-btn { background: none; border: 0; padding: 0; color: var(--cps-brand); text-decoration: underline; cursor: pointer; font-size: inherit; }

/* App shell */
.shell { display: flex; min-height: 100%; }
.side { width: 264px; flex: none; background: var(--cps-ground); border-right: 1px solid var(--cps-line); padding: 24px 12px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 12px 24px; }
.brand img { height: 22px; width: auto; }
.brand span { font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: var(--radius-full); color: var(--cps-ink); text-decoration: none; font-weight: 400; }
.nav a:hover { background: var(--cps-pink); }
.nav a[aria-current="page"] { background: var(--cps-brand); color: var(--cps-on-brand); }
.nav hr { border: 0; border-top: 1px solid var(--cps-line); margin: 8px 12px; }
.side-foot { margin-top: auto; border-top: 1px solid var(--cps-line); padding: 16px 4px 0; display: flex; align-items: center; gap: 12px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--cps-ink); color: var(--cps-on-brand); font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; flex: none; }
.me { min-width: 0; flex: 1; line-height: 18px; }
.me b { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me small { font-size: 12px; color: var(--cps-muted); }
.icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--cps-border); background: var(--cps-surface); color: var(--cps-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.icon-btn .ic { width: 16px; height: 16px; }
.icon-btn:hover { background: #fff; }
.collapsed .side { width: 80px; }
.collapsed .brand span, .collapsed .nav .lbl, .collapsed .me { display: none; }
.collapsed .brand { justify-content: center; padding-inline: 0; }
.collapsed .nav a { justify-content: center; padding: 0; }
.collapsed .side-foot { flex-direction: column; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; border-bottom: 1px solid var(--cps-line); background: var(--cps-ground); }
.top h1 { font-size: 20px; line-height: 28px; font-weight: 500; }
.synced { font-size: 14px; color: var(--cps-muted); display: flex; align-items: center; gap: 8px; }
.content { padding: 32px 40px 56px; max-width: 1180px; width: 100%; }

.card { background: var(--cps-surface); border: 1px solid var(--cps-card-line); border-radius: var(--radius-lg); }
.card-head { display: flex; align-items: center; gap: 16px; padding: 24px; }
.card-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--cps-ground); display: flex; align-items: center; justify-content: center; flex: none; }
.card-head h2 { font-size: 20px; line-height: 28px; font-weight: 500; }
.card-head p { font-size: 14px; line-height: 20px; color: var(--cps-muted); }
.card-body { padding: 0 24px 24px; }
.card-foot { background: var(--cps-status-hold-tint); border-top: 1px solid var(--cps-card-line); padding: 16px 24px; font-size: 14px; color: var(--cps-muted); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.stack { display: flex; flex-direction: column; gap: 24px; }
.empty { text-align: center; padding: 56px 24px; color: var(--cps-muted); }
.empty h2 { color: var(--cps-ink); font-size: 20px; line-height: 28px; font-weight: 500; margin-bottom: 8px; }

/* Tables and pills */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 500; color: var(--cps-muted); background: var(--cps-ground); padding: 10px 16px; border-bottom: 1px solid var(--cps-line); white-space: nowrap; }
td { padding: 12px 16px; border-bottom: 1px solid var(--cps-line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; }
.pill { display: inline-block; padding: 2px 10px; border-radius: var(--radius-full); font-size: 12px; line-height: 18px; font-weight: 500; }
.pill-ok { background: var(--cps-status-available-tint); color: var(--cps-status-available); }
.pill-warn { background: var(--cps-status-hold-tint); color: var(--cps-status-hold-ink); border: 1px solid #ecd9b8; }
.pill-info { background: var(--cps-status-reserved-tint); color: var(--cps-status-reserved); }
.pill-off { background: #ebeceb; color: var(--cps-muted); }
.pill-bad { background: var(--cps-danger-tint); color: var(--cps-danger); }
.muted { color: var(--cps-muted); }
.small { font-size: 14px; line-height: 20px; }

/* Forms */
.form-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.field input[type=text], .field input[type=email] { height: 40px; min-width: 240px; padding: 0 12px; border: 1px solid var(--cps-border); border-radius: var(--radius-md); background: #fff; font: inherit; color: var(--cps-ink); }
.checks { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
.checks label { display: inline-flex; align-items: center; gap: 6px; }
.notice { padding: 12px 16px; border-radius: var(--radius-md); font-size: 14px; }
.notice-ok { background: var(--cps-status-available-tint); color: var(--cps-status-available); }
.notice-bad { background: var(--cps-danger-tint); color: var(--cps-danger); }
.tabs { display: flex; gap: 8px; }
.tabs button { height: 36px; padding: 0 16px; border-radius: var(--radius-full); border: 1px solid var(--cps-border); background: transparent; cursor: pointer; font-size: 14px; }
.tabs button[aria-pressed="true"] { background: var(--cps-ink); color: var(--cps-on-brand); border-color: var(--cps-ink); }
.health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.health-grid .card { padding: 20px; }
.health-grid b { display: block; font-weight: 500; margin-bottom: 8px; }
@media (max-width: 800px) { .side { display: none; } .content, .top { padding-inline: 20px; } .login-card { padding: 40px 24px; } }