/* =====================================================================
   Board SaaS - design system
   Hourglass Solutions house style: deep navy ground, gold accent,
   generous rounding, soft shadows, white cards.

   Matched to leads.hourglasssolutions.co.za and board.nhlekoscaff.co.za.

   This design commits to one look rather than following the viewer's
   OS theme, exactly as the other Hourglass systems do. Every colour is
   therefore painted explicitly and nothing is left to inherit.
   ===================================================================== */

:root {
  /* ground */
  --navy-900: #08122a;
  --navy-800: #0d1e40;
  --navy-700: #142c5c;
  --navy-600: #1c3d78;
  --navy-glow: rgba(56, 104, 190, 0.32);

  /* brand */
  --gold:      #d9a62b;
  --gold-lift: #eec158;
  --gold-deep: #a97c14;

  /* type on light cards */
  --ink:   #0d1b33;
  --ink-2: #495b76;
  --ink-3: #7a8ba6;

  /* surfaces */
  --paper:   #ffffff;
  --paper-2: #f5f8fd;
  --field:   #e9eefb;
  --line:    #dfe6f4;
  --line-2:  #c6d1e7;

  /* type on navy */
  --on-navy:   #eef3fc;
  --on-navy-2: #a9bcda;
  --on-navy-3: #7c92b6;
  --navy-card: #14274c;
  --navy-line: rgba(255, 255, 255, 0.11);

  /* semantic */
  --ok:        #1f7a4d;
  --ok-soft:   #e2f4ea;
  --bad:       #b3352a;
  --bad-soft:  #fbe7e5;
  --warn:      #92671a;
  --warn-soft: #fcf1d9;

  --f-ui:   "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-card: 20px;
  --r-ctrl: 11px;
  --shadow: 0 24px 60px -28px rgba(4, 14, 36, 0.55), 0 2px 6px rgba(4, 14, 36, 0.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 32px 24px;
  min-height: 100vh;
  font-family: var(--f-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-navy);
  background:
    radial-gradient(1100px 620px at 78% -8%, var(--navy-glow), transparent 62%),
    linear-gradient(158deg, var(--navy-800) 0%, var(--navy-900) 58%, #060e22 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

body.centred { display: flex; align-items: center; justify-content: center; }

/* ---------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------- */

.card {
  width: 100%;
  max-width: 520px;
  background: var(--paper);
  color: var(--ink);
  border: none;
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 40px 42px;
}
.card.wide { max-width: 760px; }
.card.xwide { max-width: 1180px; }

@media (max-width: 560px) { .card { padding: 30px 24px; border-radius: 16px; } }

/* ---------------------------------------------------------------------
   Split sign-in layout — the Hourglass pattern: form beside a value panel
   --------------------------------------------------------------------- */

.auth {
  width: 100%;
  max-width: 940px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 840px) { .auth { grid-template-columns: 1fr; max-width: 520px; } }

.auth-form {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 44px 44px 40px;
}
@media (max-width: 560px) { .auth-form { padding: 32px 26px; border-radius: 16px; } }

.auth-aside {
  background: var(--navy-card);
  color: var(--on-navy);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-card);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 840px) { .auth-aside { padding: 32px 28px; } }

.auth-aside h2 {
  color: var(--on-navy);
  font-size: 1.72rem;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.028em;
  text-wrap: balance;
  margin: 0 0 14px;
}
.auth-aside p { color: var(--on-navy-2); font-size: 14.5px; margin: 0 0 16px; }
.auth-aside .spacer { flex: 1; min-height: 18px; }

.aside-note {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--navy-line);
  border-radius: 13px;
  padding: 15px 17px;
  font-size: 13.5px;
  color: var(--on-navy-2);
}
.aside-note strong { color: var(--on-navy); display: block; margin-bottom: 3px; }

.aside-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.aside-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  font-size: 14px;
  color: var(--on-navy-2);
}
.aside-list li::before { content: "✓"; color: var(--gold); font-weight: 700; }

/* brand mark */

/* A client's own logo, in place of ours. Capped rather than sized,
   because a logo arrives at whatever shape the client has - a tall
   crest and a wide wordmark both have to sit here without distortion
   or pushing the form down the page. */
.tenant-logo {
  display: block;
  max-width: 200px;
  max-height: 64px;
  width: auto;
  height: auto;
  margin-bottom: 26px;
}

.brandmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  margin-bottom: 26px;
}
.brandmark .glyph {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--gold-lift), var(--gold-deep));
  color: #23180a;
  font-size: 19px;
  box-shadow: 0 6px 16px -6px rgba(217, 166, 43, 0.7);
}
.brandmark .word { font-weight: 800; font-size: 1.12rem; letter-spacing: -0.02em; color: var(--ink); }
.brandmark .word .sub {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-top: 1px;
}
.auth-aside .brandmark .word,
body.console .brandmark .word { color: var(--on-navy); }
.auth-aside .brandmark .word .sub,
body.console .brandmark .word .sub { color: var(--gold); }

/* ---------------------------------------------------------------------
   Type
   --------------------------------------------------------------------- */

h1 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0 0 12px;
  color: var(--ink);
}
h2 { font-size: 1.22rem; font-weight: 700; letter-spacing: -0.02em; margin: 32px 0 12px; color: var(--ink); }
h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.012em; margin: 0 0 6px; color: var(--ink); }

p { margin: 0 0 18px; color: var(--ink-2); }
.muted { color: var(--ink-3); font-size: 13.5px; }

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 10px;
}

a { color: var(--navy-600); font-weight: 600; text-underline-offset: 3px; }
a:hover { color: var(--navy-700); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid rgba(217, 166, 43, 0.55);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */

form { display: flex; flex-direction: column; gap: 18px; }

label { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
label .hint { font-weight: 500; font-size: 12.5px; color: var(--ink-3); }

input[type="text"], input[type="email"], input[type="tel"], select {
  font-family: var(--f-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: var(--field);
  border: 1.5px solid transparent;
  border-radius: var(--r-ctrl);
  padding: 14px 16px;
  width: 100%;
  transition: border-color .12s ease, background .12s ease;
}
input::placeholder { color: #93a4c0; font-weight: 500; }
input:focus, select:focus { background: #fff; border-color: var(--gold); outline: none; }

select { cursor: pointer; }
td select { font-size: 13px; padding: 9px 12px; min-width: 150px; }

input.code {
  font-family: var(--f-mono);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-align: center;
  padding: 16px;
  text-indent: 0.34em;
}

.btn {
  display: inline-block;
  font-family: var(--f-ui);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--r-ctrl);
  padding: 14px 24px;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.btn.primary {
  background: linear-gradient(150deg, var(--gold-lift), var(--gold));
  color: #23180a;
  box-shadow: 0 10px 24px -12px rgba(217, 166, 43, 0.9);
}
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(217, 166, 43, 1); }
.btn.ghost { background: transparent; color: var(--ink-2); border-color: var(--line-2); }
.btn.ghost:hover { background: var(--paper-2); color: var(--ink); }

.auth-aside .btn.ghost, body.console .btn.ghost { color: var(--on-navy-2); border-color: var(--navy-line); }
.auth-aside .btn.ghost:hover, body.console .btn.ghost:hover { background: rgba(255,255,255,.07); color: var(--on-navy); }

/* ---------------------------------------------------------------------
   Messages
   --------------------------------------------------------------------- */

.note {
  border-radius: 13px;
  padding: 15px 18px;
  font-size: 13.5px;
  margin: 0 0 20px;
  border: 1px solid transparent;
}
.note.bad  { background: var(--bad-soft);  border-color: #eec4bf; color: var(--bad); }
.note.ok   { background: var(--ok-soft);   border-color: #b9dfcb; color: var(--ok); }
.note.warn { background: var(--warn-soft); border-color: #ecd6a4; color: var(--warn); }
.note strong { display: block; color: var(--ink); margin-bottom: 3px; font-weight: 700; }

.note.dev { background: var(--warn-soft); border: 1.5px dashed var(--gold-deep); color: var(--ink-2); text-align: center; }
.note.dev .value {
  font-family: var(--f-mono);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--gold-deep);
  display: block;
  margin: 10px 0 6px;
}

.staging-flag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--gold-deep);
  background: var(--warn-soft);
  border: 1px solid #ecd6a4;
  margin-bottom: 20px;
}
body.console .staging-flag, .auth-aside .staging-flag {
  color: #23180a;
  background: var(--gold);
  border-color: var(--gold);
}

/* ---------------------------------------------------------------------
   Data lists
   --------------------------------------------------------------------- */

dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px 24px;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
dt { color: var(--ink-3); font-weight: 600; font-size: 12.5px; }
dd { margin: 0; font-weight: 600; color: var(--ink); }
dd.ok { color: var(--ok); }
body.console dl { border-top-color: var(--navy-line); }
body.console dt { color: var(--on-navy-3); }
body.console dd { color: var(--on-navy); }

/* ---------------------------------------------------------------------
   Workspace nav
   --------------------------------------------------------------------- */

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.nav a {
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink-2);
  padding: 9px 15px;
  border-radius: 10px;
}
.nav a:hover { background: var(--paper-2); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--navy-800); color: #fff; }
.nav .spacer { flex: 1; }

/* ---------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 15px;
  margin: 0 0 22px;
  background: var(--paper);
}
body.console .table-wrap { border-color: var(--navy-line); background: var(--navy-card); }

table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 14px; }

th {
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  padding: 13px 16px;
  white-space: nowrap;
}
td { padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
td.name { color: var(--ink); font-weight: 700; }
td.email { font-family: var(--f-mono); font-size: 12.5px; }
td.actions { text-align: right; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num { font-family: var(--f-mono); font-size: 12.5px; }
.row-off td { opacity: 0.5; }

body.console th { background: rgba(255,255,255,.04); color: var(--on-navy-3); border-bottom-color: var(--navy-line); }
body.console td { color: var(--on-navy-2); border-bottom-color: var(--navy-line); }
body.console td.name { color: var(--on-navy); }
body.console td.name a { color: var(--gold-lift); }

/* ---------------------------------------------------------------------
   Pills
   --------------------------------------------------------------------- */

.pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill.on      { color: var(--ok);   background: var(--ok-soft);   border-color: #b9dfcb; }
.pill.off     { color: var(--ink-3); background: var(--paper-2);  border-color: var(--line); }
.pill.role    { color: var(--navy-600); background: #e7edfa;      border-color: #cdd9f1; }
.pill.you     { color: var(--gold-deep); background: var(--warn-soft); border-color: #ecd6a4; }
.pill.trial   { color: var(--navy-600); background: #e7edfa;      border-color: #cdd9f1; }
.pill.paid    { color: var(--ok);   background: var(--ok-soft);   border-color: #b9dfcb; }
.pill.risk    { color: var(--warn); background: var(--warn-soft); border-color: #ecd6a4; }
.pill.stopped { color: var(--bad);  background: var(--bad-soft);  border-color: #eec4bf; }

form.inline { display: inline; }
.linkbtn {
  background: none; border: none; padding: 0 0 0 14px;
  font-family: var(--f-ui); font-size: 13px; font-weight: 700;
  color: var(--navy-600); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.linkbtn.danger { color: var(--bad); }

/* ---------------------------------------------------------------------
   Usage meters
   --------------------------------------------------------------------- */

.meter { margin: 0 0 20px; }
.meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.meter-label { font-size: 14px; font-weight: 700; color: var(--ink); }
.meter-value { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); }
.meter-track { height: 9px; background: var(--field); border-radius: 999px; overflow: hidden; }
.meter-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--navy-600), var(--navy-700)); }
.meter-fill.near { background: linear-gradient(90deg, var(--gold), var(--gold-deep)); }
.meter-fill.over { background: linear-gradient(90deg, #d0574a, var(--bad)); }

/* ---------------------------------------------------------------------
   Plan cards
   --------------------------------------------------------------------- */

.plans { display: grid; gap: 16px; margin: 0 0 8px; }
@media (min-width: 720px) { .plans { grid-template-columns: repeat(3, 1fr); } }

.plan {
  display: flex; flex-direction: column;
  background: var(--paper-2);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 24px 22px;
}
.plan.current { border-color: var(--gold); background: #fffaef; }
.plan h3 { margin: 0 0 6px; font-size: 1.08rem; font-weight: 800; }
.plan .price { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin: 0 0 2px; color: var(--ink); }
.plan .per { font-size: 12px; color: var(--ink-3); margin: 0 0 16px; font-weight: 600; }
.plan .tagline { font-size: 13px; color: var(--ink-2); margin: 0 0 16px; }
.plan ul { list-style: none; margin: 0 0 20px; padding: 0; font-size: 13.5px; color: var(--ink-2); display: flex; flex-direction: column; gap: 8px; }
.plan li { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 8px; }
.plan li::before { content: "✓"; color: var(--gold-deep); font-weight: 800; }
.plan .foot-slot { margin-top: auto; }
.plan form { display: block; }
.plan .btn { width: 100%; }
.plan .on-plan {
  display: block; text-align: center;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--gold-deep); padding: 14px 0;
}

.blockers { margin: 10px 0 0; padding-left: 1.2em; }
.blockers li { margin-bottom: 6px; }

/* ---------------------------------------------------------------------
   Support banner
   --------------------------------------------------------------------- */

.support-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  background: linear-gradient(120deg, #fff6e2, #fdedd0);
  border: 1.5px solid var(--gold);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 0 0 22px;
  font-size: 13.5px;
  color: var(--ink);
}
.support-banner .tag {
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: #23180a; background: var(--gold); border-radius: 999px; padding: 5px 11px; white-space: nowrap;
}
.support-banner .grow { flex: 1; min-width: 180px; }
.support-banner a { color: var(--gold-deep); }

/* ---------------------------------------------------------------------
   Owner console
   --------------------------------------------------------------------- */

body.console { display: block; padding: 34px 28px 60px; }
.console-shell { max-width: 1180px; margin: 0 auto; }

.console-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px;
  padding-bottom: 22px; margin-bottom: 30px;
  border-bottom: 1px solid var(--navy-line);
}
.console-head h1 { font-size: 1.6rem; margin: 0; color: var(--on-navy); }
.console-head h2 { color: var(--on-navy); }
.console-head .grow { flex: 1; }
.console-head a { font-size: 13.5px; color: var(--gold-lift); }
.console-head .muted { color: var(--on-navy-3); }

body.console h2 { color: var(--on-navy); }
body.console p, body.console .muted { color: var(--on-navy-2); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 0 0 30px; }
.stat {
  background: var(--navy-card);
  border: 1px solid var(--navy-line);
  border-radius: 15px;
  padding: 18px 20px;
}
.stat .n { font-size: 1.65rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.15; color: var(--on-navy); }
.stat .k { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-navy-3); margin-top: 6px; }
.stat.good .n { color: #52c98c; }
.stat.warn .n { color: var(--gold-lift); }
.stat.bad .n  { color: #e8796b; }

.audit td { padding: 10px 16px; font-size: 12.5px; }
.audit .when { font-family: var(--f-mono); color: var(--on-navy-3); white-space: nowrap; }
.audit .who  { font-family: var(--f-mono); color: var(--gold-lift); }

.action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; margin-top: 10px; }
.action-card {
  background: var(--navy-card);
  border: 1px solid var(--navy-line);
  border-radius: 15px;
  padding: 22px;
}
.action-card h3 { margin: 0 0 6px; font-size: 1rem; color: var(--on-navy); }
.action-card p { margin: 0 0 16px; font-size: 13px; color: var(--on-navy-3); }
.action-card form { gap: 12px; }
.action-card label { color: var(--on-navy-2); }
.action-card input, .action-card select {
  background: rgba(255,255,255,.07);
  color: var(--on-navy);
  border-color: var(--navy-line);
}
.action-card input::placeholder { color: var(--on-navy-3); }
.action-card input:focus, .action-card select:focus { background: rgba(255,255,255,.12); border-color: var(--gold); }
.action-card select option { color: var(--ink); }

body.console .note strong { color: var(--ink); }

/* ---------------------------------------------------------------------
   Footers
   --------------------------------------------------------------------- */

.foot {
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-3);
}
.foot a { color: var(--ink-3); }

/* When a workspace has its own logo, ours steps back to this. Small,
   but not hidden - the client's customers see this page, and it is the
   only place the product is named once branding is on. */
.powered { display: inline-block; margin-top: 8px; font-size: 11.5px; letter-spacing: .02em; }
.powered a { color: var(--gold-deep); font-weight: 700; text-decoration: none; }
.powered a:hover { text-decoration: underline; }
.auth-aside .foot { border-top-color: var(--navy-line); color: var(--on-navy-3); }

/* ---------------------------------------------------------------------
   Paid add-ons in the Control Centre

   One card per extra we sell, each with its own price box, because the
   price that bills is per client and not per catalogue.
   --------------------------------------------------------------------- */

.addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 18px 0 8px;
}

.addon-card {
  background: var(--paper-2);
  border: 1px solid var(--field);
  border-radius: 14px;
  padding: 18px 18px 16px;
}

.addon-card h4 { margin: 0 0 6px; font-size: 15px; }
.addon-card p  { margin: 0 0 10px; font-size: 13px; }
.addon-card label { display: block; margin-bottom: 8px; font-size: 13px; }
.addon-card input { width: 100%; }

.inline-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.inline-form label { margin: 0; font-size: 12px; }