/*
  Rebuilt against SwineSync's actual production CSS (SWINESYNC_C45), not
  guessed. Same design tokens as SwineSync's :root — same green, same
  background tint, same danger red — so the two sibling apps read as one
  family, the way Bivatec's whole app line does. Component patterns
  (card/tile/kpi/pill/empty-state) are SwineSync's own naming, kept
  recognizable rather than reinvented under different class names.
*/

:root {
  --g: #0b6b3a;       /* SwineSync's primary green, used as-is */
  --g2: #0f8a4f;       /* SwineSync's accent green (FAB, progress) */
  --bg: #f4f8f5;
  --card: #fff;
  --text: #173226;
  --muted: #6d7d74;
  /* BUG FIX: this token was named --danger here but every actual call
     site (11 of them, across app.js/app-finance.js/app-production.js/
     app-reports.js — the bell badge, overdue banners, negative profit/
     loss text, due-protocol borders) references var(--red), which was
     never defined anywhere. An undefined custom property with no
     fallback computes to the property's initial value, not an error —
     so every one of those has been silently rendering transparent
     (backgrounds/borders) or inheriting the surrounding text color
     (profit/loss figures) this whole time, never actually red. One
     name, matching what's actually used. */
  --red: #b42318;
  --line: #dfe9e2;
  /* poultryWinner-only addition: egg-yolk gold, used sparingly for layer/
     breeder egg-specific accents only — never replacing the core green. */
  --gold: #8a5b00;
  --accent-surface: #eaf5ee;
  --soft-surface: #f8fcf9;
  --empty-surface: #fbfdfb;
  --track: #e5eee8;

  /* --- Data-viz palette (dataviz skill) --------------------------------
     Two different jobs, kept deliberately separate:
     - --viz-1..8: the skill's own validated categorical 8-hue set,
       UNCHANGED hex values, fixed order — used only for genuine part-to-
       whole/identity charts (cost mix, egg grade) where each slice is a
       distinct category. Never reordered, never reused as a magnitude
       ramp, never reassigned by current sort rank (a category keeps its
       color across every render — "feed" is always slot 2 (orange)
       whether it's the farm's #1 cost or its #4th).
     - Reports' magnitude bar/line charts ("Compare magnitude" / "Trend
       over time" jobs) each use ONE fixed brand hue per chart, never
       these 8 — Production stays the app's own green (--g2), Mortality
       reuses --red (loss is already red everywhere else in this app),
       Eggs reuses the existing --gold, and Feed reuses categorical slot
       2 (orange) directly, per the palette's own convention for a
       second sequential context ("the second takes the next categorical
       slot's hue"). Validated with the skill's validate_palette.js
       against this app's real card surfaces (#fff light / #17301f
       dark), both modes PASS; the three light-mode slots that sit
       under 3:1 contrast (aqua/yellow/magenta — a known, documented
       trade-off of this exact palette) always ship with a visible
       swatch + text legend row, never color alone. */
  --viz-1: #2a78d6; /* blue */
  --viz-2: #eb6834; /* orange */
  --viz-3: #1baf7a; /* aqua */
  --viz-4: #eda100; /* yellow */
  --viz-5: #e87ba4; /* magenta */
  --viz-6: #008300; /* green */
  --viz-7: #4a3aa7; /* violet */
  --viz-8: #e34948; /* red */
  --viz-other: #9a988f; /* neutral gray for an overflow "Other" bucket past 8 categories — never a 9th generated hue */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3 { font-weight: 800; margin: 0 0 10px; color: var(--g); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; margin-top: 1.1rem; }
h3 { font-size: 1.05rem; }

.ps-muted { color: var(--muted); font-size: 0.92rem; }
.ps-mt { margin-top: 1rem; }

/* --- Shell / nav ---------------------------------------------------- */
/* Bottom tabs — reconsidered twice now (Decisions 5 -> 25 -> 27) and
   landing back on tabs. SwineSync and Bivatec both use a drawer, but a
   broader survey of mobile apps generally favors bottom tabs for primary
   navigation precisely because they're always visible (no hidden menu)
   and sit in thumb reach — both of which matter more for poultryWinner's
   fast, one-handed field-entry use case than matching two examples from
   this specific niche. Four items fits a tab bar cleanly without needing
   a drawer's extra capacity. */

.ps-shell { display: flex; flex-direction: column; min-height: 100vh; }

.ps-top {
  position: sticky; top: 0; z-index: 5;
  background: var(--card); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
}
.ps-top-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ps-brand { font-weight: 800; font-size: 1.2rem; color: var(--g); }
.ps-top-sub { font-size: 0.78rem; color: var(--muted); }

.ps-bell-btn {
  position: relative; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card);
  color: var(--g); display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.ps-bell-btn svg { display: block; }
.ps-bell-btn:active { background: var(--accent-surface); }
.ps-bell-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: 0.65rem; font-weight: 800;
  align-items: center; justify-content: center; line-height: 1;
  border: 2px solid var(--card);
}
@media (prefers-color-scheme: dark) {
  .ps-bell-btn { background: #17301f; }
  .ps-bell-btn:active { background: #294a34; }
}

.ps-tab-content { flex: 1; padding: 1rem 1rem 6rem; max-width: 780px; margin: 0 auto; width: 100%; }

.ps-nav {
  position: sticky;
  bottom: 0;
  display: flex;
  background: var(--card);
  border-top: 1px solid var(--line);
  padding: 0.4rem 0 calc(0.4rem + env(safe-area-inset-bottom, 0px));
}

.ps-nav-btn { flex: 1; background: none; border: none; padding: 0.6rem 0.2rem; font-size: 0.75rem; color: var(--muted); min-height: 44px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 2px; }
/* Was font-size/line-height sized for an emoji glyph — an inline SVG
   (js/icons.js) is sized by its own width/height attributes instead, so
   this now just centers it in the nav button's column layout; the
   active/inactive color swap below still "just works" for free via
   stroke="currentColor" (Decision: SVG icon system, §2 of the redesign
   brief) with zero extra per-icon color rules. */
.ps-nav-icon { display: flex; align-items: center; justify-content: center; }
.ps-nav-icon svg { display: block; }
.ps-nav-btn-active { color: var(--g); }

.ps-fab {
  position: fixed; right: 1.25rem; bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--g2); color: #fff; border: none;
  font-size: 1.9rem; font-weight: 300; line-height: 1;
  box-shadow: 0 10px 26px rgba(11, 107, 58, 0.28);
}
.ps-fab:active { background: var(--g); }

/* --- Cards / tiles / KPI (SwineSync's own component language) -------- */

.ps-summary-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.ps-summary-stat { background: var(--empty-surface); border: 1px solid var(--line); border-radius: 16px; padding: 0.75rem; }
.ps-summary-stat span { display: block; font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ps-summary-stat strong { font-size: 1.25rem; color: var(--g); }
.ps-clickable { cursor: pointer; }
.ps-clickable:active { background: var(--accent-surface); }
@media (prefers-color-scheme: dark) { .ps-clickable:active { background: #294a34; } }

.ps-card-grid { display: flex; flex-direction: column; gap: 0.6rem; }

.ps-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 7px 22px rgba(16, 80, 45, 0.06);
}

.ps-card-head { display: flex; justify-content: space-between; align-items: center; }

.ps-tag { background: var(--accent-surface); color: var(--g); font-size: 0.72rem; font-weight: 800; padding: 5px 9px; border-radius: 999px; }

.ps-stat-row { display: flex; justify-content: space-between; padding: 0.25rem 0; font-size: 0.92rem; }
.ps-stat-row strong { color: var(--g); }

.ps-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.ps-list-row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0.9rem; background: var(--card); border-bottom: 1px solid var(--line); min-height: 44px; }
.ps-list-row:last-child { border-bottom: none; }
.ps-list-row-right { color: var(--muted); }

/* Part 7 — Users & Permissions premium card: avatar/initials, name,
   email, role + status tags, a permissions summary, and real actions
   (Edit, Enable/Disable), replacing the old 3-line read-only row. The
   avatar reuses --accent-surface/--g, the same pair .ps-tag already
   uses, so no new color is introduced; a Disabled status reuses the
   neutral --line/--muted pairing already used by .ps-module-badge-neutral. */
.ps-user-card { padding: 0.85rem 0.9rem; }
.ps-user-card + .ps-user-card { border-top: 1px solid var(--line); }
.ps-user-card-head { display: flex; align-items: center; gap: 10px; }
.ps-avatar {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-surface); color: var(--g);
  font-weight: 800; font-size: 0.85rem;
}
.ps-user-card-id { min-width: 0; flex: 1 1 auto; }
.ps-user-card-id strong { display: block; }
.ps-tag-muted { background: var(--line); color: var(--muted); }
.ps-user-card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0.6rem 0; }
.ps-user-card-perms { font-size: 0.82rem; color: var(--muted); }
.ps-user-card-actions { display: flex; gap: 8px; }
.ps-user-card-actions .ps-btn-sm { flex: 1; }
/* .ps-btn.ps-btn-sm (compound selector, not just .ps-btn-sm): .ps-btn's
   own width:100% is declared later in this file, in the Forms section,
   and ties on specificity resolve to source order -- a bare .ps-btn-sm
   rule here would silently lose to it. The compound selector outranks
   .ps-btn regardless of where either rule sits. */
.ps-btn.ps-btn-sm { width: auto; padding: 9px 14px; min-height: 38px; font-size: 0.86rem; }
.ps-role-row { padding: 0.5rem 0; border-top: 1px solid var(--line); }
.ps-role-row:first-child { border-top: none; padding-top: 0; }

/* Today's priorities — direct spec: "ensure completion or warning states
   stand out clearly against the dark background while maintaining
   contrast." Both states are accent borders + a faint tint, never
   recolored TEXT: --gold measures 4.34:1 on the dark card / 3.27:1 on the
   light card — short of the 4.5:1 WCAG AA floor for body text in either
   mode, but well clear of the 3:1 floor for a graphical/border element
   (WCAG 1.4.11), so it's safe as an accent here and nowhere the actual
   words live. --g/--g2 (5.06:1 dark, 6.61:1 light) are solid enough to
   use on text too, but stay border/background-only here for one
   consistent treatment across both states.
   Warning — a real thing due today (a protocol, a weight check): */
.ps-priority-row { border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 7%, var(--card)); padding-left: calc(0.9rem - 3px); }
/* Completion — nothing left to do today (psRenderDashboard's own "no
   priorities" card): */
.ps-card-success { border-color: var(--g2); background: color-mix(in srgb, var(--g2) 8%, var(--card)); }

/* Menu rows (Operations, Settings): an icon inside its own rounded tile,
   not a bare emoji glued straight onto the label — direct request: "the
   operation submodules can be rearranged into a way that looks like a
   real working app... Inventory inside icon... space between on same
   row." One shared shape (psMenuRowHtml, js/app.js) so every category
   menu gets this instead of each screen hand-rolling its own row markup.
   Tinted with the app's own accent green via color-mix (already used for
   Reports' bar-hover fill above) rather than a hardcoded rgba, so it
   follows --g2 automatically into dark mode; --gold is reserved for
   Hatchery specifically, matching its "Incubating" badge elsewhere,
   rather than assigning an arbitrary color per row. */
.ps-row-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ps-row-icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  /* color, not font-size: an SVG icon (js/icons.js) reads its own size
     from its width/height attributes and its stroke from currentColor —
     this is what actually tints it green, the same job font-size used to
     do for a colored emoji glyph. */
  color: var(--g);
  background: color-mix(in srgb, var(--g2) 14%, transparent);
}
.ps-row-icon svg { display: block; }
.ps-row-icon-gold { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); }
.ps-row-text { min-width: 0; }
.ps-row-text strong { display: block; }

/* --- Operations module hub: the top-level Operations screen only (brief
   §4/§14/§15) — a compact 2-column grid of tiles (icon, title, one short
   description, optional badge), NOT the tall bare-emoji list it replaces.
   Every module below Operations itself (Feeding, Health, Eggs &
   Production, Weight & Growth, Sales & Finance) stays a plain psMenuRowHtml
   list — the same proven, already-accessible row shape as Settings — so
   only the true top-level hub gets the heavier tile treatment the brief
   actually asked for, rather than turning every sub-screen into a grid
   nobody asked for. */
.ps-module-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem;
}
.ps-module-card {
  position: relative; text-align: left; background: var(--card);
  border: 1px solid var(--line); border-radius: 18px; padding: 14px;
  display: flex; flex-direction: column; gap: 6px; min-height: 108px;
  cursor: pointer;
}
.ps-module-card:active { background: var(--accent-surface); }
@media (prefers-color-scheme: dark) { .ps-module-card:active { background: #294a34; } }
.ps-module-icon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--g); background: color-mix(in srgb, var(--g2) 14%, transparent);
}
.ps-module-icon svg { display: block; }
.ps-module-icon-gold { color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); }
.ps-module-title { font-size: 0.92rem; line-height: 1.2; }
.ps-module-sub { font-size: 0.74rem; color: var(--muted); line-height: 1.3; }
.ps-module-badge {
  position: absolute; top: 12px; right: 12px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: 0.66rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.ps-module-badge-neutral { background: var(--line); color: var(--muted); }
/* Bulk log's own card only — direct spec: "subtle highlight accent
   border... to signify its role as a quick multi-flock entry tool." A
   left accent bar (not a full-perimeter recolor, which reads as a
   warning/error state elsewhere in this app) plus a barely-there tint,
   both off --g2 so light/dark mode and contrast follow the same token
   the rest of the app already validates rather than a one-off color. */
.ps-module-card-accent { border-left: 3px solid var(--g2); background: color-mix(in srgb, var(--g2) 5%, var(--card)); }

.ps-empty { border: 1px dashed #cbded2; border-radius: 16px; padding: 2.5rem 1rem; background: var(--empty-surface); text-align: center; }
.ps-empty h2 { margin-bottom: 4px; }
.ps-empty-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }

/* Part 11 locked-feature state: same dashed-card language as .ps-empty
   above (so a locked feature reads as "not yet", same family as "nothing
   here yet", rather than a jarring different style), tinted with --gold --
   this app's one existing "premium" accent (Hatchery's icon, priority
   rows), already contrast-checked in both themes, so this introduces no
   new color. Never used to fully hide a feature, only to explain it. */
.ps-locked-card { border: 1px dashed var(--gold); border-radius: 16px; padding: 1.75rem 1.25rem; background: color-mix(in srgb, var(--gold) 6%, var(--card)); text-align: center; }
.ps-locked-icon { font-size: 1.8rem; margin-bottom: 0.4rem; }
.ps-locked-card h3 { margin: 0 0 4px; }
.ps-locked-plan { color: var(--gold); font-weight: 700; margin: 0.5rem 0 1rem; }
.ps-locked-card .ps-btn { width: auto; min-width: 160px; padding: 10px 20px; min-height: 40px; }
/* A locked export/action button stays a real, clickable button (Part 11:
   explain the lock, don't just disable it) -- dashed gold border instead
   of the normal solid --g border marks it as "available, but gated"
   rather than "broken" or simply off. */
.ps-btn-locked { border: 1px dashed var(--gold); color: var(--gold); }

/* --- Forms -------------------------------------------------------------- */

form label { display: block; margin-bottom: 0.85rem; font-size: 0.9rem; font-weight: 750; color: var(--text); }
form input, form select, form textarea {
  display: block; width: 100%; margin-top: 0.35rem; padding: 14px;
  font-size: 1rem; border: 1px solid #cddbd1; border-radius: 14px;
  background: var(--card); color: var(--text); min-height: 44px; font-family: inherit;
}
fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 0.75rem; margin: 0 0 0.85rem; }
legend { padding: 0 0.4rem; font-size: 0.85rem; color: var(--muted); font-weight: 700; }

.ps-btn { display: inline-block; width: 100%; padding: 14px; border-radius: 14px; border: none; font-size: 1rem; font-weight: 800; min-height: 48px; }
.ps-btn-primary { background: var(--g); color: #fff; border-color: var(--g); font-weight: 600; }
.ps-btn-primary:active { background: #095430; }
.ps-btn-secondary { background: var(--card); color: var(--g); border: 1px solid var(--g); }
.ps-btn:disabled { opacity: .55; }

.ps-back-btn { background: none; border: none; color: var(--muted); font-size: 0.9rem; padding: 0.4rem 0; margin-bottom: 0.4rem; font-weight: 700; }
.ps-linkbtn { display: block; width: 100%; text-align: center; background: none; border: none; color: var(--g); font-weight: 800; padding: 10px 0; text-decoration: underline; }

.ps-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ps-quick-btn { border: 1px solid var(--line); border-radius: 14px; background: var(--soft-surface); color: var(--g); font-weight: 800; padding: 14px; text-align: left; min-height: 48px; }
@media (prefers-color-scheme: dark) { .ps-quick-btn { background: #17301f; } }

/* --- Bulk log: select-many checklist + per-flock quantity rows ------- */
.ps-bulk-rows { max-height: 340px; overflow-y: auto; border: 1px solid var(--line); border-radius: 14px; padding: 4px 12px; }
.ps-bulk-flock-row, .ps-bulk-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem;
}
.ps-bulk-flock-row:last-child, .ps-bulk-row:last-child { border-bottom: none; }
.ps-bulk-flock-row { cursor: pointer; }
.ps-bulk-flock-row input[type="checkbox"] { width: auto; margin-right: 10px; flex-shrink: 0; }
.ps-bulk-flock-row span:first-of-type, .ps-bulk-row span:first-child { flex: 1; }
.ps-bulk-qty-input { width: 92px; flex-shrink: 0; }
.ps-bulk-fill-row { display: flex; gap: 8px; align-items: center; margin: 0.6rem 0; }
.ps-bulk-fill-row input { flex: 1; }
.ps-bulk-fill-row .ps-linkbtn { width: auto; white-space: nowrap; padding: 0 4px; text-decoration: underline; }

/* --- Reports: period selector, tabs, bar chart, donut (from SwineSync) */
.ps-report-head { margin: 0.5rem 0; }
.ps-report-period-select { width: auto; min-width: 160px; }
.ps-report-tabs { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 4px; }
.ps-report-tab { white-space: nowrap; border: 1px solid var(--line); background: var(--card); color: var(--g); border-radius: 999px; padding: 8px 12px; font-weight: 800; min-height: 40px; }
.ps-report-tab-active { background: var(--g); color: #fff; }
.ps-filter-row { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 0.75rem; }
.ps-filter-pill { white-space: nowrap; border: 1px solid var(--line); background: var(--card); color: var(--g); border-radius: 999px; padding: 8px 14px; font-weight: 800; min-height: 40px; }
.ps-filter-pill-active { background: var(--g); color: #fff; }
/* Build 51 addition: a plain text search input, same visual language as
   the filter pills next to it (used on screens with enough items that
   scrolling through them isn't practical, e.g. Inventory). */
.ps-search-input { width: 100%; border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 10px 14px; margin-bottom: 0.75rem; font-size: 0.95rem; color: inherit; }

/* --- Chart hue contexts ------------------------------------------------
   Each report tab wraps its magnitude charts in ONE of these so every bar
   in that chart shares a single, domain-appropriate hue (dataviz skill:
   "Compare magnitude" stays sequential — one hue per chart, never a
   rainbow). Reusing tokens the app already assigns meaning to (green =
   production/good, red = mortality/loss — same red as overdue banners and
   negative money) rather than inventing new colors for the same ideas. */
.ps-chart-green  { --chart-hue: var(--g2); }
.ps-chart-red    { --chart-hue: var(--red); }
.ps-chart-orange { --chart-hue: var(--viz-2); }
.ps-chart-gold   { --chart-hue: var(--gold); }

.ps-bar-row {
  display: grid; grid-template-columns: minmax(90px,1fr) minmax(100px,3fr) auto;
  gap: 10px; align-items: center; margin: 5px 0; padding: 4px 6px; font-size: 0.85rem;
  border-radius: 10px; transition: background .12s ease;
}
.ps-bar-row:hover, .ps-bar-row:focus-visible { background: color-mix(in srgb, var(--chart-hue, var(--g2)) 10%, transparent); outline: none; }
.ps-bar-row:hover .ps-bar-track i, .ps-bar-row:focus-visible .ps-bar-track i { filter: brightness(1.1); }
.ps-bar-track { height: 12px; background: var(--track); border-radius: 99px; overflow: hidden; }
.ps-bar-track i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--chart-hue, var(--g2)) 55%, white 45%), var(--chart-hue, var(--g2)));
  transition: filter .12s ease;
}

/* Diverging bar (Margin by flock): a zero-centered track, green to the
   right of zero, the app's own red to the left — the same green/red
   polarity psSignedMoneyHtml already uses for every other profit/loss
   figure, not the skill's generic blue/red pair, so a margin number reads
   the same color whether it's in a table cell or a chart. */
.ps-divbar-row {
  display: grid; grid-template-columns: minmax(90px,1fr) minmax(100px,3fr) auto;
  gap: 10px; align-items: center; margin: 5px 0; padding: 4px 6px; font-size: 0.85rem;
  border-radius: 10px; transition: background .12s ease;
}
.ps-divbar-row:hover, .ps-divbar-row:focus-visible { background: rgba(11,107,58,0.07); outline: none; }
.ps-divbar-track { position: relative; height: 12px; background: var(--track); border-radius: 99px; overflow: hidden; }
.ps-divbar-zero { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(0,0,0,0.18); transform: translateX(-1px); }
.ps-divbar-fill { position: absolute; top: 0; height: 100%; }
.ps-divbar-pos { left: 50%; background: linear-gradient(90deg, var(--g2), color-mix(in srgb, var(--g2) 70%, black 15%)); border-radius: 0 99px 99px 0; }
.ps-divbar-neg { right: 50%; background: linear-gradient(90deg, color-mix(in srgb, var(--red) 70%, black 15%), var(--red)); border-radius: 99px 0 0 99px; }

.ps-donut-wrap { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 16px; }
.ps-donut { width: 110px; height: 110px; border-radius: 50%; background: var(--line); position: relative; flex-shrink: 0; }
.ps-donut::after { content: ''; position: absolute; inset: 24px; background: var(--card); border-radius: 50%; }
.ps-dense-row { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); padding: 6px 0; font-size: 0.85rem; }
.ps-dense-row span { color: var(--muted); }
.ps-legend-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 7px; vertical-align: middle; flex-shrink: 0; }

/* --- Line chart (inline SVG, no library): trend-over-time reports ----- */
.ps-linechart-wrap { position: relative; }
.ps-linechart { width: 100%; height: auto; display: block; overflow: visible; }
.ps-linechart-grid { stroke: var(--line); stroke-width: 1; }
.ps-linechart-axis-label { fill: var(--muted); font-size: 6.5px; font-family: inherit; }
.ps-linechart-value-label { fill: var(--text); font-size: 7.5px; font-weight: 700; font-family: inherit; }
.ps-linechart-hit { fill: transparent; cursor: pointer; }
.ps-linechart-hit:focus-visible { fill: color-mix(in srgb, var(--chart-hue, var(--g2)) 20%, transparent); outline: none; }
.ps-linechart-tooltip {
  position: absolute; pointer-events: none; background: var(--text); color: var(--bg);
  font-size: 0.72rem; font-weight: 700; padding: 4px 9px; border-radius: 8px; white-space: nowrap;
  transform: translate(-50%, -125%); opacity: 0; transition: opacity .1s ease; z-index: 5;
}
.ps-linechart-tooltip-visible { opacity: 1; }
.ps-report-export-row { display: flex; gap: 10px; margin-top: 1rem; }
.ps-report-export-row .ps-btn { width: auto; flex: 1; }
.ps-compare-toggle { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text); margin-top: 8px; }
.ps-compare-toggle input { width: auto; }
.ps-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.ps-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; white-space: nowrap; }
.ps-table th, .ps-table td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--line); }
.ps-table th:first-child, .ps-table td:first-child { text-align: left; }
.ps-table th { color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: 0.7rem; background: var(--card); }
.ps-table tr:last-child td { border-bottom: none; }
@media (prefers-color-scheme: dark) {
  .ps-bar-track { background: #294a34; }
  .ps-report-tab { background: #17301f; }
  .ps-divbar-track { background: #294a34; }
  .ps-divbar-zero { background: rgba(255,255,255,0.22); }
}

/* --- Setup / welcome -------------------------------------------------- */

.ps-setup { max-width: 480px; margin: 2rem auto; padding: 1.5rem; }

.ps-lang-switch { display: flex; gap: 8px; margin-bottom: 1rem; }
.ps-lang-btn { border: 1px solid var(--line); background: #fff; color: var(--g); border-radius: 10px; padding: 8px 10px; font-weight: 800; font-size: 0.85rem; }
.ps-lang-btn-active { background: var(--g); color: #fff; border-color: var(--g); }

.ps-autocomplete-results { border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--text); max-height: 280px; overflow: auto; margin-top: 5px; position: relative; z-index: 4; }
.ps-autocomplete-row { padding: 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.ps-autocomplete-row:last-child { border-bottom: none; }
.ps-autocomplete-row:active { background: var(--accent-surface); }

/* --- Modal (SwineSync's "quick-sheet": bottom sheet, not centered) ---- */

.ps-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(6, 61, 35, 0.45); align-items: flex-end; justify-content: center; z-index: 60; }
.ps-modal-overlay-open { display: flex; }
.ps-modal {
  background: #fff; width: 100%; max-width: 650px; max-height: 88vh; overflow-y: auto;
  border-radius: 22px 22px 0 0; padding: 1rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.ps-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.ps-modal-head button { background: none; border: none; font-size: 1.5rem; color: var(--muted); width: 44px; height: 44px; }

/* --- Dark mode: SwineSync's palette has no dark variant, so this keeps
   poultryWinner's own contrast-safe dark tokens rather than guessing at
   one — worth aligning later if SwineSync adds dark mode. */
@media (prefers-color-scheme: dark) {
  :root {
    --text: #EAF2ED; --bg: #10251a; --card: #17301f; --line: #294a34;
    --muted: #9fc2ac; --g: #3fae6e; --g2: #57c883;
    --red: #e66767; /* light-mode #b42318 only clears 2.16:1 on this dark card — this step clears 4.4:1 */

    /* Dataviz categorical palette, dark-mode steps — same 8 hues as the
       light-mode set below, re-stepped for the dark card (#17301f) and
       validated with scripts/validate_palette.js --mode dark. */
    --viz-1: #3987e5;
    --viz-2: #d95926;
    --viz-3: #199e70;
    --viz-4: #c98500;
    --viz-5: #d55181;
    --viz-6: #008300;
    --viz-7: #9085e9;
    --viz-8: #e66767;
    --viz-other: #79776e;
  }
  .ps-summary-stat { background: #17301f; }
  .ps-tag { background: rgba(63,174,110,0.18); }
  form input, form select, form textarea { background: #17301f; border-color: #294a34; color: var(--text); }
  .ps-btn-secondary { background: #17301f; }
  .ps-autocomplete-row:active { background: #294a34; }
  /* The bug from the screenshot: these all had a LIGHT background
     hardcoded with no dark-mode override, while their own text was
     already correctly using the (light-in-dark-mode) --text token —
     light-on-white, unreadable. Same root cause, four places; fixing
     all of them this time, not just the one that got screenshotted. */
  .ps-modal { background: var(--card); }
  .ps-modal-head button { color: var(--muted); }
  .ps-empty { background: #17301f; border-color: #294a34; }
  .ps-btn-primary:active { background: #2c8f5a; }
  .ps-lang-btn { background: #17301f; }
}

/* --- Desktop-width pass (brief §13 — explicitly lower priority than
   navigation/mobile/architecture, so this is deliberately a light,
   low-risk improvement rather than a full sidebar shell: the existing
   mobile-first layout scales up cleanly enough that a sidebar rebuild
   would be a lot of new surface area for a screen size the brief itself
   didn't prioritize testing. Bottom-tab nav is kept at every width per
   §13's own "unless the existing architecture specifically requires
   otherwise" — this app's whole nav/FAB/modal system is built around it,
   so replacing it here would be exactly that unnecessary rewrite §18
   warns against, for a lower-priority item. What DOES change: content
   stops stretching edge-to-edge into unreadably long lines, the module
   grid uses the extra width for a 3rd column instead of empty margin,
   and the bottom nav/FAB stay centered under the same reading column
   instead of spanning the full browser width. */
@media (min-width: 860px) {
  .ps-tab-content { max-width: 900px; padding-bottom: 6rem; }
  .ps-top > .ps-top-info, .ps-top { max-width: 900px; margin: 0 auto; width: 100%; }
  .ps-top { padding-left: max(16px, calc(50% - 450px)); padding-right: max(16px, calc(50% - 450px)); }
  .ps-nav { max-width: 900px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  .ps-fab { right: max(1.25rem, calc(50% - 450px + 1.25rem)); }
  .ps-module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ps-modal { max-width: 560px; border-radius: 22px; margin-bottom: 2rem; }
}

/* Explicit theme preference. System default remains the default when no
   data-theme attribute is present. These tokens intentionally preserve the
   existing SwineSync/poultryWinner green identity in both modes. */
html[data-theme="light"] { --text:#122018; --bg:#f5f7f6; --card:#ffffff; --line:#d0d9d3; --muted:#4a5a52; --g:#0a6b38; --g2:#0d8446; --red:#a61b13; --gold:#7a5200; --accent-surface:#e8f5ee; --soft-surface:#f3faf6; --empty-surface:#fbfdfc; --track:#e2ebe5; }
html[data-theme="dark"] { --text:#EAF2ED; --bg:#10251a; --card:#17301f; --line:#294a34; --muted:#9fc2ac; --g:#3fae6e; --g2:#57c883; --red:#e66767; --gold:#d5a33a; --accent-surface:#203c2a; --soft-surface:#17301f; --empty-surface:#17301f; --track:#294a34; }
html[data-theme="dark"] .ps-summary-stat { background:#17301f; }
html[data-theme="dark"] .ps-tag { background:rgba(63,174,110,.18); }
html[data-theme="dark"] form input, html[data-theme="dark"] form select, html[data-theme="dark"] form textarea { background:#17301f; border-color:#294a34; color:var(--text); }
html[data-theme="dark"] .ps-btn-secondary { background:#17301f; }
html[data-theme="dark"] .ps-modal { background:var(--card); }
html[data-theme="dark"] .ps-empty { background:#17301f; border-color:#294a34; }
html[data-theme="dark"] .ps-lang-btn { background:#17301f; }
html[data-theme="dark"] .ps-bell-btn { background:#17301f; }
html[data-theme="light"] .ps-modal { background:#fff; }

/* Explicit theme-safe surfaces: light mode never pairs green text with a green surface. */
html[data-theme="light"] .ps-summary-stat,
html[data-theme="light"] .ps-list-row,
html[data-theme="light"] .ps-card,
html[data-theme="light"] .ps-module-card,
html[data-theme="light"] .ps-modal { color: var(--text); background: var(--card); }
html[data-theme="light"] .ps-tag,
html[data-theme="light"] .ps-quick-btn,
html[data-theme="light"] .ps-clickable:active,
html[data-theme="light"] .ps-module-card:active,
html[data-theme="light"] .ps-bell-btn:active { background: var(--accent-surface); color: var(--text); }
html[data-theme="light"] .ps-tag { color: var(--g); }
html[data-theme="light"] .ps-row-icon,
html[data-theme="light"] .ps-module-icon { color: var(--g); background: var(--accent-surface); }
html[data-theme="light"] .ps-row-icon-gold,
html[data-theme="light"] .ps-module-icon-gold { color: var(--gold); background: #fff5dc; }
html[data-theme="light"] .ps-muted { color: var(--muted); }
html[data-theme="light"] form input,
html[data-theme="light"] form select,
html[data-theme="light"] form textarea { background: var(--card); color: var(--text); border-color: #c7d5cc; }
html[data-theme="light"] .ps-btn-secondary { background: var(--card); color: var(--g); }
html[data-theme="light"] .ps-empty { background: var(--empty-surface); border-color: #bfd2c5; }
html[data-theme="light"] .ps-setting-toggle { background: var(--card); }

.ps-setting-toggle { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:56px; padding:12px 0; border-bottom:1px solid var(--line); margin:0; }
.ps-setting-toggle:last-of-type { border-bottom:0; }
.ps-setting-toggle span { min-width:0; display:flex; flex-direction:column; gap:2px; }
.ps-setting-toggle small { color:var(--muted); font-size:.82rem; font-weight:500; line-height:1.35; }
.ps-setting-toggle input[type="checkbox"] { width:44px; height:24px; min-height:24px; margin:0; flex:0 0 auto; accent-color:var(--g2); }
.ps-biometric-screen { max-width:460px; margin:0 auto; text-align:center; padding-top:15vh; }
.ps-biometric-icon { width:72px; height:72px; margin:0 auto 18px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--g); background:rgba(15,138,79,.10); }
.ps-biometric-icon svg { display:block; }
.ps-theme-options { display:flex; flex-direction:column; gap:0; padding:0; overflow:hidden; }
.ps-theme-option { display:flex; align-items:center; gap:12px; min-height:60px; padding:10px 14px; border-bottom:1px solid var(--line); cursor:pointer; }
.ps-theme-option:last-child { border-bottom:0; }
.ps-theme-option input { width:auto; margin:0; accent-color:var(--g2); }
.ps-theme-option span { display:flex; flex-direction:column; gap:2px; }
.ps-theme-option small { color:var(--muted); font-size:.82rem; }


/* Build 36 readability hardening */
html[data-theme="light"] .ps-report-tab,html[data-theme="light"] .ps-filter-pill{color:#17231d;background:#fff;border-color:#b8c8be;}
html[data-theme="light"] .ps-report-tab-active,html[data-theme="light"] .ps-filter-pill-active{color:#fff;background:#075b31;border-color:#075b31;}
html[data-theme="dark"] .ps-report-tab,html[data-theme="dark"] .ps-filter-pill{color:#eaf2ed;background:#1a2820;border-color:#466052;}
html[data-theme="dark"] .ps-report-tab-active,html[data-theme="dark"] .ps-filter-pill-active{color:#07160d;background:#57c883;border-color:#57c883;}
.ps-report-timeline-card{border-left:4px solid var(--g2);}.ps-report-period-badge{display:inline-flex;align-items:center;min-height:32px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:var(--soft-surface);color:var(--text);font-size:.78rem;font-weight:800;white-space:nowrap}.ps-report-trend-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:10px}.ps-report-trend-strip span{padding:8px 6px;border-radius:8px;background:var(--soft-surface);border:1px solid var(--line);color:var(--text);text-align:center;font-size:.72rem;font-weight:800}
.ps-bell-btn{background:var(--card)!important;color:var(--text)!important;border:2px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.08)}html[data-theme="light"] .ps-bell-btn{background:#fff!important;color:#17231d!important;border-color:#aebfb5}html[data-theme="dark"] .ps-bell-btn{background:#202b25!important;color:#eaf2ed!important;border-color:#557061}.ps-bell-btn:hover{border-color:var(--g2)}
.ps-money-positive{color:var(--g)!important;font-weight:800}.ps-money-negative{color:var(--red)!important;font-weight:800}
.ps-role-grid{display:grid;gap:10px}.ps-role-card{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--card)}.ps-role-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.ps-permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px}.ps-permission-item{display:flex;align-items:center;gap:7px;min-height:40px;padding:7px 8px;border:1px solid var(--line);border-radius:9px;background:var(--soft-surface);font-size:.82rem;font-weight:700}.ps-permission-item input{width:auto;margin:0}.ps-credential-note{border-left:3px solid var(--g2);padding-left:10px}.ps-error{color:var(--red);font-weight:700;min-height:20px;margin:.5rem 0}.ps-user-login{max-width:500px}
#ps-full-report-print{display:none}@media print{body.ps-printing-full-report>*:not(#ps-full-report-print){display:none!important}body.ps-printing-full-report #ps-full-report-print{display:block!important}#ps-full-report-print{color:#111;background:#fff}.ps-full-report-inner{max-width:none;padding:20px}.ps-print-report-section{page-break-before:always}.ps-print-report-section:first-of-type{page-break-before:auto}.ps-print-report-section .ps-card{break-inside:avoid;box-shadow:none!important}.ps-print-report-section .ps-report-export-row{display:none!important}.ps-print-report-section .ps-linechart-tooltip{display:none!important}}
@media(max-width:420px){.ps-report-trend-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Build 37 readability/report export layer */
.ps-report-control { display:flex; flex-direction:column; gap:5px; font-weight:800; color:var(--text); }
.ps-report-control span, .ps-comparison-selects span { font-size:.82rem; color:var(--muted); }
.ps-report-comparison-card { margin-top:10px; }
.ps-comparison-selects { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0; }
.ps-comparison-selects label { display:flex; flex-direction:column; gap:5px; }
.ps-comparison-table { border:1px solid var(--line); border-radius:12px; overflow:auto; }
.ps-comparison-row { display:grid; grid-template-columns:minmax(125px,1.4fr) repeat(3,minmax(95px,1fr)); gap:8px; align-items:center; padding:9px 10px; border-bottom:1px solid var(--line); font-size:.85rem; min-width:430px; }
.ps-comparison-row:last-child { border-bottom:0; }
.ps-comparison-head { background:var(--soft-surface); color:var(--text); }
.ps-money-positive { color:#087f3e !important; font-weight:850; }
.ps-money-negative { color:#c62828 !important; font-weight:850; }
.ps-help-list > div { padding:10px 0; border-bottom:1px solid var(--line); }
.ps-help-list > div:last-child { border-bottom:0; }
.ps-brand-card { text-align:center; padding:28px 18px; }
.ps-brand-mark { font-size:2rem; font-weight:900; letter-spacing:-.04em; color:var(--g2); margin-bottom:8px; }
.ps-bell-btn { min-width:44px; min-height:44px; }

/* Reports use print-sized typography rather than the tiny screen SVG labels. */
@media print {
  html, body { font-family: Arial, Helvetica, sans-serif !important; font-size: 12pt !important; line-height:1.4 !important; -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  #ps-full-report-print { font-size:12pt !important; color:#111 !important; background:#fff !important; }
  #ps-full-report-print h1 { font-size:22pt !important; color:#111 !important; }
  #ps-full-report-print h2 { font-size:17pt !important; color:#111 !important; margin-top:18pt !important; }
  #ps-full-report-print h3 { font-size:13pt !important; color:#111 !important; }
  #ps-full-report-print .ps-muted { font-size:10.5pt !important; color:#333 !important; }
  #ps-full-report-print .ps-card { font-size:10.5pt !important; border:1px solid #bbb !important; background:#fff !important; color:#111 !important; }
  #ps-full-report-print .ps-linechart { width:100% !important; min-height:190px !important; overflow:visible !important; }
  #ps-full-report-print .ps-linechart-axis-label { font-size:10px !important; fill:#333 !important; }
  #ps-full-report-print .ps-linechart-value-label { font-size:11px !important; fill:#111 !important; }
  #ps-full-report-print .ps-report-tabs, #ps-full-report-print .ps-report-export-row, #ps-full-report-print select { display:none !important; }
  #ps-full-report-print .ps-chart-green, #ps-full-report-print .ps-chart-red, #ps-full-report-print .ps-chart-orange, #ps-full-report-print .ps-chart-gold { break-inside:avoid; }
  #ps-full-report-print .ps-donut { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  #ps-full-report-print svg, #ps-full-report-print svg * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  #ps-full-report-print .ps-comparison-row { font-size:10.5pt !important; }
}
@media(max-width:520px){.ps-comparison-selects{grid-template-columns:1fr}.ps-comparison-row{grid-template-columns:120px repeat(3,100px)}}
.ps-report-overview { margin:10px 0; }
.ps-report-overview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.ps-report-kpi { border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--card); min-height:72px; }
.ps-report-kpi span { display:block; color:var(--muted); font-size:.75rem; font-weight:750; }
.ps-report-kpi strong { display:block; margin-top:4px; font-size:1.05rem; color:var(--text); }
.ps-report-kpi-green { border-top:3px solid var(--g2); }
.ps-report-kpi-red { border-top:3px solid var(--red); }
.ps-report-kpi-orange { border-top:3px solid var(--viz-2); }
.ps-report-kpi-gold { border-top:3px solid var(--gold); }
@media(max-width:420px){.ps-report-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}


/* Build 39: emoji-forward visual trial. Functional navigation stays SVG,
   while Operations/Settings use familiar emoji inside the same containers. */
.ps-settings-group { margin-top: 18px; }
.ps-settings-group-title { margin: 0 0 8px; font-size: .86rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ps-menu-row .ps-row-icon { font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; font-size: 1.45rem; line-height: 1; display:inline-flex; align-items:center; justify-content:center; }
.ps-module-icon { font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; font-size: 2rem; line-height:1; display:flex; align-items:center; justify-content:center; }
.ps-support-report-card { border-left: 3px solid var(--red); }
/* Build 52: Log out sits on its own at the end of Settings (no group
   title above it, by design — it isn't "part of" Account & app, it's the
   exit from the whole screen), with extra top margin so it reads as a
   deliberate final action rather than one more row in the list above it. */
.ps-settings-group-logout { margin-top: 30px; }
.ps-logout-row .ps-row-text strong { color: var(--red); }
/* Build 50 — plan comparison and emoji navigation */
.ps-nav-emoji{font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;min-height:23px;filter:saturate(.9)}
.ps-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ps-plan-table{width:100%;border-collapse:collapse;min-width:480px;font-size:.9rem}
.ps-plan-table th,.ps-plan-table td{padding:10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ps-plan-table th:not(:first-child),.ps-plan-table td:not(:first-child){text-align:center}
.ps-plan-table th{background:var(--soft-surface);color:var(--text);font-weight:800}
.ps-plan-table td:nth-child(3){font-weight:700}
html[data-theme="dark"] .ps-plan-table th{background:var(--accent-surface)}
@media(max-width:720px){.ps-plan-table{font-size:.82rem}}
@media(max-width:430px){.ps-nav-btn{font-size:.7rem}.ps-nav-emoji{font-size:19px}}


/* Legal one-liner on farm create */
.ps-legal-line {
  font-size: 13px;
  line-height: 1.45;
  margin: 0.75rem 0;
  color: var(--muted);
  white-space: normal;
}
.ps-legal-link {
  display: inline;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: var(--g);
  font-weight: 700;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.ps-legal-link:active { opacity: 0.8; }

.ps-fab {
  z-index: 40;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.ps-fab-dragging {
  cursor: grabbing;
  opacity: 0.92;
  box-shadow: 0 14px 32px rgba(11, 107, 58, 0.4);
}

.ps-plan-card { margin-top: 0.6rem; }
.ps-plan-current { border-color: var(--g); box-shadow: 0 0 0 1px var(--g); }
.ps-table-wrap { overflow-x: auto; }
.ps-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ps-table th, .ps-table td { text-align: left; padding: 0.4rem 0.35rem; border-bottom: 1px solid var(--line); }

.ps-plan-features { margin: 0.5rem 0 0.75rem; padding-left: 1.15rem; color: var(--muted); font-size: 0.92rem; }
.ps-plan-features li { margin: 0.25rem 0; }
.ps-bill-options { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.6rem 0; }
.ps-bill-option { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.55rem 0.65rem; border: 1px solid var(--line); border-radius: 12px; background: var(--soft-surface); cursor: pointer; }
.ps-bill-option-on { border-color: var(--g); background: var(--accent-surface); }
.ps-bill-option input { margin-top: 0.2rem; }
.ps-plan-card .ps-btn { margin-top: 0.35rem; }


/* Subscription — compact professional layout */
.ps-sub-summary .ps-tight { margin: 0.4rem 0 0; font-size: 0.88rem; }
.ps-plan-stack { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.85rem; }
.ps-plan-tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0.85rem 1rem;
}
.ps-plan-tile.is-current { border-color: var(--g); box-shadow: 0 0 0 1px var(--g); }
.ps-plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.ps-plan-top strong { font-size: 1.05rem; }
.ps-plan-price { font-weight: 700; color: var(--g); margin-bottom: 0.35rem; }
.ps-plan-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--g);
  background: var(--accent-surface);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
}
.ps-bill-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.35rem 0 0.5rem; }
.ps-bill-chip {
  border: 1px solid var(--line);
  background: var(--soft-surface);
  color: var(--text);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.ps-bill-chip.on {
  border-color: var(--g);
  background: var(--accent-surface);
  color: var(--g);
}
.ps-plan-features {
  margin: 0.25rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
}
.ps-plan-features li { margin: 0.15rem 0; }
.ps-plan-tile .ps-pay-btn { width: 100%; margin-top: 0.65rem; }
.ps-row-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.ps-pay-pending { font-size: 0.92rem; }

/* Permission checkboxes — clear empty vs checked */
.ps-permission-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  position: relative;
}
html[data-theme="dark"] .ps-permission-item { background: var(--card); }
.ps-permission-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.ps-perm-box {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 2px solid #8a9a90;
  border-radius: 5px;
  background: #fff;
  box-sizing: border-box;
}
.ps-permission-item.is-checked,
.ps-permission-item:has(input:checked) {
  border-color: var(--g);
  background: var(--accent-surface);
}
.ps-permission-item.is-checked .ps-perm-box,
.ps-permission-item:has(input:checked) .ps-perm-box {
  border-color: var(--g);
  background: var(--g);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.ps-permission-item:has(input:disabled) { opacity: 0.75; cursor: default; }

/* Users table */
.ps-users-table-wrap { max-height: min(60vh, 480px); overflow: auto; margin-top: 0.5rem; }
.ps-users-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.ps-users-table th {
  position: sticky; top: 0; background: var(--card); z-index: 1;
  text-align: left; padding: 0.45rem 0.35rem; border-bottom: 1px solid var(--line);
  color: var(--muted); font-weight: 700; font-size: 0.75rem; text-transform: uppercase;
}
.ps-users-table td { padding: 0.55rem 0.35rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.ps-user-un { font-size: 0.8rem; }
.ps-user-perm-cell { max-width: 9rem; color: var(--muted); font-size: 0.8rem; }
.ps-user-actions-cell { white-space: nowrap; }
.ps-user-row-disabled { opacity: 0.55; }
.ps-link-danger { color: var(--red) !important; }
.ps-role-line { margin: 0.35rem 0; font-size: 0.9rem; color: var(--muted); }
.ps-role-line strong { color: var(--text); }
.ps-tight { margin: 0.4rem 0 0; font-size: 0.85rem; }
.ps-logout-row { border: 1px solid var(--line); }

/* Build 94: tappable records + flock pencil */
.ps-rec-tap { cursor: pointer; }
.ps-rec-tap:active { background: var(--soft-surface); }
.ps-flock-pencil { font-size: 1rem; padding: 0 .3rem; vertical-align: middle; }