/* =====================================================================
   NESR BRAND LAYER
   Loaded after app.css, so everything here wins.

   Palette read from the NESR corporate site:
     · forest green chrome bar carrying the white winged wordmark
     · near-black secondary bar and footer
     · the same green reused for key figures on white
     · a warm gold appears only in the "What We Do" tile, so it is used
       here sparingly, on the document signature rule

   ---------------------------------------------------------------------
   ADD THE REAL LOGO  (one command on the server)
   ---------------------------------------------------------------------
     mkdir -p public/assets/img && cd public/assets/img
     wget -O nesr-logo.png      https://www.nesr.com/img/logo.png
     wget -O nesr-logo-dark.png https://www.nesr.com/img/inner-logo.png
     wget -O nesr-logo-mark.png https://www.nesr.com/img/footer_logo.png

   The white winged logo sits on the green bar, the dark variant on the
   white document cover. If the files are absent the application draws a
   typographic wordmark in the same proportions, so nothing breaks.

   If the greens need to be exact, sample them with an eyedropper from a
   screenshot of nesr.com and replace the two values marked "sampled"
   below. Nothing else in the codebase needs to change.
   ===================================================================== */

:root {
  /* ---- sampled from the NESR site ---------------------------------- */
  --nesr-green:       #1e7a3d;
  --nesr-black:       #1a1d1c;

  /* ---- derived ------------------------------------------------------ */
  --nesr-green-deep:  #145a2c;
  --nesr-green-lift:  #2a9150;
  --nesr-green-wash:  #eaf3ec;
  --nesr-green-edge:  #c2ddca;
  --nesr-gold:        #c9a227;

  /* ---- remap the application palette onto the brand ----------------- */
  --ink:        #15211b;
  --ink-2:      #1f2f26;
  --accent:     var(--nesr-green);
  --accent-dim: rgba(30, 122, 61, .12);
  --steel:      #3f5148;
  --steel-mid:  #62756b;
  --steel-soft: #93a49a;
  --rule:       #c8d3cc;
  --rule-soft:  #dfe7e2;
  --paper:      #eef1ef;
  --paper-2:    #f6f9f7;
}

/* the drafting grid picks up a faint green cast */
body {
  background-image:
    linear-gradient(rgba(30, 122, 61, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 122, 61, .045) 1px, transparent 1px);
}

/* ============================================================ masthead
   NESR leads with a solid green bar carrying the white logo.
   ==================================================================== */
.masthead {
  background: var(--nesr-green);
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .14);
}
.masthead-inner { min-height: 64px; }
.masthead-inner > * + * { margin-left: 24px; }

/* explicit margins rather than flex gap, so the wordmark spacing survives
   older rendering engines and PDF exporters as well as modern browsers */
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand > * + * { margin-left: 16px; }
.brand .logo-img { height: 38px; width: auto; display: block; }
.brand.has-logo .logo-text { display: none; }

/* typographic stand-in, proportioned like the real wordmark */
.brand .logo-text { display: block; line-height: 1; }
.brand .logo-text b {
  display: block; color: #fff; font-weight: 800;
  font-size: 25px; letter-spacing: .10em; margin-right: -.10em;
}
.brand .logo-text i {
  display: block; font-style: normal; color: rgba(255, 255, 255, .8);
  font-size: 7px; letter-spacing: .022em; margin-top: 4px; white-space: nowrap;
}

.brand .rule { flex: 0 0 1px; width: 1px; height: 32px; background: rgba(255, 255, 255, .38); }
.brand .module { font-size: 12px; color: rgba(255, 255, 255, .8); line-height: 1.3; }
.brand .module b {
  display: block; color: #fff; font-weight: 700;
  font-size: 12.5px; letter-spacing: .055em; text-transform: uppercase;
}

/* NESR set their navigation in bold uppercase, so this follows the brand */
.masthead nav { gap: 4px; }
.masthead nav a {
  color: rgba(255, 255, 255, .9);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 2px;
}
.masthead nav a:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.masthead nav a.on { background: #fff; color: var(--nesr-green-deep); }

.whoami {
  color: rgba(255, 255, 255, .72);
  border-left: 1px solid rgba(255, 255, 255, .28);
}
.whoami b { color: #fff; }

/* ======================================================== page headings */
.page-head { border-bottom: 1px solid var(--rule); padding-bottom: 14px; }
.page-head h1 { color: var(--ink); font-weight: 700; }

.panel > h2 {
  background: var(--nesr-green-wash);
  border-bottom: 1px solid var(--nesr-green-edge);
  border-left: 3px solid var(--nesr-green);
  border-radius: 0 4px 0 0;
  color: var(--nesr-green-deep);
}
.panel > h2 .tag { color: var(--steel-mid); }

/* ============================================================== buttons */
.btn:hover { border-color: var(--nesr-green); }
.btn.primary {
  background: var(--nesr-green); border-color: var(--nesr-green); color: #fff;
  font-weight: 650; letter-spacing: .02em;
}
.btn.primary:hover { background: var(--nesr-green-deep); border-color: var(--nesr-green-deep); }

/* ========================================================== dark stage
   The schematic band echoes the near-black NESR footer rather than the
   green bar, so the instrument readouts stay legible.
   ==================================================================== */
.darkband {
  background: var(--nesr-black);
  background-image: radial-gradient(circle at 15% -10%,
                    rgba(30, 122, 61, .30) 0%, var(--nesr-black) 58%);
  border: 1px solid #2f3a35;
}
.darkband header { border-bottom-color: rgba(255, 255, 255, .1); }
.darkband .tabs button {
  font-weight: 650; letter-spacing: .04em; text-transform: uppercase; font-size: 10.5px;
}
.darkband .tabs button[aria-selected="true"] {
  background: var(--nesr-green-lift); border-color: var(--nesr-green-lift); color: #fff;
}

/* =========================================================== job cards */
.jobcard { border-top: 3px solid var(--nesr-green); }
.jobcard:hover { border-color: var(--nesr-green); border-top-color: var(--nesr-green); }
.jobcard .hd { background: var(--paper-2); }
.jobcard .dosno { color: var(--nesr-green); font-weight: 600; }
.jobcard .kv b { color: var(--ink); }

/* ====================================================== calc internals */
table.calc .symbol { color: var(--nesr-green-deep); background: var(--accent-dim); }
.formula { border-left-color: var(--nesr-green); background: var(--nesr-green-wash); }
.assumption-chip b { color: var(--nesr-green-deep); }
.assumption-chip:hover { border-color: var(--nesr-green); }
table.grid th { background: var(--nesr-green-wash); color: var(--nesr-green-deep); }
table.grid tr.hi td { background: var(--accent-dim); }

/* QA status colours stay semantic and deliberately distinct from the
   brand green, so a green masthead is never read as a passing check */
.qarow.pass { border-left-color: #2d7d4f; }
.pill.pass  { background: #e6f2ea; color: #1f6340; }
.verdict.ok { background: #1f6340; }

/* ==================================================== document styling */
.sheet { border-top: 6px solid var(--nesr-green); }
.doc-head { border-bottom: 3px solid var(--nesr-green); align-items: center; }
.doc-head .logo-img { height: 52px; width: auto; }
.doc-head .logo { color: var(--nesr-black); }
.doc-head .logo b {
  display: block; font-size: 34px; font-weight: 800; letter-spacing: .09em;
  color: var(--nesr-black); line-height: 1;
}
.doc-head .logo small { color: var(--steel-mid); letter-spacing: .05em; }
.doc-head .ref b { color: var(--nesr-green-deep); }
.doc-title { color: var(--nesr-black); }
h2.sec { border-bottom-color: var(--nesr-green-edge); }
h2.sec .secno { color: var(--nesr-green); }
h3.sub { color: var(--nesr-green-deep); }
table.doc th { background: var(--nesr-green-wash); color: var(--nesr-green-deep); }
.stamp.ok { border-color: var(--nesr-green); color: var(--nesr-green-deep); }
.signbox { border-top: 3px solid var(--nesr-gold); }
.footnote { border-top: 2px solid var(--nesr-green); }

@media print {
  .sheet { border-top: 6px solid var(--nesr-green); }
}