/* AppliColor theme — owns site chrome + the SaaS app styling (migrated from the host's _AppStyles partial and the marketing pages' inline styles). Loaded on every page by the theme Layout. */ /* --- Site chrome (header / nav / footer) --- */ .ac-header { border-bottom: 1px solid #e2e8e0; background: #fff; } .ac-header .navbar-brand { font-weight: 700; color: #2f7d32; } /* Nav LAYOUT reset — robust to BOTH markup variants the OC shape emits: the site theme renders

renders them WITH .nav-link in the site theme but as bare (under .menu) in the admin theme, so style BOTH forms identically — that keeps the one shared AcNavBar truly consistent across themes (and lets the active-section highlight, added as .active by the bar's script, land in both). */ .ac-header .nav-link, .ac-header .menu a { color: #344; } .ac-header .nav-link:hover, .ac-header .nav-link.active, .ac-header .menu a:hover, .ac-header .menu a.active { color: #2f7d32; } /* Separator between the public (anon) links and the signed-in app links; bold the app links (Dashboard). */ .ac-header .ac-nav-sep { align-self: center; color: #c7d0c7; padding: 0 .35rem; user-select: none; } .ac-header .ac-app-menu .nav-link, .ac-header .ac-app-menu .menu a { font-weight: 700; } /* Public site search box in the nav. */ .ac-header .ac-search-input { width: 11rem; max-width: 42vw; } .ac-header .ac-search-input:focus { border-color: #2f7d32; box-shadow: 0 0 0 .2rem rgba(47, 125, 50, .2); } .ac-main { margin-top: 2rem; margin-bottom: 3rem; min-height: 60vh; flex: 1 0 auto; } .ac-footer { border-top: 1px solid #e2e8e0; background: #f7faf6; padding: 1.5rem 0; color: #6b7280; flex-shrink: 0; } /* Sticky footer: make a full-height flex column so the footer rests at the BOTTOM of the viewport on short pages (instead of floating mid-screen), while still scrolling off-screen normally when the content is taller than the viewport. .ac-main is the flex-grow filler; header/footer keep their natural height. Scoped to the site — applicolor.css is loaded only by the theme Layout, never the admin. */ body { display: flex; flex-direction: column; min-height: 100vh; } .ac-footer .ac-copyright { margin: 0; font-size: 0.85rem; } /* --- Marketing pages (Home / About / How it works) --- */ .ac-marketing { margin-top: 3rem; max-width: 880px; } /* For signed-in visitors, hide the anonymous "Sign in" CTA inside marketing content — the nav already shows the right auth-aware action, so a hero "Sign in" button reads as wrong once logged in. */ .ac-authed .ac-marketing a[href^="/Login"] { display: none; } /* Step-number badges (How it works "1/2/3"): keep them perfectly round. They sit in a flex row next to the step text, so without flex-shrink:0 the longest step (3) squeezes the badge into an oval. inline-flex centers the digit regardless of the fixed width/height set inline. */ .ac-marketing .badge.rounded-circle { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; } /* --- SaaS app pages (scoped under .ac-app) --- */ .ac-app { --ac-muted: #6b7280; --ac-accent: #2f7d32; } .ac-app h1 { margin: 0.2rem 0 0.4rem; } .ac-app .scope { color: var(--ac-muted); margin-bottom: 1.25rem; } .ac-app .badge-scope { padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; } .ac-app .badge-admin { background: #fde9c8; color: #8a5a00; } .ac-app .badge-customer { background: #d7eed8; color: #2f7d32; } .ac-app .badge-none { background: #f3d6d6; color: #a12626; } /* Gallery of unprocessed -> processed pairs */ .ac-app .gallery-hint { color: var(--ac-muted); margin: 0 0 0.75rem; font-size: 0.9rem; } .ac-app .image-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } .ac-app .image-card { background: #fff; border: 1px solid #e2e8e0; border-radius: 10px; overflow: hidden; } .ac-app .pair-link { position: relative; display: block; text-decoration: none; color: inherit; } /* "N leaves" badge on a multi-leaf source-photo card (the photo segmented into several focus leaves). */ .ac-app .leaf-badge { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 2; background: rgba(17,17,17,.78); color: #fff; font-size: 0.72rem; font-weight: 600; line-height: 1; padding: 0.28rem 0.5rem; border-radius: 999px; pointer-events: none; } .ac-app .pair-link:hover .pair { outline: 2px solid var(--ac-accent); outline-offset: -2px; } .ac-app .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #e2e8e0; } .ac-app .pane { margin: 0; position: relative; background: #fff; display: flex; flex-direction: column; } .ac-app .pane img { width: 100%; height: 150px; object-fit: cover; background: #111; display: block; } .ac-app .pane .no-img { height: 150px; display: flex; align-items: center; justify-content: center; color: var(--ac-muted); background: #eef2ec; font-size: 0.8rem; } .ac-app .pane figcaption { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ac-muted); padding: 0.3rem 0.5rem; background: #f7faf6; border-top: 1px solid #eef2ec; display: flex; align-items: center; gap: 0.35rem; } .ac-app .annotated-tag { background: #d7eed8; color: #2f7d32; border-radius: 999px; padding: 0.02rem 0.4rem; font-size: 0.66rem; font-weight: 700; } .ac-app .meta { padding: 0.7rem 0.8rem; font-size: 0.85rem; } .ac-app .classification { font-weight: 700; } .ac-app .classification.positive { color: #a12626; } .ac-app .classification.negative { color: #2f7d32; } .ac-app .classification.suspect { color: #8a5a00; } .ac-app .confidence { color: var(--ac-muted); margin-left: 0.4rem; } /* Leaf-coverage metric (tar-spot density / leaf area) — replaces the pos/neg/suspect badge. */ .ac-app .tarspot-ratio { font-weight: 700; color: var(--ac-accent); } .ac-app .tarspot-ratio.none { color: var(--ac-muted); font-weight: 600; } .ac-app .pixel-counts { color: var(--ac-muted); margin-left: 0.4rem; font-size: 0.8rem; } /* Severity bar — width scales with coverage ratio; green→amber→red as it fills. */ .ac-app .tarspot-bar { margin: 0.35rem 0; height: 8px; max-width: 420px; background: #eef0f2; border-radius: 999px; overflow: hidden; } .ac-app .tarspot-bar .fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2f7d32, #e0a100 55%, #a12626); } /* Full retained-artifact grid on the detail page. */ .ac-app .artifacts-h { font-size: 1rem; margin: 1.5rem 0 0.6rem; } .ac-app .artifact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.6rem; } .ac-app .artifact-thumb { margin: 0; } /* Artifact thumbs default to a BLACK background so transparent frames (segmented leaf, masks) read by default. */ .ac-app .artifact-thumb img { width: 100%; height: 100px; object-fit: contain; background: #111; border-radius: 6px; display: block; } .ac-app .artifact-thumb figcaption { font-size: 0.72rem; color: var(--ac-muted); text-align: center; word-break: break-all; margin-top: 0.2rem; } .ac-app .owner { margin-top: 0.3rem; } .ac-app .when { color: var(--ac-muted); font-size: 0.78rem; } /* Detail */ .ac-app .crumb { margin: 0 0 0.75rem; font-size: 0.9rem; } .ac-app .detail-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0 1.25rem; } .ac-app .detail-pane { position: relative; margin: 0; background: #fff; border: 1px solid #e2e8e0; border-radius: 10px; overflow: hidden; } .ac-app .detail-pane img { width: 100%; height: auto; display: block; background: #111; } /* Synced crosshair reticle: white lines + difference blend so they read on both the green leaf and the dark heatmap. Positioned by --x/--y (pane-relative %), mirrored onto both panes so the same pixel is targeted. */ .ac-app .detail-pane .ac-xhair { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .08s ease-out; z-index: 4; mix-blend-mode: difference; } .ac-app .detail-pane .ac-xhair.show { opacity: 1; } .ac-app .detail-pane .ac-xhair .ac-xhair-v { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 1px; margin-left: -0.5px; background: #fff; } .ac-app .detail-pane .ac-xhair .ac-xhair-h { position: absolute; left: 0; right: 0; top: var(--y, 50%); height: 1px; margin-top: -0.5px; background: #fff; } .ac-app .detail-pane .no-img { height: 240px; display: flex; align-items: center; justify-content: center; color: var(--ac-muted); background: #eef2ec; } .ac-app .detail-pane figcaption { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ac-muted); padding: 0.4rem 0.6rem; background: #f7faf6; border-top: 1px solid #eef2ec; } /* Shared AcImagePair component (image-page measurement pair + upload-page modal). GLOBAL (not under .ac-app) so it loads in BOTH the app theme and the admin modal. Alignment-critical rule: WIDTH-fit + TOP-anchored images (NOT object-fit:contain) so the leaf area (same width in both) renders at identical scale + position — a bottom patent band just hangs below; paired with the top-pivot zoom in ac-synced-pair.js it stays locked through zoom. The crosshair reticle is styled by ac-synced-pair.js's own injected CSS (scoped to the .ac-sp class it adds). */ .ac-imgpair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0 1.25rem; } .ac-imgpair-pane { position: relative; margin: 0; overflow: hidden; background: #111; border: 1px solid #e2e8e0; border-radius: 10px; } .ac-imgpair-pane img { display: block; width: 100%; height: auto; background: #111; } .ac-imgpair-pane figcaption { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ac-muted); padding: 0.4rem 0.6rem; background: #f7faf6; border-top: 1px solid #eef2ec; } .ac-imgpair-missing { display: flex; align-items: center; justify-content: center; min-height: 180px; padding: 1rem; color: var(--ac-muted); background: #eef2ec; text-align: center; } @media (max-width: 640px) { .ac-imgpair { grid-template-columns: 1fr; } } [data-bs-theme="dark"] .ac-imgpair-pane { border-color: #2c352c; } [data-bs-theme="dark"] .ac-imgpair-pane figcaption { background: #161b16; border-top-color: #2c352c; } /* Sibling-leaf strip: jump between the focus leaves segmented from one source photo. */ .ac-app .leaf-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1.25rem; } .ac-app .leaf-strip-label { font-size: 0.8rem; color: var(--ac-muted); font-weight: 600; margin-right: 0.25rem; } .ac-app .leaf-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 0.2rem; width: 76px; padding: 0.25rem; background: #fff; border: 1px solid #e2e8e0; border-radius: 8px; text-decoration: none; color: var(--ac-muted); } .ac-app .leaf-chip img { width: 64px; height: 64px; object-fit: contain; background: #111; border-radius: 4px; display: block; } .ac-app .leaf-chip-cap { font-size: 0.7rem; line-height: 1; } .ac-app .leaf-chip:hover { border-color: var(--ac-accent); } .ac-app .leaf-chip.current { border-color: var(--ac-accent); outline: 1px solid var(--ac-accent); color: var(--ac-text); } .ac-app .detail-meta { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; font-size: 0.9rem; max-width: 36rem; } .ac-app .detail-meta dt { color: var(--ac-muted); font-weight: 600; } .ac-app .detail-meta dd { margin: 0; } .ac-app .detail-meta .muted { color: var(--ac-muted); font-weight: 400; } .ac-app .detail-meta .geom { display: inline-block; max-width: 100%; overflow-x: auto; white-space: nowrap; vertical-align: bottom; font-size: 0.76rem; } /* Dashboard: Grower → Field hierarchy (collapsible grower sections holding field cards) */ .ac-app .grower-group { margin: 0 0 1rem; border: 1px solid #e2e8e0; border-radius: 10px; padding: .5rem .9rem .9rem; background: #fbfdfb; } .ac-app .grower-group > summary.grower-name { cursor: pointer; list-style: revert; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; font-size: 1.1rem; font-weight: 700; padding: .25rem 0; } .ac-app .grower-group > summary .gname { color: var(--ac-accent); } .ac-app .grower-group > summary .gmuted { color: var(--ac-muted); font-weight: 400; font-size: .85rem; } .ac-app .grower-group .field-grid { margin-top: .75rem; } /* Dashboard field cards */ .ac-app .field-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-top: 1rem; } .ac-app .field-card { display: block; text-decoration: none; color: inherit; background: #fff; border: 1px solid #e2e8e0; border-radius: 10px; padding: 1rem; } .ac-app .field-card:hover { border-color: var(--ac-accent); } .ac-app .field-card .name { font-weight: 700; font-size: 1.05rem; } .ac-app .field-card .stat { color: var(--ac-muted); font-size: 0.85rem; margin-top: 0.4rem; } .ac-app .field-card .pos { color: #a12626; font-weight: 600; } @media (max-width: 640px) { .ac-app .detail-pair { grid-template-columns: 1fr; } } /* --- Theme toggle (nav) --- */ .ac-theme-toggle { font-size: 1rem; line-height: 1; padding: 0.25rem 0.5rem; } .ac-theme-toggle .i-dark { display: none; } [data-bs-theme="dark"] .ac-theme-toggle .i-light { display: none; } [data-bs-theme="dark"] .ac-theme-toggle .i-dark { display: inline; } /* --- Dark mode --- Bootstrap 5.3 handles its own components via data-bs-theme; these override the custom AppliColor surfaces that use hardcoded light colors. Shared with the Orchard admin via the {tenant}-theme key. */ [data-bs-theme="dark"] .ac-header { background: #1b211b; border-bottom-color: #2c352c; } [data-bs-theme="dark"] .ac-header .nav-link, [data-bs-theme="dark"] .ac-header .menu a { color: #cdd6cd; } /* Active/hover in dark mode — a brighter green than #2f7d32 for contrast on the dark bar. Higher specificity than the base dark .menu a rule above so the active-section highlight actually shows. */ [data-bs-theme="dark"] .ac-header .nav-link.active, [data-bs-theme="dark"] .ac-header .nav-link:hover, [data-bs-theme="dark"] .ac-header .menu a.active, [data-bs-theme="dark"] .ac-header .menu a:hover { color: #5cb85c; } [data-bs-theme="dark"] .ac-header .ac-nav-sep { color: #445044; } [data-bs-theme="dark"] .ac-footer { background: #161b16; border-top-color: #2c352c; color: #9aa39a; } [data-bs-theme="dark"] .ac-app { --ac-muted: #9aa39a; } [data-bs-theme="dark"] .ac-app .image-card, [data-bs-theme="dark"] .ac-app .pane, [data-bs-theme="dark"] .ac-app .field-card, [data-bs-theme="dark"] .ac-app .leaf-chip, [data-bs-theme="dark"] .ac-app .detail-pane { background: #1b211b; border-color: #2c352c; } [data-bs-theme="dark"] .ac-app .grower-group { background: #161b16; border-color: #2c352c; } [data-bs-theme="dark"] .ac-app .pair { background: #2c352c; } /* Transparent leaf images keep their default BLACK (#111) backdrop in every theme — the backdrop is part of how the segmented/mask frames read, so it must not follow light/dark. Only the no-image placeholders theme. */ [data-bs-theme="dark"] .ac-app .pane .no-img, [data-bs-theme="dark"] .ac-app .detail-pane .no-img { background: #11160f; } [data-bs-theme="dark"] .ac-app .pane figcaption, [data-bs-theme="dark"] .ac-app .detail-pane figcaption { background: #161b16; border-top-color: #2c352c; } [data-bs-theme="dark"] .ac-app .tarspot-bar { background: #2c352c; } /* --- Artifact lightbox ------------------------------------------------------------------------------------- Inline image viewer with smooth zoom + drag-pan and a black / white / checker background toggle — the bg toggle matters for the TRANSPARENT frames (segmented leaf, formula/area masks) so you can read them on either backdrop. Opened by clicking any detail image or artifact thumb (ac-lightbox.js, embedded by the image views). Pure client-side (no Blazor circuit) so zoom/pan stay smooth. */ /* Thumbs open the lightbox (zoom-in cursor); the large detail pair gets in-place SYNCED zoom/pan (grab cursor, set by script) so the two leaf frames compare at the same spot. */ .ac-app .artifact-thumb img { cursor: zoom-in; } .ac-lightbox { position: fixed; inset: 0; z-index: 2000; display: none; } .ac-lightbox.open { display: block; } .ac-lightbox .ac-lb-stage { position: absolute; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: grab; background: rgba(0,0,0,.82); } .ac-lightbox .ac-lb-stage.dragging { cursor: grabbing; } .ac-lightbox .ac-lb-img { max-width: 92vw; max-height: 86vh; transform-origin: center center; transition: transform .10s ease-out; user-select: none; -webkit-user-drag: none; } /* Background behind the (possibly transparent) image. */ .ac-lightbox.bg-dark .ac-lb-img { background: #111; } .ac-lightbox.bg-gray .ac-lb-img { background: #808080; } /* gray 128 */ .ac-lightbox.bg-light .ac-lb-img { background: #fff; } .ac-lightbox.bg-checker .ac-lb-img { background-image: linear-gradient(45deg,#9aa0a6 25%,transparent 25%), linear-gradient(-45deg,#9aa0a6 25%,transparent 25%), linear-gradient(45deg,transparent 75%,#9aa0a6 75%), linear-gradient(-45deg,transparent 75%,#9aa0a6 75%); background-size: 22px 22px; background-position: 0 0, 0 11px, 11px -11px, -11px 0; background-color: #d7dbe0; } .ac-lightbox .ac-lb-bar { position: fixed; top: 1rem; right: 1rem; display: flex; gap: .5rem; z-index: 1; } .ac-lightbox .ac-lb-bar button { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.34); border-radius: 6px; padding: .35rem .65rem; cursor: pointer; font-size: .85rem; line-height: 1; } .ac-lightbox .ac-lb-bar button:hover { background: rgba(255,255,255,.28); } .ac-lightbox .ac-lb-caption { position: fixed; left: 1rem; bottom: 1rem; color: #fff; font-size: .85rem; opacity: .85; z-index: 1; pointer-events: none; } /* --- Table QoL (sort + filter) — applicolor-ui.js enhances on site + admin -------- Sortable headers get a pointer + a sort-direction caret; the injected toolbar carries a live filter box. Styled to sit cleanly on both the site surfaces and TheAdmin's tables. */ .ac-table-tools { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; } .ac-table-tools .ac-table-filter { width: 16rem; max-width: 60vw; } .ac-table-tools .ac-table-filter:focus { border-color: #2f7d32; box-shadow: 0 0 0 .2rem rgba(47,125,50,.2); } .ac-table-tools .ac-table-count { white-space: nowrap; } th.ac-sortable { cursor: pointer; user-select: none; white-space: nowrap; } th.ac-sortable:hover { color: #2f7d32; } th.ac-sortable::after { content: "↕"; opacity: .35; font-size: .8em; margin-left: .35em; } th.ac-sortable[aria-sort="ascending"]::after { content: "▲"; opacity: .9; } th.ac-sortable[aria-sort="descending"]::after { content: "▼"; opacity: .9; } th.ac-sortable:focus-visible { outline: 2px solid #2f7d32; outline-offset: -2px; } /* --- Jump nav (top / up / down / bottom) — injected by applicolor-ui.js only when the page is tall ----------- */ .ac-jump { position: fixed; right: 1rem; bottom: 1rem; z-index: 1500; display: flex; flex-direction: column; gap: .25rem; } .ac-jump-btn { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid #cfd8cf; background: rgba(255,255,255,.92); color: #2f7d32; font-size: 1rem; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; } .ac-jump-btn:hover { background: #2f7d32; color: #fff; border-color: #2f7d32; } .ac-jump-btn:disabled { opacity: .35; cursor: default; } .ac-jump-btn:disabled:hover { background: rgba(255,255,255,.92); color: #2f7d32; border-color: #cfd8cf; } /* --- Breadcrumb (hierarchy trail: Dashboard › Grower › Field › Leaf) + in-app history back/forward ----------- */ .ac-crumbnav { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .5rem; margin: 0 0 1rem; } .ac-histnav { display: inline-flex; gap: .15rem; } .ac-hist-btn { width: 1.6rem; height: 1.6rem; line-height: 1; border: 1px solid #cfd8cf; background: #fff; color: #2f7d32; border-radius: 6px; cursor: pointer; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .ac-hist-btn:hover:not(:disabled) { background: #2f7d32; color: #fff; border-color: #2f7d32; } .ac-hist-btn:disabled { opacity: .35; cursor: default; } .ac-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .1rem; margin: 0; padding: 0; list-style: none; font-size: .9rem; } .ac-breadcrumb li { display: inline-flex; align-items: center; } .ac-breadcrumb li + li::before { content: "›"; color: #9aa39a; padding: 0 .45rem; } .ac-breadcrumb a { color: #2f7d32; text-decoration: none; } .ac-breadcrumb a:hover { text-decoration: underline; } .ac-breadcrumb [aria-current="page"] { color: #6b7280; font-weight: 600; } /* Dark-mode variants for the above. */ [data-bs-theme="dark"] .ac-table-tools .ac-table-filter:focus { border-color: #5cb85c; } [data-bs-theme="dark"] th.ac-sortable:hover { color: #5cb85c; } [data-bs-theme="dark"] .ac-jump-btn { background: #1b211b; color: #5cb85c; border-color: #2c352c; } [data-bs-theme="dark"] .ac-jump-btn:hover { background: #2f7d32; color: #fff; } [data-bs-theme="dark"] .ac-jump-btn:disabled:hover { background: #1b211b; color: #5cb85c; border-color: #2c352c; } [data-bs-theme="dark"] .ac-breadcrumb a { color: #5cb85c; } [data-bs-theme="dark"] .ac-breadcrumb [aria-current="page"] { color: #9aa39a; } [data-bs-theme="dark"] .ac-hist-btn { background: #1b211b; color: #5cb85c; border-color: #2c352c; } [data-bs-theme="dark"] .ac-hist-btn:hover:not(:disabled) { background: #2f7d32; color: #fff; } /* ---- Relation picker (the one canonical relation editor) + its host editor ---- */ .ac-relpick { border: 1px solid #d6dcd6; border-radius: .5rem; overflow: hidden; background: #fff; } .ac-relpick-search { width: 100%; border: 0; border-bottom: 1px solid #e3e8e3; padding: .55rem .75rem; font-size: .95rem; outline: none; } .ac-relpick-search:focus { box-shadow: inset 0 -2px 0 #2f7d32; } .ac-relpick-list { max-height: 22rem; overflow-y: auto; } .ac-relpick-opt { display: flex; align-items: center; gap: .6rem; padding: .45rem .75rem; margin: 0; cursor: pointer; border-bottom: 1px solid #f0f3f0; } .ac-relpick-opt:last-child { border-bottom: 0; } .ac-relpick-opt:hover { background: #f3f8f3; } .ac-relpick-opt.is-selected { background: #eaf5ea; } .ac-relpick-opt input { flex: 0 0 auto; margin: 0; } .ac-relpick-label { flex: 1 1 auto; } .ac-relpick-sub { flex: 0 0 auto; font-size: .8rem; color: #b8860b; background: #fdf6e3; border-radius: .35rem; padding: .05rem .4rem; } .ac-relpick-empty { padding: .6rem .75rem; color: #6b756b; font-size: .9rem; } .ac-relpick-foot { padding: .4rem .75rem; font-size: .82rem; color: #6b756b; border-top: 1px solid #e3e8e3; background: #fafcfa; } .ac-reledit-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; } .ac-reledit-count { font-size: .85rem; color: #6b756b; } .ac-reledit-actions { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; } .ac-reledit-notice { font-size: .9rem; color: #2f7d32; } .ac-reledit-loading { padding: 1rem; color: #6b756b; } [data-bs-theme="dark"] .ac-relpick { background: #161b16; border-color: #2c352c; } [data-bs-theme="dark"] .ac-relpick-search { background: #161b16; color: #e6ece6; border-bottom-color: #2c352c; } [data-bs-theme="dark"] .ac-relpick-opt { border-bottom-color: #222a22; } [data-bs-theme="dark"] .ac-relpick-opt:hover { background: #1f2a1f; } [data-bs-theme="dark"] .ac-relpick-opt.is-selected { background: #233323; } [data-bs-theme="dark"] .ac-relpick-sub { color: #e8c468; background: #2a2410; } [data-bs-theme="dark"] .ac-relpick-foot { background: #121612; color: #9aa39a; border-top-color: #2c352c; } [data-bs-theme="dark"] .ac-relpick-empty, [data-bs-theme="dark"] .ac-reledit-count, [data-bs-theme="dark"] .ac-reledit-loading { color: #9aa39a; } [data-bs-theme="dark"] .ac-reledit-notice { color: #5cb85c; } /* ---- Routing-rule editor (picker #2 — 3× RelationPicker + fields) ---- */ .ac-rule-form { display: flex; flex-direction: column; gap: 1rem; max-width: 60rem; } .ac-rule-row { display: flex; flex-direction: column; gap: .35rem; margin: 0; } .ac-rule-lbl { font-weight: 600; font-size: .9rem; } .ac-rule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem 1rem; align-items: end; } .ac-rule-grid label { display: flex; flex-direction: column; gap: .35rem; margin: 0; } .ac-rule-check { flex-direction: row !important; align-items: center; gap: .4rem; } .ac-rule-check input { width: auto; }