/* ==========================================================================
   SF Books — white-label skin for the self-hosted Bigcapital instance
   at acct.sf-listing-mirror.us.

   Injected by nginx sub_filter before </head>. Nothing here is a fork: no
   container is rebuilt and no file inside Bigcapital is patched, so
   `docker compose pull` cannot wipe it.

   Palette sampled directly from the Southern Fabric Accounting artwork
   rather than guessed:
       green  #0C372E   the S of the monogram, and the wordmark
       gold   #B28842   the F of the monogram, and the ACCOUNTING rule
   The sister mark, Southern Fabric Listing Mirror, is navy #06294E with a
   lighter gold #D2A865 — deliberately a different colourway, so the ledger
   and the operational app are never mistaken for one another at a glance.
   ========================================================================== */

:root {
  --sfb-green: #0C372E;
  --sfb-green-soft: #1C5343;
  --sfb-gold: #B28842;
  --sfb-gold-dark: #96702F;
  --sfb-cream: #F7F6F3;
  --sfb-ink: #22312C;
}

/* --------------------------------------------------------------------------
   1. The logo.

   Bigcapital renders its mark as a Blueprint icon span containing an inline
   SVG with hardcoded width/height. The SVG cannot be replaced from CSS, so it
   is zeroed out and our artwork painted into the same span via ::after — the
   approach flip-tracker arrived at for the same problem.
   -------------------------------------------------------------------------- */
.bp4-icon-bigcapital,
.bp4-icon-mini-bigcapital {
  position: relative !important;
  display: inline-block !important;
}

.bp4-icon-bigcapital > svg,
.bp4-icon-mini-bigcapital > svg,
svg[data-icon="bigcapital-alt"] {
  opacity: 0 !important;
}

.bp4-icon-bigcapital::after,
.bp4-icon-mini-bigcapital::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/sfbooks/sf-accounting-mark.png") center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   2. Login / signup.

   `body.authentication` is upstream's own class on the auth routes, so this
   whole block is inert everywhere else.
   -------------------------------------------------------------------------- */
body.authentication {
  background: var(--sfb-cream) !important;
}

/* The login splash gets the FULL lockup — monogram plus the "Southern Fabric
   Accounting" wordmark. The bare monogram is for the sidebar and the favicon,
   where a wordmark would be illegible. */
body.authentication::before {
  content: "";
  display: block;
  width: 300px;
  height: 259px;
  margin: 32px auto 0;
  background: url("/sfbooks/sf-accounting-logo.png") center / contain no-repeat;
}

/* The lockup above carries the identity, so upstream's own mark in the
   column would be a second logo. */
body.authentication .bp4-icon-bigcapital { display: none !important; }

body.authentication div:has(> form) {
  background: #FFFFFF !important;
  border: 1px solid #DDD8CF !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 14px rgba(58, 54, 48, .09) !important;
}

/* --------------------------------------------------------------------------
   3. Accents. Upstream's blue becomes the medallion gold.
   -------------------------------------------------------------------------- */
.bp4-button.bp4-intent-primary,
.bp4-button.bp4-intent-primary:hover {
  background: var(--sfb-gold) !important;
  color: #FFFFFF !important;
  border: none !important;
}

.bp4-button.bp4-intent-primary:active {
  background: var(--sfb-gold-dark) !important;
}

a, .bp4-tab[aria-selected="true"] { color: var(--sfb-green) !important; }

/* The dark sidebar: tint the active row mint so it reads against the taupe. */
.sidebar .bp4-menu-item.bp4-active,
.sidebar__menu .is-active {
  background: rgba(178, 136, 66, .16) !important;
  border-left: 3px solid var(--sfb-gold) !important;
}

/* --------------------------------------------------------------------------
   4. Residual upstream wordmarks in text nodes CSS cannot reach are left
      alone deliberately. Rewriting them would mean either forking the bundle
      or a MutationObserver rewriting the DOM on every render — both cost more
      than they are worth for a two-person tool. The tab title, favicon, login
      page and sidebar are what people actually see.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   5. The dashboard injected by sf-dashboard.js.

   Upstream's homepage is a directory of fifteen features, eight of which are
   dead here — 0 customers, 0 sale invoices, 0 expenses, 1 item. The three
   cards below are the questions actually asked of these books.
   -------------------------------------------------------------------------- */
#sf-dash { margin: 0 0 28px; }

.sf-dash-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}

.sf-card {
  background: #FFFFFF;
  border: 1px solid #E3DFD7;
  border-top: 3px solid var(--sfb-green);
  border-radius: 8px;
  padding: 16px 18px 12px;
  box-shadow: 0 1px 3px rgba(34, 49, 44, .06);
}

.sf-card-t {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sfb-green);
  margin-bottom: 10px;
}

.sf-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  font-size: 13.5px;
  color: var(--sfb-ink);
}
.sf-row span { opacity: .78; }
/* Tabular figures so the decimal points line up down the column — the whole
   point of a money list. */
.sf-row b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.sf-row i { font-style: normal; opacity: .55; font-size: 12px; }

.sf-row.sf-total {
  border-top: 1px solid #EAE6DE;
  margin-top: 6px;
  padding-top: 9px;
}
.sf-row.sf-total span { opacity: 1; font-weight: 600; }
.sf-row.sf-total b { color: var(--sfb-green); }

.sf-card-f {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #F0EDE7;
  font-size: 12px;
}
.sf-card-f a { color: var(--sfb-gold-dark) !important; text-decoration: none; }
.sf-card-f a:hover { text-decoration: underline; }

.sf-none { font-size: 13px; opacity: .6; padding: 6px 0 2px; }
.sf-dash-loading { font-size: 13px; opacity: .5; padding: 8px 0 20px; }

/* An unreachable ledger must never render as zero. */
.sf-dash-err {
  background: #FDF6E7;
  border: 1px solid var(--sfb-gold);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: #6B4E12;
}

/* Sections that will always read zero on these books. */
[data-sf-dead] { display: none !important; }
[data-sf-dead] + div { display: none !important; }

/* The completeness banner. Deliberately loud: a ledger three months behind
   rendering as "cash on hand" is the failure this whole dashboard could
   otherwise cause. */
.sf-stale {
  grid-column: 1 / -1;
  background: #FDF6E7;
  border: 1px solid var(--sfb-gold);
  border-left: 4px solid var(--sfb-gold);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 4px;
  font-size: 13px;
  color: #6B4E12;
}
.sf-stale b { font-variant-numeric: tabular-nums; }

/* A real account reading zero is dimmed, not hidden — the reader should see
   that it is zero, and wonder why. */
.sf-row.sf-zero span,
.sf-row.sf-zero b { opacity: .38; }