/* ══════════════════════════════════════════════════════════════
   Glasshouse Admin — Design System
   IPME Navy · Electrical Amber · gh-* prefix
   Same token family as truaxis-admin.css / time-admin.css (Sora,
   blue-primary + red-for-errors-only, softer 7–10px radius scale) —
   own file, own values, no shared CSS between codebases.
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap');

:root {
  /* Brand — matches --ta-blue/--ta-blue-hover exactly (same navy family) */
  --gh-blue:      #1a3a6e;
  --gh-blue-lt:   #1e4a88;
  --gh-amber:     #d97706;

  /* Status */
  --gh-green:     #1a7f4e;
  --gh-red:       #cf1b28;   /* errors/destructive only, matches --ta-red */
  --gh-teal:      #0d9488;
  --gh-purple:    #6d28d9;

  /* Surfaces — --gh-bg/--gh-border are identical to --ta-bg/--ta-border */
  --gh-bg:        #f0f2f5;
  --gh-surface:   #ffffff;
  --gh-border:    #e2e5e9;
  --gh-border-dark: #cdd0d6;
  --gh-text:      #1e2433;
  --gh-muted:     #666666;
  --gh-hint:      #999999;

  /* Status fills */
  --s-received-bg:  #f0f2f5; --s-received-tx:  #6b7894;
  --s-submitted-bg: #d0ede8; --s-submitted-tx: #0a5c4d;
  --s-awarded-bg:   #fef3c7; --s-awarded-tx:   #92400e;
  --s-completed-bg: #d4eddf; --s-completed-tx: #0a5c2e;
  --s-lost-bg:      #fde8e8; --s-lost-tx:      #8b1a1a;
  --s-no-bid-bg:    #ede9fe; --s-no-bid-tx:    #5b21b6;
  --s-review-bg:    #fef3c7; --s-review-tx:    #92400e;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Sora', system-ui, -apple-system, sans-serif;
  background: var(--gh-bg);
  color: var(--gh-text);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ─── Top Bar ──────────────────────────────────────────────── */
header.gh-topbar {
  background: var(--gh-surface);
  border-bottom: 1px solid var(--gh-border);
  height: 65px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  flex-shrink: 0;
}

.gh-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
}

.gh-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gh-brand img { height: 35px; }

.gh-topbar-divider {
  width: 1px;
  height: 30px;
  background: var(--gh-border);
  margin: 0 12px;
  flex-shrink: 0;
}

.gh-page-title {
  font-size: 13px;
  font-weight: 400;
  color: var(--gh-muted);
}

.gh-topbar-user {
  font-size: 12px;
  color: var(--gh-muted);
}

/* ─── Admin Nav ────────────────────────────────────────────── */
nav.gh-admin-nav {
  background: #e8eef8;
  border-bottom: 1px solid #ccd8ee;
  height: 42px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: sticky;
  top: 65px;
  z-index: 190;
}

.gh-admin-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
}

.gh-admin-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

a.gh-admin-nav-link {
  font-size: 13px;
  font-weight: 500;
  color: rgba(26,58,92,.65);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: color .12s, background .12s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
a.gh-admin-nav-link svg {
  flex-shrink: 0;
  opacity: .7;
}
a.gh-admin-nav-link:hover svg,
a.gh-admin-nav-link.active svg { opacity: 1; }

a.gh-admin-nav-link:hover  { color: var(--gh-blue); background: rgba(26,58,92,.07); }
a.gh-admin-nav-link.active { color: var(--gh-blue); background: rgba(26,58,92,.11); font-weight: 600; }

button.gh-admin-nav-logout {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(26,58,92,.5);
  background: transparent;
  border: 1px solid rgba(26,58,92,.2);
  border-radius: 6px;
  padding: 5px 11px;
  cursor: pointer;
  font-family: inherit;
  transition: color .12s, border-color .12s, background .12s;
}

button.gh-admin-nav-logout:hover { color: var(--gh-blue); border-color: rgba(26,58,92,.45); background: rgba(26,58,92,.06); }

/* ─── Admin Sub-Nav (second line, active group's children) ──── */
nav.gh-admin-subnav {
  background: #f4f7fc;
  border-bottom: 1px solid #dbe4f3;
  height: 36px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: sticky;
  top: 107px;
  z-index: 189;
}

.gh-admin-subnav-inner {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: 0 20px 0 32px;
}

a.gh-admin-subnav-link {
  font-size: 12px;
  font-weight: 500;
  color: rgba(26,58,92,.55);
  text-decoration: none;
  padding: 5px 11px;
  border-radius: 5px;
  transition: color .12s, background .12s;
}

a.gh-admin-subnav-link:hover  { color: var(--gh-blue); background: rgba(26,58,92,.06); }
a.gh-admin-subnav-link.active { color: var(--gh-blue); background: rgba(26,58,92,.1); font-weight: 600; }

/* ─── Page ─────────────────────────────────────────────────── */
.gh-page {
  padding: 14px 18px;
  background: var(--gh-bg);
  min-height: calc(100vh - 88px);
}

/* ─── Card ─────────────────────────────────────────────────── */
.gh-card {
  background: var(--gh-surface);
  border: 1px solid var(--gh-border);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

/* ─── Section Header ───────────────────────────────────────── */
.gh-sh {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  background: var(--gh-blue);
  padding: 8px 14px;
  border-radius: 6px;
  margin-bottom: 12px;
  display: inline-block;
}

/* ─── Buttons ──────────────────────────────────────────────── */
.gh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
  white-space: nowrap;
  font-family: inherit;
  text-decoration: none;
}
.gh-btn:active { transform: scale(.98); }

.gh-btn-primary   { background: var(--gh-blue);  color: #fff; border-color: var(--gh-blue); }
.gh-btn-primary:hover { background: var(--gh-blue-lt); border-color: var(--gh-blue-lt); }

.gh-btn-secondary { background: transparent; color: var(--gh-muted); border-color: var(--gh-border-dark); }
.gh-btn-secondary:hover { color: var(--gh-text); border-color: #aaa; }

.gh-btn-amber { background: var(--gh-amber); color: #fff; border-color: var(--gh-amber); }
.gh-btn-amber:hover { background: #b45d05; }

.gh-btn-danger { background: var(--gh-red); color: #fff; border-color: var(--gh-red); }
.gh-btn-danger:hover { background: #a8151f; border-color: #a8151f; }

.gh-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ─── Status Pills ─────────────────────────────────────────── */
.status-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.status-pill.received  { background: var(--s-received-bg);  color: var(--s-received-tx);  }
.status-pill.submitted { background: var(--s-submitted-bg); color: var(--s-submitted-tx); }
.status-pill.awarded   { background: var(--s-awarded-bg);   color: var(--s-awarded-tx);   }
.status-pill.completed { background: var(--s-completed-bg); color: var(--s-completed-tx); }
.status-pill.lost      { background: var(--s-lost-bg);      color: var(--s-lost-tx);      }
.status-pill.no_bid, .status-pill.no-bid { background: var(--s-no-bid-bg); color: var(--s-no-bid-tx); }
.status-pill.needs_review, .status-pill.needs-review { background: var(--s-review-bg); color: var(--s-review-tx); }

/* ─── Table ────────────────────────────────────────────────── */
.gh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.gh-table thead th {
  position: sticky;
  top: 0;
  background: #f8f9fb;
  z-index: 1;
  box-shadow: 0 2px 0 var(--gh-border);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  padding: 9px 10px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--gh-muted);
}

.gh-table thead th:hover {
  background: var(--gh-bg);
}

.gh-table thead th::after {
  content: ' ↕';
  color: var(--gh-hint);
  font-size: 10px;
}

.gh-table thead th.sort-asc::after  { content: ' ↑'; color: var(--gh-blue); }
.gh-table thead th.sort-desc::after { content: ' ↓'; color: var(--gh-blue); }

/* Opt out of the sort affordance for a .gh-table whose headers are not
   click-to-sort (e.g. a short fixed-order picker grid inside a modal) —
   the ↕ glyph otherwise promises an interaction that isn't wired. */
.gh-table.no-sort thead th { cursor: default; }
.gh-table.no-sort thead th:hover { background: transparent; }
.gh-table.no-sort thead th::after { content: none; }

.gh-table tbody tr {
  border-bottom: 1px solid var(--gh-border);
  cursor: pointer;
  transition: background .1s;
}

.gh-table tbody tr:hover { background: #fafbfc; }

.gh-table td {
  padding: 8px 10px;
  vertical-align: middle;
}

/* ─── Metric Cards ─────────────────────────────────────────── */
.gh-metric-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.gh-metric-card {
  background: var(--gh-surface);
  border: 1px solid var(--gh-border);
  border-radius: 10px;
  padding: 14px 18px;
}

.gh-metric-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gh-muted);
  margin-bottom: 6px;
}

.gh-metric-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--gh-text);
  line-height: 1;
}

.gh-metric-sub {
  font-size: 11px;
  color: var(--gh-muted);
  margin-top: 4px;
}

/* ─── Form Elements (incl. <select> listboxes) ────────────── */
input, select, textarea {
  font-family: 'Sora', system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  color: var(--gh-text);
  background: var(--gh-surface);
  border: 1px solid var(--gh-border);
  border-radius: 7px;
  padding: 8px 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

input::placeholder, textarea::placeholder { color: var(--gh-hint); }

input:focus, select:focus, textarea:focus {
  border-color: var(--gh-blue);
  box-shadow: 0 0 0 3px rgba(26, 58, 110, .1);
}

textarea { resize: vertical; min-height: 80px; }

input[type="number"] { width: 70px; }

select {
  cursor: pointer;
  /* Custom chevron so the native arrow doesn't clash with the taller,
     more-rounded field — same treatment across every <select> app-wide,
     no per-page markup needed. */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23666666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

/* ─── Two-column layout ────────────────────────────────────── */
.gh-two-col {
  display: grid;
  grid-template-columns: 65fr 35fr;
  gap: 16px;
  margin-bottom: 16px;
}

/* ─── Spinner ──────────────────────────────────────────────── */
.gh-spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--gh-border);
  border-top-color: var(--gh-blue);
  border-radius: 50%;
  animation: gh-spin .7s linear infinite;
  display: inline-block;
}

@keyframes gh-spin { to { transform: rotate(360deg); } }

/* ─── Utilities ────────────────────────────────────────────── */
.gh-flex   { display: flex; align-items: center; gap: 8px; }
.gh-right  { margin-left: auto; }
.gh-muted  { color: var(--gh-muted); }
.gh-green  { color: var(--gh-green); }
.gh-red    { color: var(--gh-red); }
.gh-amber  { color: var(--gh-amber); }
.gh-bold   { font-weight: 600; }
.gh-mono   { font-family: monospace; }
.gh-mb-0   { margin-bottom: 0; }
.gh-mt-8   { margin-top: 8px; }
.gh-gap-4  { display: flex; gap: 4px; }

/* ── GH-DOCS-001 M5: contextual help icon ──────────────────────────────────
   A small (?) linking into the procedures section at the exact heading that
   explains the thing in front of the user. Lives here rather than docs.css
   because it appears on ordinary app pages (BOM reason dialog, PO, AP
   invoices, materials) that don't load the docs stylesheet. */
.doc-help-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; margin-left: 5px;
  border: 1px solid var(--gh-border); background: var(--gh-surface);
  color: var(--gh-muted); font-size: 10px; font-weight: 700; line-height: 1;
  text-decoration: none; vertical-align: middle; cursor: help; flex-shrink: 0;
}
.doc-help-icon:hover { border-color: var(--gh-blue); color: var(--gh-blue); background: var(--gh-bg); }

/* GH-SCOPE-AWARD-001: per-scope award strip on the SOV scope tabs. */
.scope-award-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 14px;
  background: var(--gh-bg); border: 1px solid var(--gh-border); border-radius: 6px;
}

/* Shared inbound-email body viewer (admin/components/email-body.js).
   The frame is sandboxed without allow-scripts/allow-same-origin, so its
   height can't be measured from here — it's a fixed-height scrolling pane. */
.gh-email-frame {
  width: 100%; display: block; background: #fff;
  border: 1px solid var(--gh-border); border-radius: 5px;
}
.gh-email-text {
  white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word;
  font-size: 11.5px; line-height: 1.5; background: #fff;
  border: 1px solid var(--gh-border); border-radius: 5px;
  padding: 10px; margin: 0; overflow-y: auto;
}