/* ============================================================================================================
   Review AI — shared theme, unified with the sibling Hahn Loeser "Client Intake Portal":
   light grey page, white cards, deep legal navy, corporate orange accent rule, firm artwork in the header.
   Loaded by every page AFTER its own <style>, so these tokens and the header/footer chrome are the one source
   of truth. Logos and the header artwork come from /api/brand/* (Admin → Settings → Logos, replaceable live).
   ============================================================================================================ */
:root {
  --brand: #14365c;        /* deep legal navy (header, footer, headings, primary buttons) */
  --brand-2: #1f5fa6;      /* lighter navy-blue (links, focus, active items) */
  --orange: #d47e00;       /* corporate orange — Pantone 145 (accent rules, highlights) */
  --orange-on-dark: #f0902a;
  /* page tokens every rule in the app already uses */
  --bg: #f4f5f7;
  --panel: #ffffff;
  --panel2: #f1f4f8;
  --text: #1d2733;
  --muted: #5b6b7b;
  --accent: #1f5fa6;
  --border: #d9dee5;
  --ok: #1f7a4d;
  --warn: #9a5b00;
  --err: #b3261e;
  --hover: #eaf1f8;        /* row / menu hover */
  --tint: #f3f7fc;         /* faint blue tint for highlighted blocks */
}
body { background: var(--bg); color: var(--text); }
a { color: var(--brand-2); }

/* ---------------------------------------------------------------- header: navy band + firm artwork */
body > header {
  /* Same construction as the Intake Portal: the artwork shows on the right, a navy→transparent overlay keeps the
     left solid navy so the logo and title stay legible. */
  background-color: var(--brand);
  background-image: linear-gradient(90deg, var(--brand) 0%, var(--brand) 58%, rgba(20, 54, 92, 0) 74%), url('/api/brand/banner');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center 82%;
  background-size: cover, cover;
  border-bottom: 3px solid var(--orange) !important;
  color: #fff;
  /* controls inside the header read on navy */
  --text: #ffffff;
  --muted: rgba(255, 255, 255, .82);
  --border: rgba(255, 255, 255, .35);
  --panel2: rgba(255, 255, 255, .12);
}
body > header h1 {
  color: #fff !important; background: none !important; -webkit-text-fill-color: #fff !important;
  font-weight: 600 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
body > header .hlogo { height: 56px; width: auto; max-width: 220px; object-fit: contain; object-position: left center; flex: none; }
body > header .hdiv { background: rgba(255, 255, 255, .5) !important; }
body > header .mode, body > header .user, body > header .hlabel { color: rgba(255, 255, 255, .85) !important; }
/* pill buttons, as the Intake Portal's header */
body > header a.btn, body > header button.link {
  background: rgba(255, 255, 255, .1) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .35) !important;
  border-radius: 999px !important; padding: 7px 14px !important; font-size: 13px !important;
}
body > header a.btn:hover, body > header button.link:hover { background: rgba(255, 255, 255, .2) !important; }
body > header select { background: #fff !important; color: var(--brand) !important; border: 1px solid rgba(255, 255, 255, .6) !important; }
body > header select option { color: #1d2733; background: #fff; }

/* ---------------------------------------------------------------- footer band (copyright / build) */
.copyright, footer.site {
  background: var(--brand) !important; color: rgba(255, 255, 255, .85) !important;
  border-top: 2px solid var(--orange) !important;
}
.copyright a, footer.site a, footer.site #disc a { color: #ffd9a8 !important; }

/* ---------------------------------------------------------------- shared components */
button.primary, .btn.primary { background: var(--brand); color: #fff; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--brand-2); outline-offset: -1px; border-color: var(--brand-2); }
::selection { background: #cfe0f5; }

/* modal backdrops: navy-tinted like the Intake Portal */
.cbg, .modal-bg { background: rgba(20, 40, 70, .45) !important; }