/* ============================================================
   Zazen Health Solutions — affiliates.css
   Visual-harmonization pass for /affiliates/ (frontend plan §2.7,
   HANDOFF.md §5 item 5) now that its ~40 templates sit on the shared
   storefront base (templates/zazenhealthsolutions/base.html) instead of
   their own standalone <html> document.

   Design pass (plan §D, phase 6): zazenhealthsolutions_affiliate_base.html
   no longer loads static/css/networks_base.css at all (dropped along with
   its Poppins body font and purple `.gradient-bg`/`.network-card`). The
   handful of helper classes affiliate templates actually used from it --
   `.glass-effect` (already carried here), `.gradient-bg`, `.card-hover`,
   `.htmx-indicator` -- are reproduced below on the storefront's own green
   tokens, so dropping the old stylesheet doesn't silently undress any
   template still using those class names.

   Most of the actual clash — the old TPP brand green (#79b935 family),
   Poppins, and page-local `body { background: white !important; }` /
   `.glass-effect { background: white; ... }` overrides — was fixed at the
   template source (see each page's own extra_head/extra_css <style>
   block), not here: those blocks render inside <body>, after this
   stylesheet in document order, so same-specificity rules here can't win
   the cascade against them without !important. What's left for this file
   is the *shared* pattern repeated near-identically across ~20 dashboard/
   table partials: Tailwind's stock cool-gray utility scale (bg-gray-50,
   border-gray-200, text-gray-500, ...), used throughout for table
   headers, empty states and form chrome. Retinting the utility classes
   once here reaches every one of those partials without a 20-file edit.

   All of the Tailwind-utility-name overrides below (bg-gray-*, bg-white,
   border-gray-*, text-gray-*, bg/text/border-green-*) carry !important --
   confirmed by computed-style inspection in a real browser (design pass,
   phase 6) that Tailwind's Play CDN runtime does NOT keep its generated
   utility <style> tag pinned at the position its <script> tag occupies in
   the document: it (re)inserts/updates that tag as the page's classes are
   scanned, which in practice lands after this stylesheet regardless of
   <link> order, so plain same-specificity same-selector rules here lose
   the cascade silently (verified: an un-!important'd `.bg-gray-50`
   override here still computed to Tailwind's default #F9FAFB, not this
   file's #EAE3D4). Same reasoning the old inline `.gradient-bg { ... !
   important; }` override already used, just applied consistently instead
   of on a single ad hoc rule.

   Palette source of truth: templates/zazenhealthsolutions/base.html's
   inline tailwind.config (cream #F4EFE6, elev #EAE3D4, deep #E2D8C3,
   ink #1A1E1A / ink-soft #3A3E38, muted #6B6A62, line #CFC6B4 / line-soft
   #DDD4C1, green #3E5B3E / green-deep #2A402A).
   ============================================================ */

/* ---------- Cool-gray tables/cards -> warm cream-family neutrals ----------
   bg-gray-50/100 and border-gray-200/300 are Tailwind's stock blue-gray
   scale; next to bg-cream (#F4EFE6) they read as a foreign admin panel
   dropped onto the page. Retinting them to the storefront's own elev/deep/
   line tokens is what actually fixes the "white/gray cards on cream"
   clash for the ~20 table + empty-state partials under
   partials/dashboard/ and partials/company_dashboard/. */
.bg-gray-50 { background-color: #EAE3D4 !important; }
.bg-gray-100 { background-color: #E2D8C3 !important; }
.border-gray-100 { border-color: #DDD4C1 !important; }
.border-gray-200 { border-color: #CFC6B4 !important; }
.border-gray-300 { border-color: #CFC6B4 !important; }
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #DDD4C1 !important; }
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #CFC6B4 !important; }

/* Cool-gray text -> ink family. text-gray-900/700 are near-black already;
   this only warms the hue so it matches the ink tokens used everywhere
   else on the page (unreadable-contrast risk goes down, not up: ink is
   darker than gray-900 on cream). */
.text-gray-900 { color: #1A1E1A !important; }
.text-gray-700 { color: #3A3E38 !important; }
.text-gray-600,
.text-gray-500 { color: #6B6A62 !important; }

/* ---------- Tailwind's stock green-* accent scale -> brand green ----------
   Independently of the old TPP #79b935 brand green (retinted at the
   template source — see the header comment), ~140 uses of Tailwind's own
   default green-50/500/600/700 scale (a brighter, more saturated green
   than the brand's #3E5B3E) are scattered across these same dashboards for
   commission amounts, primary buttons and form focus rings/borders. Left
   alone, that's a *third* green on the page next to the brand green and
   the semantic status-pill green (bg-green-100/text-green-800, kept as-is
   below — see that note). Retinting this scale to the same brand-green
   tokens makes every "this is the site's green" element consistent. */
.bg-green-50,
.hover\:bg-green-50:hover { background-color: #E3EAE0 !important; }
.text-green-600 { color: #3E5B3E !important; }
.bg-green-500,
.bg-green-600 { background-color: #3E5B3E !important; }
.bg-green-700,
.hover\:bg-green-700:hover { background-color: #2A402A !important; }
.border-green-500,
.focus\:border-green-500:focus { border-color: #3E5B3E !important; }
.ring-green-500,
.focus\:ring-green-500:focus { --tw-ring-color: #3E5B3E !important; }

/* bg-green-100/text-green-800 (status pills: "Active", "Paid", "Completed")
   are left on Tailwind's stock scale, alongside the matching yellow/red/
   blue pill variants for pending/failed/processing — a semantic status
   vocabulary, not a brand-color clash, and changing only the green one
   would break that set's internal consistency. */

/* ---------- Card surface fallback ----------
   Canonical .glass-effect now that the page-local copies of this rule
   (company_dashboard.html, company_management.html, company_onboarding.html,
   company_products.html, affiliate_detail.html) were retinted in place —
   kept here too as a single source of truth for any template that includes
   the class without its own local override. */
.glass-effect {
  background: #FBF9F2;
  border: 1px solid #E2D8C3;
}

/* ---------- bg-white cards -> cream ----------
   Tailwind's plain `bg-white` (not the `bg-white/NN` opacity variants,
   a distinct generated class this selector doesn't touch) is the other
   half of the "white/gray card dropped onto cream" clash `bg-gray-50`
   above already fixes: dozens of card/table/modal containers across the
   dashboard partials, resources.html and affiliate_detail.html use plain
   white fill. Retinting to the page's own cream (not elev, which is
   already used for table headers/empty-states right above — keeping
   cream here preserves that header/body contrast) matches the same
   bordered-card look the back-office's own templates use
   (templates/zazenhealthsolutions/backoffice/*: border only, fill = page
   background). */
.bg-white { background-color: #F4EFE6 !important; }

/* ---------- networks_base.css helpers, reproduced on tokens ----------
   zazenhealthsolutions_affiliate_base.html no longer loads
   static/css/networks_base.css (design pass, plan §D) -- these three
   classes are the only things affiliate templates actually used from it
   that aren't already covered above. */

/* Gradient avatar/icon fill (dashboard.html's floating members, hub
   placeholder icons): green -> green-deep, replacing networks_base.css's
   generic purple #667eea -> #764ba2. */
.gradient-bg {
  background: linear-gradient(135deg, #3E5B3E 0%, #2A402A 100%);
}

/* Hover-lift used by several product/content card grids
   (company_products.html, affiliate_post_detail.html, affiliate_detail.html,
   partials/company_section.html, partials/product_catalog.html). */
.card-hover {
  transition: all 0.3s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* HTMX loading-state toggle (affiliate_post_detail.html,
   partials/library_section.html) -- plain display toggle, no colour. */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: block; }
.htmx-request.htmx-indicator { display: block; }

/* Member-avatar / nested row-and-card helpers dashboard.html used to
   define inline per-page (member/company detail rows on the members/
   companies tabs -- ZHS redirects those tabs to 'products' so they're not
   reachable from the single nav, but the base AffiliateManagementView
   these partials are shared with elsewhere can still render them). */
.member-avatar {
  background: linear-gradient(135deg, #3E5B3E 0%, #2A402A 100%);
}
.nested-row {
  background: #EAE3D4;
}
.nested-card {
  border-left: 3px solid #3E5B3E;
}