/* NextStep ME — internal ERP. Dense, quiet, legible at 3pm on the fortieth screen.
   Bootstrap 5 does the components; this does the identity.
   Palette sampled from the NextStep ME mark: green #065130, tan #D0B276. */

:root {
  --brand:      #065130;   /* NextStep green — sidebar, primary actions */
  --brand-dark: #04381f;
  --tan:        #d0b276;   /* NextStep tan — used sparingly, for what is current */
  --tan-soft:   #f0e4cd;

  --ink:      #0d2419;   /* headings: near-black, warmed toward the brand green */
  --ink-soft: #5f6e66;
  --line:     #e2e7e4;
  --paper:    #f6f8f7;
  --card:     #ffffff;
  --accent:   var(--brand);
  --warn:     #b45309;
  --stop:     #b42318;
  --go:       #067647;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

body {
  font-family: "Inter Tight", system-ui, -apple-system, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
}

/* ---------- Shell ---------- */
.shell { display: flex; min-height: 100vh; }

.rail {
  width: 232px; flex: 0 0 232px;
  background: var(--brand); color: #cfe0d6;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
/* The logo sits on white. It has to: the mark is brand green, and green-on-green
   is invisible. A white plate is the honest treatment, not a workaround. */
.rail-brand { background: #fff; padding: 1rem 1.1rem .85rem; }
.rail-brand img { display: block; width: 100%; max-width: 150px; height: auto; }
.rail-brand small {
  display: block; margin-top: .5rem; color: var(--ink-soft);
  font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 600;
}

.rail-nav { display: flex; flex-direction: column; padding: .5rem .6rem; gap: 2px; flex: 1; }
.rail-nav { padding-top: .75rem; }
.rail-nav a {
  color: #cfe0d6; text-decoration: none; padding: .5rem .65rem;
  border-radius: 6px; font-size: .9rem;
}
.rail-nav a:hover { background: rgba(255,255,255,.09); color: #fff; }
/* Tan marks the page you are on — the one place the second brand colour earns its keep. */
.rail-nav a.on { background: var(--tan); color: var(--brand-dark); font-weight: 600; }

.rail-user { border-top: 1px solid rgba(255,255,255,.09); padding: .9rem 1.1rem; }
.rail-user .who strong { color: #fff; display: block; font-size: .85rem; }
.rail-user .role {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tan);
}
.rail-user .signout { color: #a9c3b4; font-size: .78rem; text-decoration: none; }
.rail-user .signout:hover { color: #fff; text-decoration: underline; }

.content { flex: 1; padding: 1.6rem 2rem 4rem; max-width: 1280px; }

/* ---------- Type ---------- */
h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; font-weight: 600; }
.eyebrow {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-soft); font-weight: 600;
}
.page-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.25rem; }
.muted { color: var(--ink-soft); }

/* Money and identifiers are read by column, not by word. */
.num, .code, td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: right; }
.code { font-size: .82rem; letter-spacing: -.02em; }

/* ---------- Cards / tables ---------- */
.card { border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.card-header {
  background: transparent; border-bottom: 1px solid var(--line);
  padding: .75rem 1rem; font-weight: 600; font-size: .92rem;
  display: flex; justify-content: space-between; align-items: center;
}
.table { font-size: .88rem; margin: 0; }
.table > thead th {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-soft); font-weight: 600; border-bottom: 1px solid var(--line);
}
.table > tbody td { vertical-align: middle; border-color: #eef1f5; }
.table-hover > tbody > tr:hover > * { background: #f1f6f2; }

.kpi { padding: .9rem 1rem; }
.kpi .label { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); font-weight: 600; }
.kpi .value { font-family: var(--mono); font-size: 1.35rem; font-weight: 500; margin-top: .15rem; }
.kpi .value.small { font-size: 1.05rem; }

.empty { padding: 2rem 1rem; text-align: center; color: var(--ink-soft); font-size: .9rem; }

/* ---------- Status pills ---------- */
.pill {
  display: inline-block; padding: .18rem .5rem; border-radius: 999px;
  font-size: .7rem; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.pill-draft      { background: #eef1f5; color: #4a5a6b; }
.pill-pending    { background: #fff5e6; color: var(--warn); border-color: #f6e0bd; }
.pill-released   { background: #e8f1fd; color: #1d4ed8; border-color: #cfe0fa; }
.pill-progress   { background: #e8f1fd; color: #1d4ed8; border-color: #cfe0fa; }
.pill-ordered    { background: #ede9fe; color: #6d28d9; border-color: #ddd4fb; }
.pill-invoiced   { background: #e6f4ef; color: var(--go); border-color: #c6e6d8; }
.pill-completed  { background: var(--go); color: #fff; }

/* ---------- Signature: the workflow rail ----------
   Seven stages, always visible, always honest about what's blocking the next one. */
.flow { display: flex; gap: 0; padding: 1rem 1rem .5rem; overflow-x: auto; }
.flow-step { flex: 1; min-width: 92px; position: relative; padding-right: .5rem; }
.flow-step .bar {
  height: 4px; border-radius: 2px; background: #e3e8ee; margin-bottom: .45rem;
}
.flow-step.done .bar { background: var(--go); }
.flow-step.now  .bar { background: var(--accent); }
.flow-step.now  .name { color: var(--ink); font-weight: 600; }
.flow-step .name { font-size: .72rem; color: #93a1b0; line-height: 1.25; display: block; }
.flow-step.done .name { color: var(--ink-soft); }

.blocker {
  border-top: 1px solid var(--line); padding: .75rem 1rem;
  background: #fffbf3; font-size: .85rem;
}
.blocker ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.blocker li { color: var(--warn); }

.gate-clear { border-top: 1px solid var(--line); padding: .75rem 1rem; background: #f2faf6; font-size: .85rem; }

/* ---------- Forms ---------- */
.form-label { font-size: .78rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .2rem; }
.form-control, .form-select { font-size: .88rem; border-color: var(--line); }
.form-control:focus, .form-select:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(6,81,48,.13);
}
.btn-primary {
  background: var(--accent); border-color: var(--accent); font-weight: 500; font-size: .88rem;
}
.btn-primary:hover, .btn-primary:focus { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-outline-secondary { border-color: var(--line); color: var(--ink-soft); font-size: .88rem; }
.btn-sm { font-size: .8rem; }

/* Keyboard users get a visible target. */
a:focus-visible, button:focus-visible, .form-control:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--brand); }
.login-card { width: 100%; max-width: 380px; background: #fff; border-radius: 12px; padding: 2rem; }
.login-card .logo { display: block; width: 190px; height: auto; margin: 0 auto 1.5rem; }
.login-card h1 { font-size: 1.25rem; margin-bottom: .25rem; }

@media (max-width: 820px) {
  .shell { flex-direction: column; }
  .rail { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .rail-nav { flex-direction: row; flex-wrap: wrap; }
  .content { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Every amount in this system is Saudi Riyals. The label says so once, next to
   the input, so nobody has to wonder what unit they're typing in. */
.cur {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  color: var(--brand-dark); background: var(--tan-soft);
  padding: .05rem .3rem; border-radius: 3px; margin-left: .25rem;
  letter-spacing: .02em;
}

/* Bootstrap's .table-active grey says nothing. Tan says "this is the one chosen". */
.table-active > * { background: var(--tan-soft) !important; }
.pill-invoiced { background: var(--tan-soft); color: var(--brand-dark); border-color: #e3d2ab; }
.pill-completed { background: var(--brand); color: #fff; }