/* EVO TrustGuard — page-clients.css
 *
 * Owned by:    clients.html
 * Category:    portal feature page
 * Cascade:     tokens → base → utilities → components → portal-chrome → shared → shared-themes → page
 * Edit policy: rules unique to this page only. Anything used by 5+
 *              pages should be promoted to /css/components.css or
 *              /css/portal-chrome.css with a /css/AGENTS.md update.
 *
 * Extracted:   2 <style> block(s), 184 lines.
 * Method:      verbatim move — no token substitution applied yet.
 *              See C56 audit Section 10.A for the deferred token
 *              normalization sprint plan.
 */

/* ── extracted <style> block 1 of 2 ── */

  body { font-family: var(--font-sans); background: var(--bg); color: var(--dark); line-height: var(--leading-loose); min-height: 100vh; display: flex; flex-direction: column; padding-bottom: var(--space-20); }

  /* NAV — byte-identical to dashboard / my-leads */
  .dash-nav { background: var(--white); border-bottom: 1px solid var(--border); padding: calc(14px + env(safe-area-inset-top)) 20px 14px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: var(--z-nav); }
  .dash-nav-brand { text-decoration: none; display: flex; align-items: center; }
  .dash-nav-brand img { display: block; height: 48px; }
  .dash-nav-right { display: flex; align-items: center; gap: var(--space-4); }

  /* TITLE ROW — matches my-leads filter-row rhythm (sticky, red +Add pill) */
  .title-row { background: var(--white); border-bottom: 1px solid var(--border); padding: var(--space-3-5) var(--space-5); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); position: sticky; top: calc(77px + env(safe-area-inset-top)); z-index: 90; }
  .title-text { font-family: var(--font-serif); font-size: var(--text-3xl); color: var(--dark); font-weight: var(--weight-regular); line-height: var(--leading-tight); }
  /* +Add Client primary pill — matches the Create Lead pill on my-leads.html
     exactly. Routes to /client-create.html which renders the Client
     Information Sheet in add_client mode (no assignment section) per the
     C51 Add Client sprint. */
  .add-client-pill { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-3-5); border-radius: var(--radius-md); background: var(--red); color: var(--white); font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background 0.15s; border: 1.5px solid var(--red); box-sizing: border-box; }
  .add-client-pill:hover { background: var(--red-hover); border-color: var(--red-hover); }

  /* FILTER TABS — horizontal scroll, no wrap */
  .filter-tabs { background: var(--white); border-bottom: 1px solid var(--border); padding: var(--space-2-5) var(--space-4); display: flex; gap: var(--space-2); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tab { flex-shrink: 0; padding: 7px 14px; border: 1.5px solid var(--border); border-radius: 6px; background: transparent; font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--mid); cursor: pointer; white-space: nowrap; transition: border-color 0.15s, color 0.15s, background 0.15s; }
  .filter-tab:hover { border-color: var(--mid); color: var(--dark); }
  .filter-tab.active { border-color: var(--red); color: var(--red); background: rgba(229, 52, 46, 0.15); }

  /* PAGE HEADER */
  .page-header { padding: var(--space-3-5) var(--space-5) 0; max-width: 640px; margin: 0 auto; width: 100%; }
  .page-count { font-size: var(--text-md); color: var(--light); font-weight: var(--weight-regular); }

  /* FEED — inter-card gap bumped from var(--space-2-5) (10px) →
     var(--space-5-5) (22px) per the C72 tone-down pass. The 10px gap
     let stacked cards' state-colored perimeter bars visually fuse
     into the negative space between cards (the eye read the fused
     bar as belonging to neither card). 22px gives each card's
     top + bottom bar clear breathing room so the bar reads as the
     card's own status indicator, not a divider between cards. */
  .feed { padding: var(--space-2-5) var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-5-5); flex: 1; max-width: 640px; margin: 0 auto; width: 100%; }

  /* CLIENT CARD — Sprint Y-A dual-status redesign.
     Top row: avatar + 3-line body + right-cluster (pill-pair + favorite).
     Bottom row: most recent assignment info, full-width.
     Archived cards are a separate shell (.client-card-archived) so the
     3-line body + the Restore / Delete Forever action row can stack
     vertically inside one border. The card is no longer a link for
     archived rows — the action buttons are the only affordances.

     Dual border accents render as actual border-left + border-right on
     the card itself (mirroring the .invoice-card technique on
     invoices.html) so they wrap the card's rounded corners cleanly
     instead of running past the radius as flat overlay bars. Padding is
     symmetric so the two 3px accents read as matched bookends. The base
     border + radius are preserved so the card still reads as a card,
     not a slab. */
  .client-card { position: relative; background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--cc-contract-color, var(--cc-status-gray)); border-right: 3px solid var(--cc-assignment-color, var(--cc-status-gray)); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-3-5); display: flex; flex-direction: column; gap: var(--space-2); box-shadow: 0 2px 6px rgba(0,0,0,0.04); text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow 0.15s, transform 0.1s; overflow: hidden; }
  .client-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
  .client-card:active { transform: scale(0.995); }
  /* Dark-mode override: shared-themes.css resets `.client-card`
     border-color (shorthand) to var(--border) in dark mode, which would
     defeat the colored left/right accents. Re-pin those two sides to
     the same CSS variables so the dual-border read survives the theme
     swap; top/bottom inherit var(--border) from the bulk rule. */
  [data-theme="dark"] .client-card { border-left-color: var(--cc-contract-color, var(--cc-status-gray)); border-right-color: var(--cc-assignment-color, var(--cc-status-gray)); }
  /* Status color tokens — driven by the contract_status / assignment_status
     classes set per-card. We use CSS custom properties on the card element
     itself so the same ::before / ::after rules pick up either status
     dimension without N×M class explosion. */
  .client-card.contract-active   { --cc-contract-color: var(--cc-status-green); }
  .client-card.contract-pending  { --cc-contract-color: var(--cc-status-blue); }
  .client-card.contract-inactive { --cc-contract-color: var(--cc-status-gray); }
  .client-card.assignment-active   { --cc-assignment-color: var(--cc-status-green); }
  .client-card.assignment-pending  { --cc-assignment-color: var(--cc-status-blue); }
  .client-card.assignment-inactive { --cc-assignment-color: var(--cc-status-gray); }
  /* Status palette — green = active, blue = pending, gray = inactive.
     Values match the existing platform tokens used by the .client-status-pill
     color wash below. Defined on :root so the same values apply in light
     and dark mode (the pills already render as dark-charcoal + translucent
     color wash, so no theme override is needed for the borders either). */
  :root {
    --cc-status-green: #22c55e;
    --cc-status-blue:  #3b82f6;
    --cc-status-gray:  #9ca3af;
  }
  /* Archived cards keep the legacy single-color treatment. The shell uses
     `.client-card-archived` (not `.client-card`), so it doesn't inherit
     the dual-pseudo-element rules above. */
  .client-card.status-archived { opacity: 0.9; }

  /* Archived card shell — wraps the 3-line summary AND the Restore /
     Delete Forever action row in one bordered container. The summary
     row is non-interactive (tap doesn't navigate) so the two red
     actions are the only affordances. */
  .client-card-archived { background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--text-dim); border-radius: var(--radius-lg); box-shadow: 0 2px 6px rgba(0,0,0,0.04); overflow: hidden; }
  .client-card-archived .client-archived-summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-3-5); }
  .client-archived-actions { display: flex; gap: var(--space-2-5); padding: var(--space-2-5) var(--space-3-5) var(--space-3); border-top: 1px solid var(--border); }
  .client-archived-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5); padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold); cursor: pointer; transition: background 0.15s, color 0.15s; border: 1.5px solid var(--border); background: var(--surface-light); color: var(--dark); }
  .client-archived-btn:hover { background: var(--border); border-color: var(--border-strong); }
  .client-archived-btn.destructive { border-color: var(--red); background: transparent; color: var(--red); }
  .client-archived-btn.destructive:hover { background: var(--red); color: var(--white); }
  .client-archived-btn:disabled { opacity: 0.55; cursor: not-allowed; }
  .client-archived-meta { font-size: var(--text-xs); color: var(--light); padding: var(--space-1) var(--space-3-5) var(--space-2-5); line-height: var(--leading-normal); }
  [data-theme="dark"] .client-card-archived { background: var(--surface); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); color: var(--text); }
  [data-theme="dark"] .client-archived-actions { border-top-color: var(--border); }
  [data-theme="dark"] .client-archived-btn { background: var(--surface-elevated); border-color: var(--border); color: var(--text); }
  [data-theme="dark"] .client-archived-btn:hover { background: var(--border); }
  [data-theme="dark"] .client-archived-btn.destructive { background: transparent; color: var(--red); border-color: var(--red); }
  [data-theme="dark"] .client-archived-btn.destructive:hover { background: var(--red); color: var(--white); }
  [data-theme="dark"] .client-archived-meta { color: var(--text-muted); }

  /* C72 topbar — three label-over-pill columns:
       CONTRACT (left, flex-start)  ↔  PAYMENT (center, center)  ↔  SERVICE (right, flex-end)
     PAYMENT pill always renders (one of four states from
     clients_with_derived_status.payment_status, migration 061) —
     replaces the LOCKED C71-C conditional past-due pill.
     `flex: 1 1 0` on each column distributes width evenly so the
     center column lands geometrically centered between the two edge
     columns regardless of pill text length; `min-width: 0` lets long
     pills shrink instead of forcing horizontal overflow at narrow
     viewports (360px). Star overlay on the avatar (see
     .client-avatar-wrap + .client-fav-btn) is unchanged. */
  .client-card-topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); padding-bottom: var(--space-1); }
  .client-pill-group { display: flex; flex: 1 1 0; flex-direction: column; gap: var(--space-0-5); min-width: 0; }
  .client-pill-group-left { align-items: flex-start; }
  .client-pill-group-right { align-items: flex-end; }
  .client-pill-group-center { align-items: center; text-align: center; }
  .client-pill-label { font-size: var(--text-xxs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wider); color: var(--text-muted); text-transform: uppercase; line-height: 1; }

  /* C72 PAYMENT pill — four states. Same charcoal base + translucent
     color wash convention as the existing .client-status-pill swatches
     (active / pending / inactive) so the three pills in the topbar read
     as a matched set. Backgrounds use linear-gradient over the
     `background-color: #1f2937` base from .client-status-pill so the
     color shows through as a translucent overlay rather than a flat
     pastel fill. Foreground colors are full-saturation so the pill
     label remains legible against the dark base in both light and
     dark themes. */
  .client-status-pill.pill-payment-pending  { background-image: linear-gradient(rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.18));  color: #60a5fa; }
  .client-status-pill.pill-payment-pastdue  { background-image: linear-gradient(rgba(250, 204, 21, 0.18), rgba(250, 204, 21, 0.18));  color: #facc15; }
  .client-status-pill.pill-payment-current  { background-image: linear-gradient(rgba(34, 197, 94, 0.18),  rgba(34, 197, 94, 0.18));   color: #4ade80; }
  .client-status-pill.pill-payment-inactive { background-image: linear-gradient(rgba(120, 120, 120, 0.22), rgba(120, 120, 120, 0.22)); color: #999;    }

  /* C72 follow-on (2026-05-11) — perimeter status bars.
     Every card now renders a 3px top + bottom bar in the payment_status
     color (yellow / blue / green / grey). Positional rules below; color
     variants further down. Bars run edge-to-edge (left: 0 / right: 0)
     with NO horizontal inset.
     ──────────────────────────────────────────────────────────────────
     Geometry — why no z-index hierarchy is needed against the LOCKED
     C53 side-bar accents (which are border-left / border-right
     declarations directly on .client-card, line 65 above, NOT
     positioned children with a z-index):

       1. .client-card has `position: relative` + `overflow: hidden`.
       2. For absolute-positioned children, the CSS containing block
          is the parent's PADDING-BOX (the inside edge of the borders).
       3. `left: 0; right: 0` therefore means the bar paints from the
          inside-edge of border-left to the inside-edge of border-right.
       4. The 3px side accent borders sit OUTSIDE the padding-box —
          they paint between border-box and padding-box.
       5. So the bar and the side accents are geometrically adjacent
          (they touch at the inside corner) but never overlap. The
          rounded `border-radius: var(--radius-lg)` clips the bar's
          corners via `overflow: hidden` so the bar inherits the
          padding-box's rounded inner corner.
       6. Visual result: side accent owns the outer ~3px column on
          each side; bar owns the inner ~3px row at top + bottom.
          They form a clean L-shape at each corner with no gap and
          no overlap — the "tuck under" effect the spec asked for.

     z-index: 2 is retained for parity with the favorite button overlay
     (.client-fav-btn, z-index 2). They never overlap visually (bar is
     at top/bottom, fav button is on the avatar mid-card), so z-index
     parity has no rendering effect. pointer-events: none keeps the bar
     from intercepting the link tap target. */
  .client-card-payment-bar-top    { position: absolute; top: 0;    left: 0; right: 0; height: 3px; z-index: 2; pointer-events: none; }
  .client-card-payment-bar-bottom { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; z-index: 2; pointer-events: none; }

  /* C72 follow-on tone-down pass (2026-05-11) — four state-color
     variants, applied alongside the positional base rule above (the JS
     emits both classes on the same div).
     ──────────────────────────────────────────────────────────────────
     Default values are MUTED variants of the matched pill hues (same
     hue family, lower saturation, slightly darker) so the bars read
     as status indicators against the dark card surface, not visual
     sirens. Pre-tone-down values are kept in inline comments for
     traceability against the original C72 follow-on palette.
     Light-mode overrides follow immediately below. */
  .client-card-payment-bar-pastdue  { background: #d4a017; }  /* was #facc15 — amber, muted */
  .client-card-payment-bar-pending  { background: #4a7ba8; }  /* was #60a5fa — slate-blue, muted */
  .client-card-payment-bar-current  { background: #3b8a52; }  /* was #4ade80 — forest-green, muted */
  .client-card-payment-bar-inactive { background: #6b7280; }  /* unchanged — already muted */

  /* Light-mode overrides per LOCKED C38 dark-mode pattern (the
     [data-theme="light"] attribute selector applies when the user has
     toggled to light mode). LOCKED C61 charcoal-page-light-mode lock
     keeps the PAGE background charcoal (#1a1a1a) in light mode, but
     does NOT apply to the card surface — `--white` is pinned to
     `#ffffff` in every theme (shared-themes.css lines 22-26) and
     `.client-card { background: var(--white); }` therefore renders
     against a TRULY LIGHT card surface in light mode. The muted
     dark-mode defaults wash out at 3px against white, so light mode
     gets the saturated tailwind hues (amber-500 / blue-500 /
     green-600) for state-distinguishability at the same 3px bar
     height. Inactive grey is identical in both themes — neutral
     reads correctly against both dark and light surfaces. */
  [data-theme="light"] .client-card-payment-bar-pastdue  { background: #f59e0b; }  /* amber-500 */
  [data-theme="light"] .client-card-payment-bar-pending  { background: #3b82f6; }  /* blue-500 */
  [data-theme="light"] .client-card-payment-bar-current  { background: #16a34a; }  /* green-600 */
  [data-theme="light"] .client-card-payment-bar-inactive { background: #6b7280; }  /* unchanged */

  /* Top row inside the card — avatar + body sit horizontally below the topbar. */
  .client-card-main { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; }

  /* C72 — avatar background neutralized to a quiet charcoal grey so the
     yellow perimeter bars carry the past-due alarm on their own. Live
     cards no longer set an inline `style="background:..."`; archived
     cards still do so the legacy hash-of-name palette survives there
     (out-of-scope for this sprint). The `#4b5563` literal is a neutral
     slate-600 that gives ample contrast against the white initial in
     both light and dark themes — no theme override needed. */
  .client-avatar { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--white); background: #4b5563; overflow: hidden; }
  .client-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .client-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-0-5); }
  /* C71 Sprint 5 — long business names allowed to wrap to a second line
     (white-space: normal + word-break: break-word) so seed clients like
     "Brierfield County Sheriff's Office" and
     "Stoneridge Highline Apartments" render in full instead of being
     truncated with an ellipsis. Card height becomes variable per LOCKED
     C71-E. POC + city/state lines below stay single-line + ellipsized. */
  .client-name { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--dark); line-height: 1.25; white-space: normal; word-break: break-word; overflow: hidden; text-overflow: ellipsis; }
  .client-poc { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--mid); line-height: var(--leading-snug); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .client-loc { font-size: var(--text-xs); color: var(--light); line-height: var(--leading-snug); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* C71 Sprint 5 detail row — two-column flex layout below the identity
     row, separated by a 1px divider. Left column has a small uppercase
     "TERM" label above the contract date range; right column stacks
     service type over coverage with no labels (LOCKED C71-E — the
     values are self-evident, labels would clutter). Replaces the
     Sprint-3 single-column stack of term / value+service / coverage /
     outstanding lines. The outstanding indicator is gone — past-due
     state surfaces via the centered topbar pill (LOCKED C71-C); within-
     terms outstanding is detail-page-only per LOCKED C71-E. */
  .client-card-detail { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-1); padding-top: var(--space-2); border-top: 1px solid var(--border); }
  .client-detail-left { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; align-items: flex-start; flex-shrink: 0; }
  .client-detail-right { display: flex; flex-direction: column; gap: 2px; min-width: 0; align-items: flex-end; text-align: right; flex: 1; }
  .client-detail-label { font-size: var(--text-xxs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wider); color: var(--text-muted); text-transform: uppercase; line-height: 1; }
  .client-detail-value { font-size: var(--text-xs); color: var(--dark); font-weight: var(--weight-medium); line-height: var(--leading-snug); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .client-service-type { font-size: var(--text-xs); color: var(--dark); font-weight: var(--weight-medium); line-height: var(--leading-snug); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .client-coverage { font-size: var(--text-xs); color: var(--mid); line-height: var(--leading-snug); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  /* Legacy info-line scaffolding retained for the archived-card shell
     (which still uses the old layout). Removed from non-archived cards
     by Sprint 5. */
  .client-info-line { font-size: var(--text-xs); color: var(--mid); line-height: var(--leading-snug); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Status badge — dark charcoal base with a semi-transparent color wash.
     The gradient layer over the solid charcoal keeps the color showing
     through as a translucent overlay rather than a flat pastel fill, and
     stays identical in light and dark mode. Text color is the brand
     status hue (green / blue / gray) so it reads against the dark base.
     Sprint Y-A bumped weight 600→700, letter-spacing 0.3→0.5px, padding
     2px→4px 8px to match the platform pill spec from C54. */
  .client-status-pill { font-size: var(--text-xxs); font-weight: var(--weight-bold); padding: var(--space-1) var(--space-2); border-radius: 6px; text-transform: uppercase; letter-spacing: var(--tracking-wider); flex-shrink: 0; background-color: #1f2937; color: var(--text-dim); }
  .client-status-pill.active { background-image: linear-gradient(rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.2)); color: var(--status-active-disabled); }
  .client-status-pill.pending { background-image: linear-gradient(rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.2)); color: var(--status-pending); }
  .client-status-pill.inactive { background-image: linear-gradient(rgba(156, 163, 175, 0.2), rgba(156, 163, 175, 0.2)); color: var(--text-dim); }
  .client-status-pill.archived { background-image: linear-gradient(rgba(115, 115, 115, 0.2), rgba(115, 115, 115, 0.2)); color: var(--text-dim); }

  .client-line-bot { font-size: var(--text-xs); color: var(--text-faint); line-height: var(--leading-snug); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Archived-only legacy layout — the archived card shell preserves the
     pre-Sprint-Y-A 3-line structure (top/mid/bottom) so the existing
     restore + delete-forever affordances render unchanged. New status
     cards use the .client-name / .client-poc / .client-loc stack above. */
  .client-card-archived .client-line-top { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
  .client-card-archived .client-line-mid { display: flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-sm); color: var(--mid); }
  .client-card-archived .client-service-icon { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; flex-shrink: 0; stroke-linecap: round; stroke-linejoin: round; }
  .client-card-archived .client-service { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .client-card-archived .client-value { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--dark); flex-shrink: 0; }
  .client-card-archived .client-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

  /* C71 Sprint 4 favorite affordance — moved from the topbar to a small
     overlay badge anchored to the avatar's top-right corner. The wrapper
     supplies the position-relative anchor; the button is absolutely
     positioned with a 24x24 hit area and a centered 16x16 circular badge
     drawn via ::before. The badge background pulls var(--surface) so it
     reads as a "cutout" against both the avatar tile and the surrounding
     card surface in light + dark mode (the card itself sits on
     var(--surface) per shared-themes.css line 103). */
  .client-avatar-wrap { position: relative; flex-shrink: 0; }
  .client-fav-btn { position: absolute; top: -4px; right: -4px; width: 24px; height: 24px; padding: 0; margin: 0; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
  .client-fav-btn::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; background: var(--surface); border-radius: 50%; z-index: 0; }
  .client-fav-btn svg { width: 12px; height: 12px; display: block; position: relative; z-index: 1; transition: transform 0.15s; }
  .client-fav-btn:hover svg { transform: scale(1.1); }

  /* EMPTY STATE */
  .feed-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; display: none; }
  .feed-empty-icon { width: 48px; height: 48px; color: var(--border-strong); margin-bottom: var(--space-4); }
  .feed-empty-icon svg { width: 48px; height: 48px; stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .feed-empty h2 { font-family: var(--font-serif); font-size: var(--text-3xl); color: var(--dark); margin-bottom: var(--space-2); font-weight: var(--weight-regular); }
  .feed-empty p { font-size: var(--text-base); color: var(--light); max-width: 320px; font-weight: var(--weight-light); }

  /* LOADING */
  .feed-loading { flex: 1; display: flex; align-items: center; justify-content: center; padding: 60px 20px; }
  .spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--red); border-radius: 50%; animation: spin 0.6s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* TOAST — used by archive / restore / favorite flows for transient
     notices. Dark-mode background + foreground are pinned via the
     `[data-theme="dark"] .tg-toast` block in shared-themes.css. */
  .tg-toast { position: fixed; bottom: calc(72px + env(safe-area-inset-bottom) / 2); left: 50%; transform: translateX(-50%); background: var(--dark); color: var(--white); padding: var(--space-2-5) var(--space-5); border-radius: var(--radius-md); font-size: var(--text-base); font-weight: var(--weight-semibold); font-family: var(--font-sans); opacity: 0; transition: opacity 0.2s; pointer-events: none; z-index: 200; }
  .tg-toast.show { opacity: 1; }

  /* BOTTOM NAV */
  .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(56px + env(safe-area-inset-bottom) / 2); padding-bottom: calc(env(safe-area-inset-bottom) / 2); background: var(--white); border-top: 1px solid var(--border); display: flex; z-index: var(--z-nav); }
  .bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-0-5); text-decoration: none; color: var(--light); min-height: 44px; transition: color 0.15s; }
  .bottom-nav-item:hover { color: var(--mid); }
  .bottom-nav-item.active { color: var(--red); }
  .bottom-nav-item svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; fill: none; }
  .bottom-nav-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); font-family: var(--font-sans); }

  @media (max-width: 399px) {
    .title-text { font-size: var(--text-2xl); }
    .client-card { padding: var(--space-2-5); gap: var(--space-2-5); }
    .client-avatar { width: 40px; height: 40px; font-size: var(--text-base); }
  }

/* ── extracted <style> block 2 of 2 ── */

.nav-brand img, .dash-nav-brand img { height: 48px !important; width: auto !important; min-height: 48px !important; max-height: none !important; }