/* RMC Manager - "Rudo" look in the Knights Court navy and orange (v113).
   The portal's fonts and shapes restyled after rudo.co.uk (a web design agency Gavin liked): Poppins 800 headings with very tight letter-spacing,
   Plus Jakarta Sans for text, a flat pale grey page, big rounded white cards, rounded-square buttons and pill tags.  The Knights Court navy and
   orange are KEPT.  It is loaded AFTER styles.css and only changes how things look (fonts, shapes, spacing, the page background), so it can be
   switched off by removing its <link> line in index.html.  Red / amber / green status colours and all printed documents are untouched.

   Rudo's own values for reference: heading font Poppins 800, -0.05em; body Plus Jakarta Sans; nav 18px weight 500; buttons weight 700; page #f1f1f1. */

:root {
  --bg: #f1f1f1;
  --font-head: 'Poppins', 'Plus Jakarta Sans', Segoe UI, Arial, sans-serif;
  --font-display: 'Poppins', 'Plus Jakarta Sans', Segoe UI, Arial, sans-serif;
  --font-body: 'Plus Jakarta Sans', Inter, Segoe UI, Arial, sans-serif;
}

/* ---- page and type ------------------------------------------------------------------------------------------------------------------------- */
body { background: var(--bg); background-attachment: scroll; font-family: var(--font-body); }
h1, h2 { font-family: 'Poppins', sans-serif; font-weight: 800; letter-spacing: -.04em; line-height: 1.08; }
h3, h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; letter-spacing: -.02em; }
h1 { letter-spacing: -.045em; }
.hero h1, .hero.v11-hero h1 { letter-spacing: -.05em; line-height: 1.05; }
.brand, .login-card-head h2, .login-hero-name, .login-hero-bottom h1, .topbrand-company { font-family: 'Poppins', sans-serif; font-weight: 800; letter-spacing: -.04em; }

/* ---- side menu ----------------------------------------------------------------------------------------------------------------------------- */
.side { background: #fff; }
.side button { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; letter-spacing: -.01em; border-radius: 14px; border-left: 0; }
.side button:hover { background: #eef2f8; color: var(--navy); border-left-color: transparent; }
.side button.active, .side button.active:hover { background: var(--coral); color: #fff; border-left-color: transparent; box-shadow: none; font-weight: 800; }

/* ---- hero, cards, stat band ---------------------------------------------------------------------------------------------------------------- */
.hero { border-radius: 28px; }
.hero.v11-hero { border-radius: 0 0 28px 28px; }
.card { border-radius: 24px; box-shadow: none; border: 0; }
.card h3 { font-size: 1.15rem; }
.card:hover { box-shadow: 0 10px 28px rgba(10, 35, 66, .10), inset 0 3px 0 0 var(--coral); }
.metric-card { border-radius: 24px; }
.stat-band { border-radius: 24px; }
.stat-band .stat-num { font-family: 'Poppins', sans-serif; font-weight: 800; letter-spacing: -.04em; }

/* ---- buttons, tags, forms ------------------------------------------------------------------------------------------------------------------ */
.primary, .btn { border-radius: 14px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -.01em; }
.status { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; }
.tabs { border-radius: 14px; }
.field label { font-weight: 700; }
.field input, .field select, .field textarea, input, select, textarea { border-radius: 12px; }
.table th, th { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; }

/* ---- the sign-in page ---------------------------------------------------------------------------------------------------------------------- */
.login-card { border-radius: 32px; }
.login-card .primary { border-radius: 14px; }