/* ─── Surcharge App — Header Consistency Patch ──────────────────────────────
   Makes the surcharges app header match the CW Calc and Quote Generator style.
   Inject as <link rel="stylesheet" href="/static/surcharge-header-patch.css">
   in the surcharges template head section.
──────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;900&family=IBM+Plex+Mono:wght@400;500&family=Barlow:wght@400;500;600&display=swap');

/* ── Override header ── */
header {
  background: #1a1a1a !important;
  border-bottom: 3px solid #e8a020 !important;
  padding: 0 32px !important;
  height: 58px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  position: sticky !important;
  top: 36px !important; /* account for usft-nav */
  z-index: 99 !important;
  box-shadow: none !important;
}

/* ── Logo ── */
header .logo {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #e8a020 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* Hide the triangle icon — use text style instead */
header .logo .logo-icon {
  display: none !important;
}

/* Add "Steel" subtitle after logo text */
header .logo::after {
  content: ' Manager';
  font-weight: 400;
  color: #e8e4dc;
  font-size: 14px;
  letter-spacing: 1px;
  margin-left: 8px;
  font-family: 'IBM Plex Mono', monospace;
}

/* ── Right side of header ── */
header .hdr-right {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* ── Market pill ── */
.market-pill {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #888 !important;
  background: transparent !important;
  border: 1px solid #333 !important;
  border-radius: 0 !important;
  padding: 4px 10px !important;
}

.market-pill.live {
  color: #50c878 !important;
  border-color: rgba(80,200,120,0.4) !important;
  background: rgba(80,200,120,0.05) !important;
}

/* ── Agent button ── */
.agent-btn {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  background: transparent !important;
  color: #e8a020 !important;
  border: 1px solid #e8a020 !important;
  border-radius: 0 !important;
  padding: 6px 16px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: background 0.15s !important;
}

.agent-btn:hover {
  background: rgba(232,160,32,0.1) !important;
}

.agent-btn.running {
  color: #888 !important;
  border-color: #444 !important;
}

/* ── Section titles ── */
.sec-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #e8a020 !important;
  border-bottom: 1px solid #333 !important;
  padding-bottom: 6px !important;
  margin-bottom: 16px !important;
  margin-top: 24px !important;
}

/* ── Form section labels ── */
.form-section-label {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #666 !important;
  margin-bottom: 10px !important;
  margin-top: 18px !important;
}

/* ── Field labels ── */
.field label {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.5px !important;
  color: #888 !important;
  text-transform: uppercase !important;
}

/* ── Inputs ── */
.field input,
.field select {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 13px !important;
  background: #111 !important;
  border: 1px solid #333 !important;
  border-radius: 0 !important;
  color: #e8e4dc !important;
}

.field input:focus,
.field select:focus {
  border-color: #e8a020 !important;
  outline: none !important;
}

/* ── Calculate button ── */
.calc-btn {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  background: #e8a020 !important;
  color: #000 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}

.calc-btn:hover { background: #f0b030 !important; }
.calc-btn:disabled { background: #555 !important; color: #888 !important; }

/* ── Verdict badge ── */
.verdict-badge {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  border-radius: 0 !important;
}

/* ── History items ── */
.hi-customer {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 1px !important;
}

.hi-meta {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
}

/* ── Copy button ── */
.copy-btn {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}

/* ── Toast ── */
.toast {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  border-radius: 0 !important;
}

/* ── Body font override ── */
body {
  font-family: 'Barlow', sans-serif !important;
}