/* ============================================================================
BAJ Farm OS — Unified Design Language baj-unified.css · v1.0.0
Designed & Developed by: Babatunde Adedeji Adelaja · 2026
----------------------------------------------------------------------------
ONE coherent visual language for the signed-in app. Loaded LAST so it wins
the cascade over the dark retrofit and legacy page styles. Principles:
• EMERALD is the primary brand color (surfaces of authority: modal
headers, primary buttons, table heads, active states' text).
• GOLD is an ACCENT ONLY: icons, hairline borders, highlights, badges,
focus rings, active indicators. Never a button fill, never a surface.
• Modal BODIES read on white / light ivory. Modal HEADERS are emerald
with white titles and controls.
• One card, one input, one table, one button system — styled via shared
tokens below, matched to the existing markup's canonical class names
(.scrim/.mbox/.mhd/.mbody, .btn, table.std/.mbody table, .ap-stat,
.cp-card) so no markup or business logic changes.
Dashboard (.exd-pro), sidebar (.baj-sb) and Workspace cards already follow
this language via their own scoped sheets and are not overridden here.
============================================================================ */
:root{
--u-emerald:#0B4D3A; --u-emerald-2:#0f5a43; --u-emerald-deep:#063d2a;
/* v1.3 rich slate reading surface + high-contrast type scale
hierarchy: ink(headings, near-black) > ink-2(labels, charcoal)
> body(dark gray) > soft(helper) > ph(placeholders only) */
--u-ivory:#E9EEF3; --u-white:#ffffff; --u-cream:#DEE5EC;
--u-ink:#0F172A; --u-ink-2:#1F2937; --u-body:#334155;
--u-soft:#5B6472; --u-ph:#94A3B8;
--u-line:#C9D3DD; --u-line-2:#DDE4EB; --u-input-line:#B9C4D0;
--u-gold:#c8923a; --u-gold-soft:#e7cf94; --u-gold-wash:rgba(200,146,58,.14);
--u-danger:#a8432e; --u-danger-deep:#8a3422;
--u-r:12px; --u-r-lg:16px;
--u-sh:0 2px 6px rgba(20,30,25,.08),0 18px 44px -24px rgba(20,30,25,.35);
--u-focus:0 0 0 3px rgba(200,146,58,.35);
}
/* ── MODALS: emerald header · white/ivory reading body ─────────────────── */
.scrim .mbox{
background:var(--u-ivory) !important; color:var(--u-ink);
border:1px solid var(--u-gold-wash) !important; border-radius:var(--u-r-lg) !important;
box-shadow:var(--u-sh) !important; overflow:hidden;
}
.scrim .mbox .mhd,.scrim .mbox > .mhd{
background:linear-gradient(135deg,var(--u-emerald-2),var(--u-emerald-deep)) !important;
border-bottom:2px solid var(--u-gold) !important; /* gold = accent hairline */
}
.scrim .mbox .mhd h2,.scrim .mbox .mhd h3{color:#ffffff !important;font-weight:700}
.scrim .mbox .mhd .mcl{color:#ffffff !important;opacity:.85;background:transparent}
.scrim .mbox .mhd .mcl:hover{opacity:1}
.scrim .mbox .mbody{background:var(--u-ivory);color:var(--u-ink)}
.scrim .mbox .mbody h3,.scrim .mbox .mbody h4{color:var(--u-emerald)}
.scrimhead{background:linear-gradient(135deg,var(--u-emerald-2),var(--u-emerald-deep)) !important;border-bottom:2px solid var(--u-gold) !important}
.scrimhead h3{color:#fff !important}
.scrimhead .x{color:#fff !important;background:transparent}
/* ── CARDS: one light card component ───────────────────────────────────── */
.mbody .card,.mbody .panel,.mbody .box,.mbody .tile,
.pg .card,.pg .panel,.pg .box,.ap-stat{
background:var(--u-white) !important;
border:1px solid var(--u-line) !important;
border-left:3px solid var(--u-gold) !important; /* gold accent edge */
border-radius:var(--u-r) !important;
box-shadow:0 1px 3px rgba(20,30,25,.06) !important;
color:var(--u-ink) !important;
backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
.ap-stat-v{color:var(--u-emerald) !important}
.ap-stat-l{color:var(--u-soft) !important}
/* ── FORMS: one input system (modal bodies + light pages) ──────────────── */
.mbody input:not([type=checkbox]):not([type=radio]),.mbody select,.mbody textarea,
.scrim .mbox input:not([type=checkbox]):not([type=radio]),.scrim .mbox select,.scrim .mbox textarea{
background:var(--u-white) !important; color:var(--u-ink-2) !important;
border:1px solid var(--u-input-line,#B9C4D0) !important; border-radius:9px !important;
padding:9px 12px; font:inherit;
box-shadow:inset 0 1px 2px rgba(15,23,42,.05); /* crisp separation from cards */
}
.mbody input::placeholder,.mbody textarea::placeholder{color:var(--u-ph) !important;opacity:1}
.mbody input:focus,.mbody select:focus,.mbody textarea:focus,
.scrim .mbox input:focus,.scrim .mbox select:focus,.scrim .mbox textarea:focus{
outline:none !important; border-color:var(--u-emerald) !important; box-shadow:var(--u-focus) !important;
}
.mbody label{color:var(--u-ink-2)}
/* ── TABLES: one table component ────────────────────────────────────────── */
.mbody table,.scrim .mbox table,table.std{
width:100%; border-collapse:collapse; background:var(--u-white) !important;
border:1px solid var(--u-line) !important; border-radius:10px; overflow:hidden;
}
.mbody table th,.scrim .mbox table th,table.std th{
background:var(--u-emerald-deep) !important; color:#ffffff !important;
font-weight:700; padding:10px 12px; text-align:left;
border-bottom:2px solid var(--u-gold) !important; /* gold accent under head */
}
.mbody table td,.scrim .mbox table td,table.std td{
color:var(--u-ink) !important; padding:9px 12px;
border-bottom:1px solid var(--u-line-2) !important;
}
.mbody table tr:nth-child(even) td,.scrim .mbox table tr:nth-child(even) td{background:var(--u-ivory) !important}
/* ── BUTTONS: one shared system (emerald primary · gold accents only) ───── */
.btn,.btn-primary,button.primary,.cta{
background:linear-gradient(135deg,var(--u-emerald-2),var(--u-emerald-deep)) !important;
color:#ffffff !important; border:1px solid rgba(200,146,58,.35) !important;
border-radius:10px !important; font-weight:600;
box-shadow:0 8px 20px -10px rgba(6,61,42,.55) !important;
transition:transform .18s,box-shadow .18s;
}
.btn:hover,.btn-primary:hover,button.primary:hover,.cta:hover{
transform:translateY(-1px);
box-shadow:0 12px 26px -12px rgba(6,61,42,.65),0 0 0 1px var(--u-gold) !important; /* gold ring accent */
}
.btn.secondary,.btn-ghost,.btn-outline{
background:transparent !important; color:var(--u-emerald) !important;
border:1.5px solid var(--u-emerald) !important; border-radius:10px !important; box-shadow:none !important;
}
.btn.danger,.btn-danger,button.danger{
background:var(--u-danger) !important;color:#fff !important;border:none !important;border-radius:10px !important;
}
.mbody button:focus-visible,.btn:focus-visible{outline:none;box-shadow:var(--u-focus) !important}
/* ── ACCENT VOCABULARY: where gold lives ────────────────────────────────── */
.badge,.tag,.pill,.exd-badge{background:var(--u-gold-wash);color:#7a5a12;border:1px solid rgba(200,146,58,.4);border-radius:999px;font-weight:700}
.mbody a{color:var(--u-emerald);text-decoration:underline;text-decoration-color:var(--u-gold)}
.mbody hr{border:none;border-top:1px solid var(--u-line)}
/* ── Light-page helper text (Content Editor / Page Builder inline greys) ── */
.mbody p,.mbody li{color:var(--u-ink-2)}
.mbody .muted,.mbody small{color:var(--u-soft)}
/* ============================================================================
v1.1 — PREMIUM MODAL COMPONENT (UX redesign, shared layer only)
One reusable modal every admin module inherits automatically via the
canonical .scrim > .mbox > .mhd/.mbody skeleton. 8px spacing grid
(--u-s1..s6), compact header, card sections, grouped controls, modern
action bars, layered shadows, hairline borders, typographic hierarchy.
============================================================================ */
:root{
--u-s1:8px;--u-s2:16px;--u-s3:24px;--u-s4:32px;--u-s5:40px;--u-s6:48px;
--u-sh-modal:0 1px 2px rgba(10,20,15,.18),0 12px 28px -12px rgba(10,20,15,.35),0 40px 90px -30px rgba(6,40,28,.5);
}
/* scrim: focused, premium backdrop */
.scrim.on{background:rgba(4,24,17,.55) !important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* shell: responsive widths, contained height, layered shadow */
.scrim .mbox{
width:clamp(340px,92vw,720px) !important;max-width:92vw !important;
max-height:90vh;display:flex;flex-direction:column;
border:1px solid rgba(6,61,42,.14) !important;
box-shadow:var(--u-sh-modal) !important;
}
.scrim .mbox.lg{width:clamp(340px,94vw,980px) !important}
.scrim .mbox.sm{width:clamp(320px,92vw,460px) !important}
/* compact modern header: 52px, icon-aware title, quiet controls */
.scrim .mbox .mhd{
padding:0 var(--u-s2) !important;min-height:52px;flex:none;
display:flex;align-items:center;justify-content:space-between;gap:var(--u-s1);
}
.scrim .mbox .mhd h2,.scrim .mbox .mhd h3{
font-size:15.5px !important;letter-spacing:.01em;line-height:1.2;margin:0;
display:flex;align-items:center;gap:10px; /* consistent icon placement */
}
.scrim .mbox .mhd .mcl{
width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
font-size:18px;line-height:1;transition:background .15s;
}
.scrim .mbox .mhd .mcl:hover{background:rgba(255,255,255,.14)}
/* body: 8px rhythm, less dead space, scrolls independently */
.scrim .mbox .mbody{
padding:var(--u-s3) !important;overflow:auto;flex:1;
}
.scrim .mbox .mbody > * + *{margin-top:var(--u-s2)}
.scrim .mbox .mbody h3{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--u-emerald);margin:0}
.scrim .mbox .mbody h4{font-size:13px;color:var(--u-emerald)}
/* card sections instead of long forms: fieldsets & section blocks */
.mbody fieldset,.mbody .card,.mbody .panel,.mbody .box{
border:1px solid var(--u-line-2) !important;border-left:3px solid var(--u-gold) !important;
border-radius:var(--u-r) !important;background:var(--u-white) !important;
padding:var(--u-s2) !important;margin:0;
box-shadow:0 1px 2px rgba(15,23,42,.06),0 10px 24px -16px rgba(15,23,42,.25) !important; /* elevation off the slate surface */
}
.mbody fieldset legend{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--u-emerald);padding:0 6px}
/* grouped controls: the app's .ff field rows on the 8px grid */
.mbody .ff{display:flex;flex-direction:column;gap:6px;margin:0 0 var(--u-s2)}
.mbody .ff label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--u-ink-2);margin:0}
.mbody .ff input,.mbody .ff select,.mbody .ff textarea{width:100%;box-sizing:border-box;margin:0}
.mbody .ff + .ff{margin-top:0}
/* modern action bar: sticky footers & button rows become one component */
.mbox .mft,
.mbox .mbody > div[style*="sticky"]{
position:sticky;bottom:calc(-1 * var(--u-s3));margin:var(--u-s2) calc(-1 * var(--u-s3)) calc(-1 * var(--u-s3));
padding:var(--u-s2) var(--u-s3) !important;
background:linear-gradient(180deg,rgba(244,246,248,.6),var(--u-ivory) 30%) !important;
border-top:1px solid var(--u-line) !important;
display:flex;align-items:center;gap:var(--u-s1);justify-content:flex-end;
backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.mbox .mft button,.mbox .mbody > div[style*="sticky"] button{margin:0}
/* typography hierarchy inside modals */
.mbody{font-size:13.5px;line-height:1.55;color:var(--u-body)}
.mbody h2,.mbody strong,.mbody b,.mbody th{color:var(--u-ink)}
.mbody p,.mbody li,.mbody td{color:var(--u-body)}
.mbody table{font-size:12.8px}
.mbody .muted,.mbody small{font-size:12px}
/* compact tables inside the redesigned modal */
.mbody table th{padding:8px 12px !important;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.mbody table td{padding:8px 12px !important}
/* responsive: full-bleed sheets on small screens */
@media (max-width:640px){
.scrim .mbox,.scrim .mbox.lg,.scrim .mbox.sm{width:100vw !important;max-width:100vw !important;max-height:96vh;border-radius:14px 14px 0 0 !important}
.scrim .mbox .mbody{padding:var(--u-s2) !important}
}
@media (prefers-reduced-motion:reduce){
.scrim .mbox,.btn{transition:none !important}
}
/* ============================================================================
v1.4 — MODAL WORKSPACE LAYOUT (enterprise structure; colors unchanged)
Activated by baj-modal-pro.js tagging enhanced bodies with [data-upro].
Field runs become grouped info cards, helper text becomes a callout,
empty results become designed empty states — every modal, automatically.
============================================================================ */
.mbody[data-upro]{display:flex;flex-direction:column;gap:var(--u-s2)}
.mbody[data-upro] > * {margin:0 !important}
/* grouped controls: white info card, responsive 2-col field grid */
.u-group{
background:var(--u-white);border:1px solid var(--u-line-2);
border-left:3px solid var(--u-gold);border-radius:var(--u-r);
padding:var(--u-s2);display:grid;grid-template-columns:1fr 1fr;
gap:var(--u-s2) var(--u-s2);
box-shadow:0 1px 2px rgba(15,23,42,.06),0 10px 24px -16px rgba(15,23,42,.22);
}
.u-group .ff{margin:0 !important}
.u-group .ff:has(textarea),.u-group .ff:only-child{grid-column:1 / -1}
@media (max-width:560px){.u-group{grid-template-columns:1fr}}
/* info callout: leading helper text becomes guidance, not filler */
.u-callout{
display:flex;gap:10px;align-items:flex-start;
background:var(--u-white);border:1px solid var(--u-line-2);
border-left:3px solid var(--u-emerald);border-radius:var(--u-r);
padding:12px var(--u-s2);color:var(--u-body) !important;
font-size:12.8px;line-height:1.55;
}
.u-callout::before{content:"ℹ";flex:none;width:22px;height:22px;border-radius:7px;
display:inline-flex;align-items:center;justify-content:center;
background:rgba(11,77,58,.08);color:var(--u-emerald);font-weight:800;font-size:12px}
/* premium empty state */
.u-empty{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
padding:var(--u-s4) var(--u-s2) !important;text-align:center;
background:var(--u-white);border:1.5px dashed var(--u-line);border-radius:var(--u-r);
color:var(--u-soft) !important;font-size:13px;
}
.u-empty::before{content:"◇";font-size:22px;color:var(--u-gold);line-height:1}
/* premium typography details */
.mbody table{font-variant-numeric:tabular-nums}
.mbody h2{letter-spacing:-.01em}
.u-group .ff label{display:flex;align-items:center;gap:6px}
/* ============================================================================
v1.5 — REFERENCE DESIGN LANGUAGE (extracted from the Reset Password modal)
Its signature traits become system-wide: serif display titles, a branded
emerald frame, status/identity cards, and consistent action emphasis.
Structure only — colors and business logic unchanged.
============================================================================ */
/* branded shell frame: subtle emerald ring around every sheet */
.scrim .mbox{
border:1px solid rgba(6,61,42,.38) !important;
box-shadow:0 0 0 1px rgba(11,77,58,.12),var(--u-sh-modal) !important;
}
/* serif display titles — the reference's typographic voice, everywhere */
.scrim .mbox .mhd h2,.scrim .mbox .mhd h3,.scrimhead h3{
font-family:'Cormorant Garamond',Georgia,serif !important;
font-size:18px !important;font-weight:700 !important;letter-spacing:.005em;
}
/* status / identity cards (the reference's email band & error panel,
generalized). .err-msg is the app's shared error class — mapped in. */
.u-status,.mbody .err-msg{
display:block;border-radius:10px;padding:10px 13px;
font-size:12.8px;font-weight:600;line-height:1.5;
background:var(--u-white);border:1px solid var(--u-line-2);
border-left:3px solid var(--u-emerald);color:var(--u-body);
}
.u-status.ok {border-left-color:#1f8a4c;background:#eef7f1;color:#14532d}
.u-status.warn{border-left-color:var(--u-gold);background:#fbf6ea;color:#7a5a12}
.u-status.err,.mbody .err-msg{border-left-color:var(--u-danger);background:#fdf1ee;color:#8a2a18}
.u-band{
background:rgba(11,77,58,.07);border:1px solid rgba(11,77,58,.18);
border-radius:10px;padding:10px 13px;font-weight:700;color:var(--u-emerald);
}
/* consistent action emphasis: small dialogs commit full-width (reference),
larger sheets keep the right-aligned footer bar */
.scrim .mbox.sm .mft{justify-content:stretch}
.scrim .mbox.sm .mft .btn,.scrim .mbox.sm .mft button.primary{flex:1;width:100%}
/* footer button order: secondary/ghost before primary, consistent spacing */
.mft .btn-ghost,.mft .btn.secondary,.mft .btn-outline{order:-1}
/* ============================================================================
v2.0 — BAJ FARM OS MODAL STANDARD (product decision: the Reset Password
modal IS the design language). EVERY .scrim > .mbox inherits: emerald body,
white typography, white serif title, gold divider, white cards & inputs as
readable islands with dark text. Appended last: overrides all earlier
light-surface rules by cascade. One theme — no beige/cream/slate remains.
============================================================================ */
.scrim .mbox{
background:linear-gradient(165deg,#0a4531 0%,#063d2a 55%,#052e20 100%) !important;
color:#f4ede0;
}
.scrim .mbox .mbody{background:transparent !important;color:#f2f7f0 !important}
.scrim .mbox .mhd{background:rgba(0,0,0,.18) !important;border-bottom:2px solid var(--u-gold) !important}
/* typography on the emerald canvas */
.mbody[data-upro],.scrim .mbox .mbody{color:#f2f7f0}
.scrim .mbox .mbody h3{color:#d4f0e4;border:none}
.scrim .mbox .mbody h4,.scrim .mbox .mbody strong,.scrim .mbox .mbody b{color:#ffffff}
.scrim .mbox .mbody p,.scrim .mbox .mbody li{color:#e6f2ea}
.scrim .mbox .mbody .muted,.scrim .mbox .mbody small{color:rgba(255,255,255,.72)}
.scrim .mbox .mbody label,.mbody .ff label{color:#d4f0e4}
.mbody a{color:#f3d79a;text-decoration-color:var(--u-gold)}
/* white islands: cards, groups, tables & status keep DARK text subtrees */
.mbody .u-group,.mbody fieldset,.mbody .card,.mbody .panel,.mbody .box,.mbody .tile{
background:#ffffff !important;border-color:rgba(255,255,255,.25) !important;
color:var(--u-body) !important;
}
.mbody .u-group .ff label,.mbody fieldset label{color:#1F2937 !important}
.mbody .u-group p,.mbody .card p,.mbody .panel p{color:#334155 !important}
.mbody table{background:#ffffff !important;border-color:rgba(255,255,255,.28) !important}
.mbody table td{color:#334155 !important}
.u-status,.mbody .err-msg{background:#ffffff}
.u-band{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#f4ede0}
/* callout & empty state on emerald */
.u-callout{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.2);border-left-color:var(--u-gold);color:#e6f2ea !important}
.u-callout::before{background:rgba(255,255,255,.16);color:#f3d79a}
.u-empty{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.28);color:#d8e8de !important}
/* buttons on emerald: primary emerald w/ gold hairline, secondary white */
.mbox .btn,.mbox .btn-primary,.mbox button.primary{
border:1px solid rgba(224,169,74,.55) !important;
}
.mbox .btn.secondary,.mbox .btn-ghost,.mbox .btn-outline{
background:#ffffff !important;color:var(--u-emerald) !important;border:1px solid rgba(255,255,255,.6) !important;
}
/* footer bar: emerald glass instead of slate */
.mbox .mft,.mbox .mbody > div[style*="sticky"]{
background:linear-gradient(180deg,rgba(5,46,32,.35),rgba(5,46,32,.92) 40%) !important;
border-top:1px solid rgba(224,169,74,.4) !important;
}
/* inputs stay white with dark text — crisp on the emerald canvas */
.mbody input:not([type=checkbox]):not([type=radio]),.mbody select,.mbody textarea{
border-color:rgba(255,255,255,.35) !important;
}
/* ============================================================================
v2.1 — EMERALD DEPTH SYSTEM (final product decision)
Depth comes from emerald shades, not white boxes. White is reserved for
inputs, icons, status highlights and small badges. Typography is a strict
neutral hierarchy — no pale green, no washed gray on emerald. All pairs AA+.
Surfaces: body #063d2a · section cards #0d5138 · info panels #04301f
============================================================================ */
/* typography hierarchy (replaces the mint tones) */
.scrim .mbox .mhd h2,.scrim .mbox .mhd h3{color:#ffffff !important} /* title: white serif bold */
.scrim .mbox .mbody h3{color:#ffffff;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.scrim .mbox .mbody h4,.scrim .mbox .mbody strong,.scrim .mbox .mbody b{color:#ffffff;font-weight:700}
.scrim .mbox .mbody,.mbody[data-upro]{color:#E5E7EB !important;font-weight:500}
.scrim .mbox .mbody p,.scrim .mbox .mbody li{color:#E5E7EB;font-weight:500}
.scrim .mbox .mbody label,.mbody .ff label,.mbody .u-group .ff label,.mbody fieldset label{
color:#F8FAFC !important;font-weight:600 !important;
}
.scrim .mbox .mbody .muted,.scrim .mbox .mbody small,.u-empty{color:#CBD5E1 !important}
.mbody a{color:#f3d79a}
/* cards: emerald depth instead of white islands */
.mbody .u-group,.mbody fieldset,.mbody .card,.mbody .panel,.mbody .box,.mbody .tile{
background:linear-gradient(180deg,#0f5a40,#0d5138) !important;
border:1px solid rgba(255,255,255,.14) !important;
border-left:3px solid var(--u-gold) !important; /* gold accent line */
color:#E5E7EB !important;
box-shadow:0 1px 2px rgba(0,0,0,.25),0 12px 26px -16px rgba(0,0,0,.5) !important;
}
.mbody .card,.mbody .panel,.mbody .box,.mbody .tile{border-left:1px solid rgba(255,255,255,.14) !important} /* gold only where needed */
.mbody .u-group p,.mbody .card p,.mbody .panel p{color:#E5E7EB !important}
/* info panels: darker emerald */
.u-callout{background:#04301f !important;border:1px solid rgba(255,255,255,.10) !important;border-left:3px solid var(--u-gold) !important;color:#E5E7EB !important}
.u-callout::before{background:rgba(255,255,255,.10);color:#f3d79a}
.u-band{background:#04301f;border-color:rgba(255,255,255,.12);color:#F8FAFC}
.u-empty{background:#04301f !important;border-color:rgba(255,255,255,.22) !important}
/* tables: full emerald system, alternating shades */
.mbody table,.scrim .mbox table{background:transparent !important;border:1px solid rgba(255,255,255,.14) !important}
.mbody table th,.scrim .mbox table th{background:#04301f !important;color:#ffffff !important;border-bottom:2px solid var(--u-gold) !important}
.mbody table td,.scrim .mbox table td{color:#E5E7EB !important;border-bottom:1px solid rgba(255,255,255,.08) !important;background:#063d2a !important}
.mbody table tr:nth-child(even) td,.scrim .mbox table tr:nth-child(even) td{background:#0a4531 !important}
/* inputs: white, dark text, stronger border & focus */
.mbody input:not([type=checkbox]):not([type=radio]),.mbody select,.mbody textarea,
.scrim .mbox input:not([type=checkbox]):not([type=radio]),.scrim .mbox select,.scrim .mbox textarea{
background:#ffffff !important;color:#1F2937 !important;
border:1px solid rgba(255,255,255,.55) !important;
}
.mbody input:focus,.mbody select:focus,.mbody textarea:focus,
.scrim .mbox input:focus,.scrim .mbox select:focus,.scrim .mbox textarea:focus{
border-color:var(--u-gold) !important;
box-shadow:0 0 0 3px rgba(224,169,74,.35),0 0 0 1px #ffffff inset !important;
}
.mbody input::placeholder,.mbody textarea::placeholder{color:#6B7280 !important} /* gray, inputs only */
/* buttons: emerald primary · emerald outline secondary · brand-red danger */
.mbox .btn.secondary,.mbox .btn-ghost,.mbox .btn-outline{
background:transparent !important;color:#ffffff !important;
border:1.5px solid rgba(127,214,169,.75) !important;
}
.mbox .btn.danger,.mbox .btn-danger,.mbox button.danger{background:#a8432e !important;color:#fff !important}
/* status highlights & small badges may stay white (reserved use) */
.u-status,.mbody .err-msg{background:#ffffff}
.badge,.tag,.pill{background:#ffffff;color:#7a5a12}
/* ============================================================================
v2.2 — BAJ OS CONTROL SYSTEM (final): every field, select, textarea,
checkbox, radio, date & search control is EMERALD with white text and gold
accents. No default browser appearance, no white fields, one dropdown
language. Overrides all earlier input rules by cascade position.
============================================================================ */
.mbody input:not([type=checkbox]):not([type=radio]),.mbody select,.mbody textarea,
.scrim .mbox input:not([type=checkbox]):not([type=radio]),.scrim .mbox select,.scrim .mbox textarea,
.pg .ff input,.pg .ff select,.pg .ff textarea{
background:#04301f !important;color:#ffffff !important;font-weight:600;
border:1px solid rgba(224,169,74,.55) !important;border-radius:10px !important;
padding:10px 14px !important;box-shadow:inset 0 1px 3px rgba(0,0,0,.35);
appearance:none;-webkit-appearance:none;color-scheme:dark;
}
.mbody input::placeholder,.mbody textarea::placeholder,
.scrim .mbox input::placeholder,.scrim .mbox textarea::placeholder{
color:rgba(255,255,255,.65) !important;font-weight:500;
}
.mbody input:focus,.mbody select:focus,.mbody textarea:focus,
.scrim .mbox input:focus,.scrim .mbox select:focus,.scrim .mbox textarea:focus{
border-color:#e0a94a !important;
box-shadow:0 0 0 3px rgba(224,169,74,.35),inset 0 1px 3px rgba(0,0,0,.3) !important;
outline:none !important;
}
/* ONE dropdown component: emerald closed state w/ white arrow; emerald list */
.mbody select,.scrim .mbox select,.pg .ff select{
background-image:url("data:image/svg+xml;utf8,") !important;
background-repeat:no-repeat !important;background-position:right 12px center !important;
padding-right:34px !important;
}
.mbody select option,.scrim .mbox select option{background:#063d2a;color:#ffffff}
/* checks · radios · ranges · pickers: emerald accents, dark scheme */
.mbody input[type=checkbox],.mbody input[type=radio],.scrim .mbox input[type=checkbox],.scrim .mbox input[type=radio]{
accent-color:#0f7a52;width:17px;height:17px;
}
.mbody input[type=date],.mbody input[type=time],.mbody input[type=datetime-local]{color-scheme:dark}
input[type=search]::-webkit-search-cancel-button{filter:invert(1)}
/* ============================================================================
v2.3 — ONE CARD COMPONENT (legacy white system removed)
baj-os-skin.js strips legacy inline white/cream paints and tags the node
.u-oscard; together with the shared classes below, every statistic card,
summary widget, activity log, media panel and info panel becomes a BAJ OS
emerald widget: deep-emerald gradient, gold accent border, premium shadow,
larger bold white type. Typography: no faded text anywhere.
============================================================================ */
.u-oscard,.mbody .stat,.mbody .tile,.mbody .media-item,.pg.on .ap-stat,
.mbody .summary,.mbody .info,.mbody .log,.mbody .list-panel{
background:linear-gradient(170deg,#0d5138,#063d2a 70%) !important;
border:1px solid rgba(224,169,74,.4) !important;border-radius:12px !important;
box-shadow:0 2px 4px rgba(0,0,0,.3),0 16px 34px -18px rgba(0,0,0,.55) !important;
color:#ffffff !important;
}
.u-oscard *:not(input):not(select):not(textarea):not(.u-status):not(.err-msg){color:inherit}
.u-oscard h1,.u-oscard h2,.u-oscard h3,.u-oscard h4,.u-oscard b,.u-oscard strong,
.pg.on .ap-stat-v{color:#ffffff !important;font-weight:800 !important}
.pg.on .ap-stat-v{font-size:32px !important}
.pg.on .ap-stat-l,.u-oscard label{color:#ffffff !important;font-weight:700 !important}
.u-oscard p,.u-oscard li,.u-oscard td,.u-oscard span{color:#F1F5F4}
.u-oscard small,.u-oscard .muted{color:#E7EFEA !important} /* soft white, never gray */
/* status accents on widgets */
.u-oscard .ok{color:#7fd6a9 !important}.u-oscard .warn{color:#f3d79a !important}.u-oscard .err{color:#ff9d8a !important}
/* global readability lift + faded-text kill switch inside app surfaces */
.scrim .mbox .mbody{font-size:14px}
.pg.on .con{font-size:14px}
.mbody [style*="opacity:.5"],.mbody [style*="opacity: .5"],.mbody [style*="opacity:0.5"]{opacity:.9 !important}
/* ============================================================================
v2.4 — CONSISTENCY & CONTRAST CORRECTIONS (no new colors, no redesign)
============================================================================ */
/* 1· errors on emerald: white text in a red-accented panel, never raw red
(v2.5: scoped to true error elements only — inline status COLORS are
remapped below instead of being turned into panels) */
.mbody .error,.mbody .err,.mbody .err-msg{
color:#ffffff !important;background:rgba(168,67,46,.32) !important;
border-left:3px solid #ff9d8a !important;border-radius:8px;padding:8px 12px;display:block;font-weight:600;
}
/* regression fix: empty error/status placeholders must never render as bars
(root cause of the Reset Password "brown strip": an empty #resetErr with a
translucent red inline background gained padding from the rule above). */
.mbody .err-msg:empty,.mbody .error:empty,.mbody .err:empty,.u-status:empty{
display:none !important;padding:0 !important;border:none !important;
}
/* ══ SETTINGS MODAL (verified DOM: #settingsScrim > .mbody > .msec sections
with .leg titles and .tiny-note helper text; footer .mfoot untouched).
The white panels were the app's class-styled .msec cards — class-based,
which is why inline-style sweeps never caught them. Emerald panels per
the approved BAJ OS reference; inputs/buttons/layout unchanged. ══ */
#settingsScrim .msec{
background:linear-gradient(170deg,#0d5138,#063d2a 75%) !important;
border:1px solid rgba(224,169,74,.4) !important;
border-radius:12px !important;
box-shadow:0 2px 4px rgba(0,0,0,.28),0 14px 30px -18px rgba(0,0,0,.55) !important;
color:#ffffff !important;
}
#settingsScrim .msec .leg{
background:transparent !important;color:#ffffff !important;
font-weight:800 !important;text-transform:uppercase;letter-spacing:.07em;
}
#settingsScrim .tiny-note{color:rgba(255,255,255,.92) !important;font-weight:500}
#settingsScrim .tiny-note b{color:#ffffff !important;font-weight:800}
/* ══ v2.5 FINAL POLISH ══════════════════════════════════════════════════ */
/* Subscription metrics: rich status colors, heavy numerals, instant read */
.mbody [style*="color:#b91c1c"],.mbody [style*="color:#c62828"],.mbody [style*="color:#dc2626"],
.mbody [style*="color:red"],.mbody [style*="color: red"]{color:#ff8a5c !important;font-weight:800 !important} /* awaiting → burnt orange (on emerald) */
.mbody [style*="color:#d97706"],.mbody [style*="color:#b45309"],.mbody [style*="color:#F9A825"]{color:#f0b429 !important;font-weight:800 !important} /* pending → amber */
.mbody [style*="color:#15803d"],.mbody [style*="color:#1f8a4c"],.mbody [style*="color:#16a34a"]{color:#7fd6a9 !important;font-weight:800 !important} /* paid → emerald */
.mbody [style*="color:#0d9488"],.mbody [style*="color:#14b8a6"]{color:#5eead4 !important;font-weight:800 !important} /* collected → teal */
/* Income & VAT net-total row (and any grand-total line): bright & bold */
.mbody tfoot td,.mbody .total,.mbody .net,.mbody tr:last-child td b,.mbody tr:last-child td strong{
color:#ffffff !important;font-weight:800 !important;font-size:1.06em;
}
/* Users & Access info banner: keep green banner, all text white */
.mbody .banner,.mbody .info-banner,.mbody [class*="notice"]{color:#ffffff !important}
.mbody .banner *,.mbody .info-banner *{color:#ffffff !important}
/* Content Editor: light body stays; header restored to BAJ emerald */
#contentEditorScrim .mbox .mhd{
background:linear-gradient(135deg,#0f5a43,#063d2a) !important;
border-bottom:2px solid var(--u-gold) !important;
}
#contentEditorScrim .mbox .mhd h2{color:#ffffff !important}
/* Buyer-registration gold CTA: black, maximum-weight type (gold kept) */
.btn.gold,.gold-btn,[class*="btn"][class*="gold"],.hero-btns .btn{color:#111827 !important;font-weight:800 !important}
/* 2·8· explanatory & helper paragraphs: solid near-white, heavier */
.scrim .mbox .mbody p,.pg.on .con p{color:#F1F5F4 !important;font-weight:600}
/* 3· Income & VAT: gold text → deeper amber, values heavier (kept emerald cards) */
.u-oscard [style*="color:#f3d79a"],.u-oscard [style*="color:#e0a94a"],
.mbody [style*="color:#f3d79a"],.mbody [style*="color:#e0a94a"]{color:#e8b64c !important;font-weight:800 !important}
.u-oscard [style*="₦"],.u-oscard .amt,.mbody .amt{color:#ffffff !important;font-weight:800 !important}
/* 4·5·6·9· any legacy white panel/list/card the sweeper tags becomes the
emerald card (already v2.3); Settings adopts option B — emerald throughout */
/* 7· CONTENT EDITOR EXCEPTION: an editing screen stays light by design */
#contentEditorScrim .mbox{background:#fbf9f4 !important;color:#1F2937}
#contentEditorScrim .mbody{background:#fbf9f4 !important;color:#1F2937 !important}
#contentEditorScrim .mbody p,#contentEditorScrim .mbody li{color:#374151 !important;font-weight:500}
#contentEditorScrim .mbody label,#contentEditorScrim .mbody .ff label{color:#1F2937 !important;font-weight:700 !important}
#contentEditorScrim .mbody input,#contentEditorScrim .mbody textarea,#contentEditorScrim .mbody select{
background:#ffffff !important;color:#111827 !important;border:1px solid #C9D3DD !important;
}
#contentEditorScrim .mbody input::placeholder,#contentEditorScrim .mbody textarea::placeholder{color:#6B7280 !important}
/* CE info banner only: when the leading paragraph becomes the emerald
.u-callout, its text must be white — overrides both its inline #6b6557
and the CE dark-paragraph rule above. Banner surface/icon/accent kept. */
#contentEditorScrim .mbody p.u-callout,#contentEditorScrim .mbody .u-callout{
color:#ffffff !important;font-weight:600 !important;
}
/* CE regression fixes (DOM-verified: labels inline #33302a, page headers
inline #063d2a, reset links inline #9a7b3a, textareas rows=1/3 inline
white). Labels & headers → white on the emerald body; reset links → gold;
textareas keep their WHITE editing surface and regain CMS heights. */
/* OPTION A: the editor body renders LIGHT — labels and headers are
near-black 700 for maximum contrast (previous white labels were the
unreadable regression); reset links use dark gold, readable on light. */
#contentEditorScrim .mbody label{color:#111827 !important;font-weight:700 !important}
#contentEditorScrim .mbody [style*="color:#063d2a"]{color:#111827 !important;font-weight:700 !important}
#contentEditorScrim .mbody button[style*="color:#9a7b3a"]{color:#7a5a12 !important;font-weight:700 !important}
#contentEditorScrim .mbody textarea{
background:#ffffff !important;color:#111827 !important;
border:1px solid #C9D3DD !important;resize:vertical !important;
min-height:44px;width:100% !important;
}
#contentEditorScrim .mbody textarea[rows="3"]{min-height:96px}
#contentEditorScrim .mbody > div > div{margin-bottom:0}
/* ══ SITE IMAGES (DOM-verified: cards are inline background:var(--cd) with
var(--ink)/var(--soft) text; the modal token contract made --cd white
and --ink pale → white cards, invisible text). Re-map the tokens for
this modal only; thumbnails, buttons, layout & handlers untouched. ══ */
#siteImagesScrim .mbox{
--cd:linear-gradient(170deg,#0d5138,#063d2a 75%); /* emerald card surface */
--ink:#ffffff; /* breed names → white */
--soft:rgba(255,255,255,.88); /* "✓ Image uploaded" */
}
/* card chrome: gold left accent, subtle elevation, BAJ radius (selector
matches the exact inline style emitted by renderSiteImagesList) */
#siteImagesScrim .mbody div[style*="background:var(--cd)"]{
border:1px solid rgba(224,169,74,.35) !important;
border-left:3px solid #e0a94a !important;
border-radius:12px !important;
box-shadow:0 2px 4px rgba(0,0,0,.25),0 12px 26px -16px rgba(0,0,0,.5);
}
/* breed name: slightly larger, heavier */
#siteImagesScrim .mbody div[style*="font-weight:700;font-size:13.5px"]{
font-size:14.5px !important;font-weight:800 !important;
}
/* buttons: keep gold styling; text near-black & bold only */
#siteImagesScrim .ibtn{color:#111827 !important;font-weight:800 !important}
/* ══ USERS & ACCESS — Login Activity Log panel only (DOM-verified:
#usersScrim > .mbody > .msec containing .leg + #loginLogTable +
.ibtn.del). Same emerald treatment as the approved Settings .msec.
Staff banner, form, table, footer & handlers untouched. ══ */
#usersScrim .msec{
background:linear-gradient(170deg,#0d5138,#063d2a 75%) !important;
border:1px solid rgba(224,169,74,.4) !important;
border-left:3px solid #e0a94a !important;
border-radius:12px !important;
box-shadow:0 2px 4px rgba(0,0,0,.28),0 14px 30px -18px rgba(0,0,0,.55) !important;
color:#ffffff !important;
}
#usersScrim .msec .leg{
background:transparent !important;color:#ffffff !important;
font-weight:800 !important;text-transform:uppercase;letter-spacing:.07em;
}
#usersScrim #loginLogTable,#usersScrim #loginLogTable *{
color:rgba(255,255,255,.9) !important;font-weight:500;
}
#usersScrim .msec .ibtn{color:#111827 !important;font-weight:800 !important}
/* ══ INCOME & VAT — grand total only (DOM-verified: the renderer emits
for the "Net total received" amount, and
the modal token contract pins --fo to dark forest #063d2a — dark on
the emerald summary panel = invisible). One value, nothing else. ══ */
#incomeScrim .mbody b[style*="color:var(--fo)"]{
color:#ffffff !important;
font-weight:800 !important;
font-size:17px;
}
/* ══ BUYER SIGNUP CTA only (DOM-verified: button.btn-g with the unique
onclick="openBuyerSignup()"). Text + arrow → near-black bold; gold
background, size, icon, spacing & hover come from .btn-g, untouched.
No other .btn-g (e.g. Sign in) is affected. ══ */
button.btn-g[onclick="openBuyerSignup()"]{
color:#111827 !important;
font-weight:800 !important;
}
/* ══ FLOATING BRAND EMBLEM removed (DOM-verified: , a position:fixed decorative crest at top-right,
outside page flow — hiding it reserves zero space). Sidebar logo,
login branding, public-site headers and certificate seals untouched;
!important also overrides the JS visibility toggle. ══ */
.corner-logo{display:none !important}
/* ══ PAGE HERO BANNERS v2 (DOM-verified classes from the "OFFICIAL PAGE
HERO BANNERS" block: .baj-sow-banner .baj-boar-banner .baj-piglet-banner
.baj-compat-banner .baj-stock-banner .baj-search-banner — each paints
an inline base64 JPEG). These overrides load the NEW artwork from
baj/banners/ and win by cascade; sizing/aspect/position unchanged. ══ */
/* v3 artwork (approved 2026-07-04): same hero components, new image sources.
The new banners are 1920×350 (192:35 ≈ 5.49:1) — the containers adopt the
artwork's own ratio below so nothing is cropped. */
.baj-sow-banner{background:#042217 url("banners/banner-sow2.jpg") center/cover no-repeat !important}
.baj-boar-banner{background:#042217 url("banners/banner-boar2.jpg") center/cover no-repeat !important}
.baj-piglet-banner{background:#042217 url("banners/banner-piglet2.jpg") center/cover no-repeat !important}
.baj-compat-banner{background:#042217 url("banners/banner-breeding2.jpg") center/cover no-repeat !important}
.baj-stock-banner{background:#042217 url("banners/banner-stock2.jpg") center/cover no-repeat !important}
.baj-search-banner{background:#042217 url("banners/banner-tagsearch2.jpg") center/cover no-repeat !important}
.baj-sow-banner,.baj-boar-banner,.baj-piglet-banner,
.baj-compat-banner,.baj-stock-banner,.baj-search-banner{aspect-ratio:192/35}
/* ══ DECORATIVE BODY EMBLEM removed (DOM-verified: all 7 in-body "Baj Royal
— Service Fit For Royals" crests live inside .contact-logo-panel
containers on pg-request / pg-sow / pg-boar / pg-search / pg-breed /
pg-ourpiglets / pg-piglets — containers that exist ONLY to hold the
emblem). Hiding the container removes emblem + placeholder in one:
layout reflows naturally. Nav/header, sidebar glyph, login branding,
favicon and the public landing page (separate files) are unaffected. ══ */
.contact-logo-panel{display:none !important}
img[alt="Baj Royal — Service Fit For Royals"]{display:none !important}
/* ══ EXECUTIVE PAGE SKELETON — hero-banner pages (v38.5 · LAYOUT ONLY) ══
Shell architecture (with sidebar.css v38.5): FULL-WIDTH top nav, the
Executive Sidebar starts BELOW it, and every hero-banner page renders
as one professional dashboard column beside the rail:
│ sidebar │ banner (full available width) │
│ │ description │
│ │ cards / ledger │
Scoped to body.baj-sb-on (a signed-in operator with the rail): the
PUBLIC versions of these pages keep their original design untouched.
• the content container is uncapped so it fills everything right of
the sidebar, with one consistent 24px horizontal padding
• banners keep their artwork, aspect-ratio and cover positioning —
never resized to dodge the sidebar, never cropped; they simply span
the available content width, edges aligned with the text below
• the legacy negative pull-up is neutralized in this shell: banners
flow as normal blocks below the full-width nav — no negative
margins, no transforms, no absolute positioning ══ */
/* ONE standard hero container for every internal banner page (v38.6):
section (starts beside the rail, below the chrome)
├─ hero banner — full-bleed across the content area: flush against
│ the sidebar's right edge → the far right edge, flush under the
│ nav (the section's own top padding equals the chrome height),
│ natural width — never resized or cropped
└─ .con.sec — description / cards / footer, uncapped, 24px inset;
its legacy 52px top padding is zeroed so content sits a uniform
18px below the banner on every page */
body.baj-sb-on #pg-sow .con, body.mf #pg-sow .con,
body.baj-sb-on #pg-boar .con, body.mf #pg-boar .con,
body.baj-sb-on #pg-piglets .con, body.mf #pg-piglets .con,
body.baj-sb-on #pg-breed .con, body.mf #pg-breed .con,
body.baj-sb-on #pg-ourpiglets .con, body.mf #pg-ourpiglets .con,
body.baj-sb-on #pg-search .con, body.mf #pg-search .con{
max-width:none; padding-left:24px; padding-right:24px; padding-top:0;
}
body.baj-sb-on .baj-sow-banner, body.mf .baj-sow-banner,
body.baj-sb-on .baj-boar-banner, body.mf .baj-boar-banner,
body.baj-sb-on .baj-piglet-banner, body.mf .baj-piglet-banner,
body.baj-sb-on .baj-compat-banner, body.mf .baj-compat-banner,
body.baj-sb-on .baj-search-banner, body.mf .baj-search-banner,
body.baj-sb-on .baj-stock-banner, body.mf .baj-stock-banner{
width:100%;
margin:0 0 18px;
}
/* Managed Farm (body.mf) now also gets the executive sidebar via the same
sidebar.js/apply() path as BAJ admin/staff (bajAuthRole() includes
'managed_farm'), so it needs the identical uncapped executive-page width
above, plus the same --sbw-driven reflow (sidebar.css) and footer margin
(below) — kept in sync with body.baj-sb-on everywhere rather than
duplicated as a separate ruleset. */
/* Available Stock: the old right emblem column stays collapsed so the
description + cards span the content area (all shells). */
#pg-ourpiglets .rlogo-layout{display:block}
/* ══ AVAILABLE STOCK — ROYAL GENETICS SHOWCASE (v41) ══
Presentation layer only: routing (openSection), data and business logic
untouched. Hero photography is cropped from the approved banner artwork
(banners/stock-hero-*.jpg, ~145 KB total). All textures are inline SVG
data-URIs — zero extra network requests, static paint (no animation,
no fixed attachment), so scrolling stays 60fps. ══ */
/* — royal canvas: faint DNA-helix tile + crown watermark, behind everything — */
#pg-ourpiglets .con.sec{position:relative}
#pg-ourpiglets .con.sec::before{
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='84' viewBox='0 0 100 84'%3E%3Cg fill='none' stroke='%23c8923a' stroke-opacity='.14' stroke-width='2.5' stroke-linejoin='round'%3E%3Cpath d='M18 60L13 30L34 47L50 18L66 47L87 30L82 60Z'/%3E%3Crect x='16' y='64' width='68' height='11' rx='3'/%3E%3Ccircle cx='13' cy='25' r='4'/%3E%3Ccircle cx='50' cy='12' r='4'/%3E%3Ccircle cx='87' cy='25' r='4'/%3E%3C/g%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='300' viewBox='0 0 150 300'%3E%3Cg fill='none' stroke='%230a4730' stroke-opacity='.05' stroke-width='2'%3E%3Cpath d='M45 0C100 37 100 113 45 150C-10 187 -10 263 45 300'/%3E%3Cpath d='M105 0C50 37 50 113 105 150C160 187 160 263 105 300'/%3E%3Cpath d='M52 26h46M42 56h66M42 94h66M52 124h46M52 176h46M42 206h66M42 244h66M52 274h46'/%3E%3C/g%3E%3C/svg%3E");
background-repeat:no-repeat,repeat;
background-position:right 10px top 6px,0 0;
background-size:190px auto,150px 300px;
}
#pg-ourpiglets .con.sec>*{position:relative;z-index:1}
/* — catalogue masthead: gold kicker rules · serif title · gold underline — */
#pg-ourpiglets .stock-cat-head{margin:2px 0 24px;text-align:center}
#pg-ourpiglets .stock-cat-head .sch-k{
display:inline-flex;align-items:center;gap:12px;
font-size:10.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#a97a1e;
}
#pg-ourpiglets .stock-cat-head .sch-k::before,
#pg-ourpiglets .stock-cat-head .sch-k::after{content:"";width:36px;height:1px}
#pg-ourpiglets .stock-cat-head .sch-k::before{background:linear-gradient(90deg,transparent,#c8923a)}
#pg-ourpiglets .stock-cat-head .sch-k::after{background:linear-gradient(90deg,#c8923a,transparent)}
#pg-ourpiglets .stock-cat-head .sch-t{
font-family:'Fraunces',Georgia,serif;font-size:clamp(27px,3.2vw,36px);font-weight:700;
letter-spacing:-.01em;color:var(--ink);margin:8px 0 0;
}
#pg-ourpiglets .stock-cat-head .sch-t::after{
content:"";display:block;width:64px;height:3px;border-radius:2px;margin:12px auto 0;
background:linear-gradient(90deg,#e0a94a,#f0c36a);
}
#pg-ourpiglets .stock-cat-head .sch-s{font-size:13.5px;color:var(--soft);line-height:1.6;max-width:620px;margin:10px auto 0}
/* — luxury statistics strip: dark emerald, gold numerals, inner gold frame — */
#pg-ourpiglets .stock-lux-strip{
position:relative;overflow:hidden;
display:grid;grid-template-columns:repeat(4,1fr);align-items:center;
background:linear-gradient(135deg,#0b4a32 0%,#063d2a 55%,#042b1e 100%);
border:1px solid rgba(200,146,58,.55);border-radius:20px;
padding:26px 12px;margin:0 0 34px;
box-shadow:0 2px 4px rgba(6,40,28,.08),0 30px 60px -32px rgba(6,40,28,.6);
}
#pg-ourpiglets .stock-lux-strip::before{ /* gold DNA motif inside the strip */
content:"";position:absolute;inset:0;pointer-events:none;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='300' viewBox='0 0 150 300'%3E%3Cg fill='none' stroke='%23e0a94a' stroke-opacity='.09' stroke-width='2'%3E%3Cpath d='M45 0C100 37 100 113 45 150C-10 187 -10 263 45 300'/%3E%3Cpath d='M105 0C50 37 50 113 105 150C160 187 160 263 105 300'/%3E%3Cpath d='M52 26h46M42 56h66M42 94h66M52 124h46M52 176h46M42 206h66M42 244h66M52 274h46'/%3E%3C/g%3E%3C/svg%3E") repeat;
background-size:150px 300px;
}
#pg-ourpiglets .stock-lux-strip::after{ /* geometric gold inner frame */
content:"";position:absolute;inset:9px;border:1px solid rgba(200,146,58,.28);
border-radius:13px;pointer-events:none;
}
#pg-ourpiglets .sls-item{
position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:5px;
padding:2px 10px;text-align:center;
}
#pg-ourpiglets .sls-item+.sls-item{border-left:1px solid rgba(200,146,58,.35)}
#pg-ourpiglets .sls-n{font-family:'Fraunces',Georgia,serif;font-size:clamp(30px,3.4vw,42px);font-weight:700;line-height:1;color:#f0c36a}
#pg-ourpiglets .sls-l{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.88)}
#pg-ourpiglets .sls-total .sls-n{color:#fff}
#pg-ourpiglets .sls-total .sls-l{color:#f0c36a}
/* — hero collection cards — */
#pg-ourpiglets .stock-hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:30px}
#pg-ourpiglets .stock-hero-card{
position:relative;display:flex;flex-direction:column;text-align:left;
padding:0;border:1px solid rgba(10,71,48,.14);border-radius:24px;overflow:hidden;
cursor:pointer;font-family:inherit;color:var(--ink);
background:linear-gradient(180deg,#fff,#fbf7ee);
box-shadow:0 2px 4px rgba(6,40,28,.06),0 30px 60px -34px rgba(6,40,28,.45);
transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s;
-webkit-tap-highlight-color:transparent;
}
#pg-ourpiglets .stock-hero-card:hover,
#pg-ourpiglets .stock-hero-card:focus-visible{
transform:translateY(-6px);
border-color:rgba(224,169,74,.9);
box-shadow:0 6px 14px rgba(6,40,28,.10),0 40px 70px -34px rgba(6,40,28,.55),0 0 0 1px rgba(224,169,74,.4);
}
/* photography: emerald veil + slow ken-burns zoom on hover */
#pg-ourpiglets .shc-media{
position:relative;display:block;height:clamp(180px,22vw,212px);overflow:hidden;
background-size:cover;background-position:center 32%;
}
#pg-ourpiglets .shc-media::before{ /* zoomable copy of the photo */
content:"";position:absolute;inset:0;background:inherit;
background-size:cover;background-position:center 32%;
transition:transform .8s cubic-bezier(.2,.6,.3,1);will-change:transform;
}
#pg-ourpiglets .stock-hero-card:hover .shc-media::before{transform:scale(1.07)}
#pg-ourpiglets .shc-veil{ /* emerald-to-deep-forest grade over the photo */
position:absolute;inset:0;z-index:1;
background:linear-gradient(178deg,rgba(4,43,30,.16) 0%,rgba(4,43,30,.04) 34%,rgba(4,43,30,.62) 76%,rgba(3,30,21,.86) 100%);
}
#pg-ourpiglets .shc-veil::after{ /* gold hairline between photo and body */
content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
background:linear-gradient(90deg,rgba(224,169,74,.15),#e0a94a 50%,rgba(224,169,74,.15));
}
#pg-ourpiglets .shc-crest{ /* gold crown crest, top-right of the photo */
position:absolute;top:14px;right:16px;z-index:2;width:30px;height:26px;opacity:.95;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='84' viewBox='0 0 100 84'%3E%3Cg fill='none' stroke='%23f0c36a' stroke-width='6' stroke-linejoin='round'%3E%3Cpath d='M18 60L13 30L34 47L50 18L66 47L87 30L82 60Z'/%3E%3Crect x='16' y='64' width='68' height='11' rx='3'/%3E%3Ccircle cx='13' cy='25' r='4'/%3E%3Ccircle cx='50' cy='12' r='4'/%3E%3Ccircle cx='87' cy='25' r='4'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));
}
/* the availability counter is the hero of the photo */
#pg-ourpiglets .shc-avail{position:absolute;left:20px;bottom:14px;z-index:2;display:flex;align-items:flex-end;gap:10px}
#pg-ourpiglets .shc-n{
font-family:'Fraunces',Georgia,serif;font-size:56px;font-weight:700;line-height:.86;
color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.4);
}
#pg-ourpiglets .shc-nl{
font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
color:#f0c36a;line-height:1.4;padding-bottom:3px;text-shadow:0 1px 6px rgba(0,0,0,.5);
}
/* body: kicker rule · serif name · lineage · breed chips · gold CTA */
#pg-ourpiglets .shc-body{display:flex;flex-direction:column;gap:9px;padding:20px 22px 22px}
#pg-ourpiglets .shc-kick{
display:flex;align-items:center;gap:10px;
font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#a97a1e;
}
#pg-ourpiglets .shc-kick::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(200,146,58,.55),transparent)}
#pg-ourpiglets .shc-name{font-family:'Fraunces',Georgia,serif;font-size:26px;font-weight:700;letter-spacing:-.01em;color:var(--sc,#0a4730)}
/* Explicit color instead of var(--soft): the app-wide luxury re-skin (see
#baj-luxury-reskin, loaded later in app.html) remaps --soft to a light
sage green for the app's dark emerald surfaces. This card's own body sits
on the collection's light cream/white surface (.stock-hero-card
background above), so inheriting that sage --soft made the description
line nearly invisible. Reuses #6b5d4d, the app's own established
muted-text-on-light-card tone (its original, pre-reskin --soft), instead
of inventing a new color. Single shared selector — covers every
collection card (Breeding/F1/Slaughter and any added later) and every
role (BAJ Admin/Staff/Managed Farm), since they all render through the
same #pg-ourpiglets markup. */
#pg-ourpiglets .shc-sub{font-size:12.5px;color:#6b5d4d;line-height:1.55;min-height:38px}
#pg-ourpiglets .shc-chips{display:flex;flex-wrap:wrap;gap:7px;min-height:30px;align-content:flex-start}
#pg-ourpiglets .shc-chip{
font-style:normal;font-size:11.5px;font-weight:700;line-height:1.2;
color:#0a4730;background:rgba(10,71,48,.07);
border:1px solid rgba(224,169,74,.5);border-radius:999px;padding:4px 11px;
}
#pg-ourpiglets .shc-cta{
margin-top:7px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
height:46px;border-radius:12px;
background:linear-gradient(135deg,#e8b558,#c8923a);color:#2a1a04;
font-weight:800;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
box-shadow:0 12px 24px -12px rgba(200,146,58,.75),inset 0 1px 0 rgba(255,255,255,.35);
transition:filter .2s,box-shadow .2s;
}
#pg-ourpiglets .stock-hero-card:hover .shc-cta{
filter:brightness(1.06);
box-shadow:0 16px 30px -12px rgba(200,146,58,.9),inset 0 1px 0 rgba(255,255,255,.4);
}
#pg-ourpiglets .shc-arrow{transition:transform .25s}
#pg-ourpiglets .stock-hero-card:hover .shc-arrow{transform:translateX(4px)}
/* empty collection: muted photography, quiet counter — still browsable */
#pg-ourpiglets .stock-hero-card.is-empty .shc-media,
#pg-ourpiglets .stock-hero-card.is-empty .shc-media::before{filter:grayscale(.55) brightness(.92)}
#pg-ourpiglets .stock-hero-card.is-empty .shc-n{color:rgba(255,255,255,.75)}
#pg-ourpiglets .stock-hero-card.is-empty .shc-cta{filter:saturate(.65)}
/* responsiveness */
@media (max-width:760px){
#pg-ourpiglets .stock-lux-strip{grid-template-columns:repeat(2,1fr);row-gap:20px;padding:22px 8px}
#pg-ourpiglets .sls-item:nth-child(3){border-left:none}
#pg-ourpiglets .stock-hero-grid{gap:22px}
}
@media (max-width:420px){
#pg-ourpiglets .shc-n{font-size:48px}
#pg-ourpiglets .shc-body{padding:18px 18px 20px}
}
@media (prefers-reduced-motion:reduce){
#pg-ourpiglets .stock-hero-card,
#pg-ourpiglets .shc-media::before,
#pg-ourpiglets .shc-arrow{transition:none}
#pg-ourpiglets .stock-hero-card:hover{transform:none}
#pg-ourpiglets .stock-hero-card:hover .shc-media::before{transform:none}
}
/* ══ GLOBAL FOOTER BASELINE (v38.14 · visual polish) ══
The rail reaches the bottom of the viewport (its Sign-out panel ends
exactly there), but on short pages the content column's footer stopped
higher up, leaving a visible offset. Every page in the executive shell
now lays out as a flex column at least one viewport tall, and the
footer's auto top-margin absorbs the leftover space — so the footer's
baseline always sits flush with the bottom of the Sign-out panel, on
every page and at every breakpoint. On long pages nothing changes
(the footer already ends at the document bottom). Footer height,
colors, typography and content untouched; pure flow, no offsets. ══ */
/* ══════════════════════════════════════════════════════════════════════════
GLOBAL PAGE LAYOUT — one flex-column template for EVERY page (v39.2)
──────────────────────────────────────────────────────────────────────────
Root cause of the system-wide floating footer: the previous pin was scoped
to the signed-in shell (body.baj-sb-on), so PUBLIC pages — and any page
viewed logged-out — had no footer discipline at all. The pin now lives on
the shared page template itself (every BAJ page is a `section.pg`, and on
every footered page the footer is already the last element in flow — audit
verified across all 19 sections), so all pages inherit it automatically:
top navigation (fixed chrome)
┌ section.pg.on — flex column, at least one visible viewport tall ┐
│ banner (where applicable) │
│ main content — expands naturally │
│ ← the footer's auto top-margin absorbs any leftover space → │
│ footer — always the last element, flush with the page bottom │
└──────────────────────────────────────────────────────────────────┘
Short pages: footer sits exactly at the bottom of the viewport.
Long pages: content pushes the footer below naturally (auto margin = 0).
No fixed margins, no fake spacers, no absolute positioning, no hardcoded
heights. Pages without a footer (dashboard panels, invoice, login) render
identically — the column simply holds their content. Future pages built
on `section.pg` inherit this behaviour with zero extra CSS. */
/* ══════════════════════════════════════════════════════════════════════════
APPLICATION SHELL — rebuilt from scratch (v40)
──────────────────────────────────────────────────────────────────────────
The old system (13 per-page footers, each depending on its own section's
geometry, plus successive pinning workarounds) is GONE — markup and CSS.
The shell is now the simplest possible correct architecture:
body flex column, at least one visible viewport tall
├─ fixed chrome top toolbar · nav · sidebar (out of flow)
├─ section.pg.on the visible page — a plain block again,
│ flex:1 → grows to fill the leftover space;
│ banner + content end naturally inside it
└─ #bajFooter the ONE footer — the final rendered child
of . Nothing exists below it: no
spacers, no reserved heights, no absolute
positioning, no phantom margins.
Short pages: the section grows, so the footer sits at the viewport bottom.
Long pages: the section is content-sized, so the footer simply follows.
Every current AND future page inherits this with zero page CSS. */
html{min-height:100%}
body{
display:flex;
flex-direction:column;
min-height:100vh;
min-height:100svh; /* mobile URL bar never creates a strip */
margin:0;
}
body > section.pg.on{flex:1 0 auto} /* the visible page fills leftover space */
/* ══ THE BAJ ROYAL FARM FOOTER (v40 redesign) ══
One consistent fixed height · premium dark emerald · gold accent line ·
centered white typography · full width, aligned beside the sidebar. */
#bajFooter{
flex:none;
margin:0 !important; /* no legacy footer margins apply */
padding:0 24px;
height:72px; /* one consistent height */
box-sizing:border-box;
display:flex;flex-direction:row;flex-wrap:wrap;
align-items:center;justify-content:center;
gap:6px 16px; /* row rhythm · wrap rhythm */
background:linear-gradient(180deg,#063d2a,#042b1e);
clip-path:none !important;-webkit-clip-path:none !important;
border-top:2px solid #c8923a !important; /* BAJ gold accent line */
color:#fff !important;text-align:center;font-size:13px;
}
#bajFooter .bf-name{font-family:'Fraunces',Georgia,serif;font-size:15.5px;font-weight:800;letter-spacing:.02em;color:#fff !important}
#bajFooter .bf-loc{color:#fff !important;font-weight:700}
#bajFooter .bf-copy{color:rgba(255,255,255,.85) !important;font-weight:700;letter-spacing:.02em}
#bajFooter .bf-sep{color:#c8923a !important;font-weight:800} /* gold • separators */
@media (max-width:560px){
#bajFooter{height:auto;min-height:72px;padding:14px 18px} /* wraps naturally */
#bajFooter .bf-sep{display:none} /* clean wrap lines */
}
/* executive shell: the footer starts beside the sidebar, like the pages */
body.baj-sb-on #bajFooter, body.mf #bajFooter{margin-left:var(--sbw,254px);transition:margin-left .22s cubic-bezier(.4,0,.2,1)}
@media (max-width:900px){body.baj-sb-on #bajFooter, body.mf #bajFooter{margin-left:0}}
@media print{#bajFooter{display:none !important}}
/* ══ REQUEST STOCK — centered premium form (v38.10 · DESKTOP LAYOUT ONLY) ══
Same root cause as Tag Search / Breeding Check: .request-layout is a
two-column grid whose first column belonged to the retired emblem —
still reserved while empty, unbalancing the form. The layout becomes a
centered flex row; the form card grows to a comfortable enterprise
reading width (~880px ≈ +35% over the old ~650px column) without going
edge-to-edge; fields fill it with a roomier grid. Colors, typography,
branding, hero, validation and JS untouched. Executive shell only;
the public page and the existing tablet/mobile behaviour keep their
original rules (mobile collapses to one column exactly as before). ══ */
/* v39.1: unscoped from the executive shell — the centered premium form is
the approved design EVERYWHERE (public visitors included), so localhost
and production render identically for every audience. */
#pg-request .request-layout{
display:flex; justify-content:center;
}
#pg-request .rcard{
flex:0 1 auto; width:min(880px,100%);
padding:34px 36px 30px;
}
#pg-request .rcard .sub{margin-bottom:30px} /* air below the heading block */
#pg-request .fgrid{gap:18px 20px} /* rows · columns breathe */
#pg-request .ff{gap:7px} /* label ↔ field */
#pg-request .ff input,
#pg-request .ff select,
#pg-request .ff textarea{
padding:12px 14px; width:100%; box-sizing:border-box; /* fields use the width */
}
#pg-request .ff textarea{min-height:96px}
#pg-request .btn-sub{padding:15px 20px;min-height:52px} /* premium press target */
/* ══ GENETIC ORIGINS — premium administrative directory (v38.11) ══
Presentation only (renderOriginsList markup gained classes; query,
saving, filtering, Supabase & handlers untouched). One centered
column of identical 640px cards: emerald surface, name over country
on the left, one fixed-width Remove button on the right, 18px rhythm.
BAJ Royal Farm leads its group with a thin gold ring + gold badge. ══ */
#originsScrim #orig_list{display:flex;flex-direction:column;align-items:center}
#originsScrim #orig_list > div:not(.org-row){width:min(640px,100%)} /* species headers share the column */
#originsScrim .org-row{
width:min(640px,100%); /* ONE width — never content-sized */
display:flex;align-items:center;gap:14px;
background:linear-gradient(170deg,#0d5138,#063d2a 75%);
border:1px solid rgba(255,255,255,.14);
border-radius:12px;
padding:14px 16px;
margin-bottom:18px;
box-shadow:0 2px 4px rgba(0,0,0,.22),0 12px 26px -16px rgba(0,0,0,.45);
}
#originsScrim .org-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
#originsScrim .org-name{font-size:15px;font-weight:800;color:#fff;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#originsScrim .org-country{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.72)}
#originsScrim .org-notes{font-size:11.5px;color:rgba(255,255,255,.6)}
#originsScrim .org-x{
flex:0 0 auto;width:92px;align-self:center;text-align:center;
padding:9px 0 !important;font-size:12px !important;font-weight:700;
color:#ffb4a4 !important;background:rgba(168,67,46,.18) !important;
border:1px solid rgba(255,157,138,.45) !important;border-radius:9px;
}
#originsScrim .org-home{
background:linear-gradient(170deg,#11603f,#0a4531 75%);
border-color:rgba(224,169,74,.65);
box-shadow:0 0 0 1px rgba(224,169,74,.35),0 2px 4px rgba(0,0,0,.22),0 12px 26px -16px rgba(0,0,0,.45);
}
#originsScrim .org-badge{
font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:#063d2a;background:linear-gradient(90deg,#e0a94a,#f0c36a);
border-radius:999px;padding:3px 9px;
}
/* ══ SOLD BREEDING STOCK — emerald record cards (v38.12 · VISUAL ONLY) ══
The area's own