isn't generated by the
JS renderers, but :nth-child rules do the same job. Columns
numbered from 1; percentages sum to 100%.
All-cows report has 8 cols (Cow / Pen / Score / Δ / Hoof / Meas /
Status / Note). Hoof trimmer has 5 cols. Cow-list herd report has 4.
We can't reliably distinguish reports via class because all share
.cad-print-table, so use a width ladder that works for every layout
by column index — tighten numeric / short cells, give room to Cow,
Note at the end can shrink gracefully. */
.cad-print-table th:nth-child(1),
.cad-print-table td:nth-child(1) { width: 18%; } /* Cow (name + id) */
.cad-print-table th:nth-child(2),
.cad-print-table td:nth-child(2) { width: 12%; } /* Pen */
.cad-print-table th:nth-child(3),
.cad-print-table td:nth-child(3) { width: 8%; }
.cad-print-table th:nth-child(4),
.cad-print-table td:nth-child(4) { width: 8%; }
.cad-print-table th:nth-child(5),
.cad-print-table td:nth-child(5) { width: 14%; }
.cad-print-table th:nth-child(6),
.cad-print-table td:nth-child(6) { width: 14%; }
.cad-print-table th:nth-child(7),
.cad-print-table td:nth-child(7) { width: 12%; }
.cad-print-table th:nth-child(8),
.cad-print-table td:nth-child(8) { width: 14%; }
/* Numeric-aligning for score / delta cells is handled by the
".cad-num" class on the on-screen table but isn't carried into the
PDF — that's fine, print output keeps everything left-aligned. */
}
/* ---------- Anonymous login card ----------
Rendered when the user hits the cow-dashboard page while logged out.
Posts to wp-login.php so the auth flow is WordPress's native one; we
only style the shell. Uses the same theme variables the dashboard
defines on :root so the card looks like part of the app even before
any JS has run. */
.cad-login-shell {
--cad-primary: #4f5dff;
--cad-primary-2: #eef0ff;
--cad-surface: #ffffff;
--cad-text: #0f172a;
--cad-text-2: #64748b;
--cad-border: #e2e8f0;
--cad-danger: #dc2626;
--cad-radius: 14px;
min-height: 70vh;
display: grid;
place-items: center;
padding: 48px 16px;
font-family: system-ui, -apple-system, Segoe UI, sans-serif;
background: linear-gradient(180deg, #f8fafc 0%, #eef1f9 100%);
}
.cad-login-card {
width: 100%;
max-width: 420px;
background: var(--cad-surface);
border: 1px solid var(--cad-border);
border-radius: var(--cad-radius);
padding: 32px 28px 26px;
box-shadow: 0 14px 40px rgba(15, 23, 42, 0.10);
color: var(--cad-text);
}
.cad-login-brand {
text-align: center;
margin-bottom: 22px;
}
.cad-login-brand__mark {
display: inline-grid;
place-items: center;
width: 56px; height: 56px;
border-radius: 16px;
background: var(--cad-primary-2);
font-size: 30px;
margin-bottom: 10px;
}
.cad-login-brand__title {
margin: 0 0 4px;
font-size: 24px;
letter-spacing: -0.02em;
font-weight: 700;
color: var(--cad-primary);
}
.cad-login-brand__tag {
margin: 0;
font-size: 13px;
color: var(--cad-text-2);
}
.cad-login-heading {
margin: 0 0 14px;
font-size: 15px;
font-weight: 600;
color: var(--cad-text);
text-align: center;
}
.cad-login-error {
background: #fef2f2;
color: var(--cad-danger);
border: 1px solid #fecaca;
border-radius: 10px;
padding: 8px 10px;
font-size: 13px;
margin-bottom: 14px;
}
/* Style wp_login_form()'s native markup. WP outputs one per field;
we restyle without changing the HTML shape so the WordPress filter
hooks (login_form_top / _middle / _bottom) any plugin might have
registered still work. */
.cad-login-formwrap #cad-loginform {
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
}
.cad-login-formwrap #cad-loginform p {
margin: 0 0 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.cad-login-formwrap #cad-loginform label {
font-size: 12px;
font-weight: 500;
color: var(--cad-text-2);
}
.cad-login-formwrap #cad-loginform input[type="text"],
.cad-login-formwrap #cad-loginform input[type="password"],
.cad-login-formwrap #cad-loginform input[type="email"] {
border: 1px solid var(--cad-border);
border-radius: 10px;
padding: 9px 11px;
font-size: 14px;
color: var(--cad-text);
background: #fff;
transition: border-color 120ms ease, box-shadow 120ms ease;
font-family: inherit;
width: 100%;
box-sizing: border-box;
}
.cad-login-formwrap #cad-loginform input[type="text"]:focus,
.cad-login-formwrap #cad-loginform input[type="password"]:focus,
.cad-login-formwrap #cad-loginform input[type="email"]:focus {
border-color: var(--cad-primary);
box-shadow: 0 0 0 3px rgba(79, 93, 255, 0.15);
outline: none;
}
/* "Remember me" sits inline as a single label with a checkbox. */
.cad-login-formwrap #cad-loginform p.login-remember {
flex-direction: row;
align-items: center;
font-size: 13px;
color: var(--cad-text-2);
}
.cad-login-formwrap #cad-loginform p.login-remember label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--cad-text-2);
font-weight: 400;
cursor: pointer;
}
.cad-login-formwrap #cad-loginform p.login-submit {
margin-top: 6px;
margin-bottom: 0;
}
.cad-login-formwrap #cad-loginform input[type="submit"] {
width: 100%;
background: var(--cad-primary);
color: #fff;
border: 0;
border-radius: 10px;
padding: 10px 14px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 120ms ease, transform 80ms ease;
font-family: inherit;
}
.cad-login-formwrap #cad-loginform input[type="submit"]:hover { background: #3d4ae3; }
.cad-login-formwrap #cad-loginform input[type="submit"]:active { transform: translateY(1px); }
.cad-login-link {
display: block;
text-align: center;
font-size: 13px;
color: var(--cad-primary);
text-decoration: none;
margin-top: 12px;
}
.cad-login-link:hover { text-decoration: underline; }
.cad-login-note {
margin: 18px 0 0;
font-size: 12px;
color: var(--cad-text-2);
text-align: center;
line-height: 1.4;
}
/* ---------- Hoof analysis (Part A — per-cow card) ---------- */
#cow-ai-dashboard-root .cad-hoof-card .cad-hoof-body {
display: grid;
grid-template-columns: 180px 1fr;
gap: 18px;
align-items: center;
}
#cow-ai-dashboard-root .cad-hoof-silhouette {
display: grid;
place-items: center;
}
#cow-ai-dashboard-root .cad-hoof-silhouette svg { max-width: 100%; height: auto; }
#cow-ai-dashboard-root .cad-hoof-sparks {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 14px;
}
#cow-ai-dashboard-root .cad-hoof-spark {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
#cow-ai-dashboard-root .cad-hoof-spark__label {
font-size: 11px;
color: var(--cad-text-2);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 6px;
}
#cow-ai-dashboard-root .cad-hoof-spark__value {
font-weight: 700;
font-size: 12px;
font-variant-numeric: tabular-nums;
}
#cow-ai-dashboard-root .cad-hoof-spark__svg {
display: block;
width: 100%;
background: color-mix(in srgb, var(--cad-border) 25%, transparent);
border-radius: 6px;
padding: 2px;
}
#cow-ai-dashboard-root .cad-hoof-spark--empty .cad-hoof-spark__svg {
display: grid;
place-items: center;
color: var(--cad-text-2);
font-size: 11px;
}
#cow-ai-dashboard-root .cad-hoof-legend {
grid-column: 1 / -1;
display: flex;
gap: 14px;
font-size: 11px;
color: var(--cad-text-2);
padding-top: 8px;
border-top: 1px dashed var(--cad-border);
}
#cow-ai-dashboard-root .cad-hoof-legend span {
display: inline-flex;
align-items: center;
gap: 4px;
}
#cow-ai-dashboard-root .cad-hoof-legend i {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
}
@media (max-width: 640px) {
#cow-ai-dashboard-root .cad-hoof-card .cad-hoof-body {
grid-template-columns: 1fr;
}
#cow-ai-dashboard-root .cad-hoof-sparks {
grid-template-columns: 1fr 1fr;
}
}
/* Video thumbnail corner badges — port of the legacy .acaris-laming-badge
markup, namespaced here. Only rendered when the cow_detail payload
reports a hoof value ≥ 10 for that position. */
#cow-ai-dashboard-root .cad-video__media { position: relative; }
#cow-ai-dashboard-root .cad-hoof-badge {
position: absolute;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
padding: 2px 6px;
font-size: 10px;
font-weight: 700;
color: #fff;
border-radius: 999px;
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
box-shadow: 0 1px 2px rgba(0,0,0,0.35);
pointer-events: none;
font-variant-numeric: tabular-nums;
}
#cow-ai-dashboard-root .cad-hoof-badge--pos-tl { top: 4px; left: 4px; }
#cow-ai-dashboard-root .cad-hoof-badge--pos-tr { top: 4px; right: 4px; }
#cow-ai-dashboard-root .cad-hoof-badge--pos-bl { bottom: 4px; left: 4px; }
#cow-ai-dashboard-root .cad-hoof-badge--pos-br { bottom: 4px; right: 4px; }
/* Sparkline hover dots + invisible hit rects. Dots are visible small
markers; the rects catch pointer events over the full sparkline
column so the tooltip activates even when the cursor isn't exactly
on the line. */
#cow-ai-dashboard-root .cad-hoof-spark__hit { cursor: pointer; }
#cow-ai-dashboard-root .cad-hoof-spark__hit:hover { fill: rgba(15, 23, 42, 0.04); }
/* Tooltip — lives at document body level so it floats above the SPA
and isn't clipped by cards or overflows. */
.cad-hoof-tip {
position: fixed;
z-index: 10000;
pointer-events: none;
background: #0f172a;
color: #f8fafc;
padding: 6px 9px;
border-radius: 6px;
font-size: 11.5px;
line-height: 1.35;
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.3);
font-variant-numeric: tabular-nums;
max-width: 240px;
}
.cad-hoof-tip[hidden] { display: none; }
.cad-hoof-tip strong { font-weight: 700; }
.cad-hoof-tip div { opacity: 0.82; margin-top: 2px; font-size: 11px; }
/* ---------- All-cows table (new roster tab) ---------- */
#cow-ai-dashboard-root .cad-cows-table { font-size: 12.5px; }
/* Mini 2×2 hoof matrix in the All-cows table. Matches the Hoof-analysis
tab swatches visually; colours come from the hoofColor() utility so
any future threshold tweak propagates. */
#cow-ai-dashboard-root .cad-mini-hoof {
display: inline-grid;
grid-template-columns: 9px 9px;
grid-template-rows: 9px 9px;
gap: 1px;
vertical-align: middle;
}
#cow-ai-dashboard-root .cad-mini-hoof i {
display: block;
border-radius: 1.5px;
/* Theme-aware outline so the 4-cell grid stays visible on dark mode
(where the previous near-black border faded into the surface). */
border: 0.5px solid var(--cad-border-2);
}
/* Empty-hoof cell: theme-aware fill so the position is still recognisable
when only the lame hoof is painted red. Light mode = very light grey,
dark mode = mid grey via the same surface variable progression. */
#cow-ai-dashboard-root .cad-mini-hoof i.cad-mini-hoof__empty {
background: var(--cad-border-2);
opacity: 0.55;
}
#cow-ai-dashboard-root .cad-cows-table th,
#cow-ai-dashboard-root .cad-cows-table td {
padding: 6px 8px;
white-space: nowrap;
}
#cow-ai-dashboard-root .cad-cows-table td.cad-truncate {
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
}
/* Status chips in the All-cows table reuse the Lameness-check palette,
with a small size tune to fit the denser table. */
#cow-ai-dashboard-root .cad-cows-table .cad-status-chip {
font-size: 11px;
padding: 1px 8px;
}
@media (max-width: 1100px) {
/* Shrink at midsize: hide status-updated-at + note columns. Status
tooltip + the dedicated cow-analysis page still carry the detail. */
#cow-ai-dashboard-root .cad-cows-table th:nth-child(11),
#cow-ai-dashboard-root .cad-cows-table td:nth-child(11),
#cow-ai-dashboard-root .cad-cows-table th:nth-child(12),
#cow-ai-dashboard-root .cad-cows-table td:nth-child(12) { display: none; }
}
@media (max-width: 760px) {
/* Also drop last-measurement and days-since columns on mobile.
Keep the Hoof swatch (col 6) — it's small and high-signal. */
#cow-ai-dashboard-root .cad-cows-table th:nth-child(7),
#cow-ai-dashboard-root .cad-cows-table td:nth-child(7),
#cow-ai-dashboard-root .cad-cows-table th:nth-child(9),
#cow-ai-dashboard-root .cad-cows-table td:nth-child(9) { display: none; }
}
/* ---------- Hoof analysis tab (Part B) ---------- */
#cow-ai-dashboard-root .cad-hoof-filters {
display: flex;
flex-wrap: wrap;
gap: 14px 22px;
align-items: center;
padding-bottom: 6px;
border-bottom: 1px dashed var(--cad-border);
}
#cow-ai-dashboard-root .cad-hoof-filter {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
#cow-ai-dashboard-root .cad-hoof-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
margin-top: 12px;
}
#cow-ai-dashboard-root .cad-hoof-tile {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px 10px 10px;
background: var(--cad-surface);
border: 1px solid var(--cad-border);
border-radius: 12px;
cursor: pointer;
transition: border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}
#cow-ai-dashboard-root .cad-hoof-tile:hover {
border-color: var(--cad-primary);
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
transform: translateY(-1px);
}
#cow-ai-dashboard-root .cad-hoof-tile--selected {
border-color: var(--cad-primary);
background: color-mix(in srgb, var(--cad-primary) 6%, var(--cad-surface));
}
#cow-ai-dashboard-root .cad-hoof-tile--expanded {
grid-column: 1 / -1;
cursor: default;
}
#cow-ai-dashboard-root .cad-hoof-tile__sel {
position: absolute;
top: 6px; right: 6px;
width: 15px; height: 15px;
cursor: pointer;
accent-color: var(--cad-primary);
}
#cow-ai-dashboard-root .cad-hoof-tile__head { line-height: 1.2; padding-right: 22px; }
#cow-ai-dashboard-root .cad-hoof-tile__name {
font-weight: 700;
font-size: 13px;
color: var(--cad-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#cow-ai-dashboard-root .cad-hoof-tile__meta {
font-size: 10.5px;
color: var(--cad-text-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#cow-ai-dashboard-root .cad-hoof-matrix {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 4px;
aspect-ratio: 1 / 0.9;
min-height: 82px;
}
#cow-ai-dashboard-root .cad-hoof-swatch {
display: grid;
place-items: center;
color: #ffffff;
font-weight: 700;
font-size: 13px;
border-radius: 8px;
font-variant-numeric: tabular-nums;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
#cow-ai-dashboard-root .cad-hoof-tile__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
min-height: 18px;
}
#cow-ai-dashboard-root .cad-hoof-tile__trend {
font-size: 10.5px;
font-weight: 600;
color: var(--cad-text-2);
font-variant-numeric: tabular-nums;
}
#cow-ai-dashboard-root .cad-hoof-tile__trend--up { color: var(--cad-danger); }
#cow-ai-dashboard-root .cad-hoof-tile__trend--down { color: var(--cad-success); }
#cow-ai-dashboard-root .cad-hoof-tile__pill {
display: inline-block;
padding: 1px 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--cad-danger) 12%, transparent);
color: var(--cad-danger);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
}
#cow-ai-dashboard-root .cad-hoof-tile__expand {
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed var(--cad-border);
}
#cow-ai-dashboard-root .cad-hoof-tile__expand .cad-hoof-card--inline .cad-hoof-body {
grid-template-columns: 180px 1fr;
}
@media (max-width: 640px) {
#cow-ai-dashboard-root .cad-hoof-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
#cow-ai-dashboard-root .cad-hoof-tile__expand .cad-hoof-card--inline .cad-hoof-body {
grid-template-columns: 1fr;
}
}
/* Farm Status — last-call tiles for the three HERDE API endpoints. */
#cow-ai-dashboard-root .cad-api-tiles {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 8px;
}
#cow-ai-dashboard-root .cad-api-tile {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
padding: 18px 20px 16px;
border-radius: 14px;
background: var(--cad-surface);
border: 1px solid var(--cad-border);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
overflow: hidden;
transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
#cow-ai-dashboard-root .cad-api-tile::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: var(--cad-text-2);
opacity: 0.3;
}
#cow-ai-dashboard-root .cad-api-tile:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
#cow-ai-dashboard-root .cad-api-tile__row {
display: flex;
align-items: center;
gap: 10px;
}
#cow-ai-dashboard-root .cad-api-tile__dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--cad-text-2);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--cad-text-2) 18%, transparent);
flex: 0 0 auto;
}
#cow-ai-dashboard-root .cad-api-tile__label {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--cad-text-2);
text-transform: uppercase;
}
#cow-ai-dashboard-root .cad-api-tile__when {
font-size: 20px;
font-weight: 600;
color: var(--cad-text);
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
#cow-ai-dashboard-root .cad-api-tile__ago {
align-self: flex-start;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
background: color-mix(in srgb, var(--cad-text-2) 12%, transparent);
color: var(--cad-text-2);
}
#cow-ai-dashboard-root .cad-api-tile--ok::before { background: var(--cad-success); opacity: 1; }
#cow-ai-dashboard-root .cad-api-tile--ok .cad-api-tile__dot {
background: var(--cad-success);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--cad-success) 20%, transparent);
}
#cow-ai-dashboard-root .cad-api-tile--ok .cad-api-tile__ago {
background: var(--cad-success-2);
color: var(--cad-success);
}
#cow-ai-dashboard-root .cad-api-tile--warn::before { background: var(--cad-warn); opacity: 1; }
#cow-ai-dashboard-root .cad-api-tile--warn .cad-api-tile__dot {
background: var(--cad-warn);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--cad-warn) 22%, transparent);
}
#cow-ai-dashboard-root .cad-api-tile--warn .cad-api-tile__ago {
background: var(--cad-warn-2);
color: var(--cad-warn);
}
#cow-ai-dashboard-root .cad-api-tile--danger::before { background: var(--cad-danger); opacity: 1; }
#cow-ai-dashboard-root .cad-api-tile--danger {
border-color: color-mix(in srgb, var(--cad-danger) 35%, var(--cad-border));
}
#cow-ai-dashboard-root .cad-api-tile--danger .cad-api-tile__dot {
background: var(--cad-danger);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--cad-danger) 22%, transparent);
}
#cow-ai-dashboard-root .cad-api-tile--danger .cad-api-tile__ago {
background: var(--cad-danger-2);
color: var(--cad-danger);
}
#cow-ai-dashboard-root .cad-api-tile--empty {
background: color-mix(in srgb, var(--cad-text-2) 4%, var(--cad-surface));
}
#cow-ai-dashboard-root .cad-api-tile--empty .cad-api-tile__when {
color: var(--cad-text-2);
font-style: italic;
font-size: 16px;
}
@media (max-width: 900px) {
#cow-ai-dashboard-root .cad-api-tiles { grid-template-columns: 1fr; }
}
#cow-ai-dashboard-root .cad-empty-row {
text-align: center;
padding: 24px 12px;
color: var(--cad-text-2);
font-style: italic;
}
/* Farm Status — sub-tab strip + Connection Info card layout. */
#cow-ai-dashboard-root .cad-subtabs {
display: flex;
gap: 6px;
padding: 6px;
margin-bottom: 16px;
background: color-mix(in srgb, var(--cad-text-2) 8%, transparent);
border-radius: 12px;
width: fit-content;
}
#cow-ai-dashboard-root .cad-subtab {
appearance: none;
background: transparent;
border: 0;
border-radius: 8px;
padding: 8px 18px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--cad-text-2);
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
#cow-ai-dashboard-root .cad-subtab:hover {
color: var(--cad-text);
}
#cow-ai-dashboard-root .cad-subtab--active {
background: var(--cad-surface);
color: var(--cad-text);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
/* Connection-info credential rows. */
#cow-ai-dashboard-root .cad-credentials {
display: flex;
flex-direction: column;
gap: 12px;
}
#cow-ai-dashboard-root .cad-credential-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
gap: 16px;
padding: 12px 14px;
border: 1px solid var(--cad-border);
border-radius: 10px;
background: color-mix(in srgb, var(--cad-text-2) 4%, var(--cad-surface));
}
#cow-ai-dashboard-root .cad-credential-row__label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--cad-text-2);
margin-bottom: 4px;
}
#cow-ai-dashboard-root .cad-credential-row__value {
font-size: 13px;
color: var(--cad-text);
word-break: break-all;
font-variant-numeric: tabular-nums;
}
#cow-ai-dashboard-root .cad-credential-row__pwd-wrap {
display: flex;
align-items: stretch;
gap: 6px;
}
#cow-ai-dashboard-root .cad-credential-row__input {
flex: 1 1 auto;
min-width: 0;
padding: 6px 10px;
border: 1px solid var(--cad-border);
border-radius: 8px;
background: var(--cad-surface);
color: var(--cad-text);
font: inherit;
font-size: 13px;
font-variant-numeric: tabular-nums;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#cow-ai-dashboard-root .cad-credential-row__eye {
appearance: none;
background: var(--cad-surface);
border: 1px solid var(--cad-border);
border-radius: 8px;
padding: 0 10px;
cursor: pointer;
color: var(--cad-text-2);
display: inline-flex;
align-items: center;
justify-content: center;
}
#cow-ai-dashboard-root .cad-credential-row__eye:hover {
color: var(--cad-text);
background: color-mix(in srgb, var(--cad-text-2) 6%, var(--cad-surface));
}
#cow-ai-dashboard-root .cad-credential-row__eye svg {
width: 16px;
height: 16px;
}
@media (max-width: 640px) {
#cow-ai-dashboard-root .cad-credential-row { grid-template-columns: 1fr; }
}
/* Farm Status — camera tiles. Same visual language as .cad-api-tile so
the two cards read as one design, with a richer body for the per-cam
metadata. Traffic-light coloring drives both the left accent stripe
and the status pill in the top-right. */
#cow-ai-dashboard-root .cad-cam-tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
margin-top: 8px;
}
#cow-ai-dashboard-root .cad-cam-tile {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 18px 14px;
border-radius: 14px;
background: var(--cad-surface);
border: 1px solid var(--cad-border);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
overflow: hidden;
transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
#cow-ai-dashboard-root .cad-cam-tile::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: var(--cad-text-2);
opacity: 0.3;
}
#cow-ai-dashboard-root .cad-cam-tile:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
#cow-ai-dashboard-root .cad-cam-tile__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
#cow-ai-dashboard-root .cad-cam-tile__id {
font-size: 18px;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--cad-text);
font-variant-numeric: tabular-nums;
}
#cow-ai-dashboard-root .cad-cam-tile__badge {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
background: color-mix(in srgb, var(--cad-text-2) 14%, transparent);
color: var(--cad-text-2);
white-space: nowrap;
}
#cow-ai-dashboard-root .cad-cam-tile__badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
justify-content: flex-end;
}
#cow-ai-dashboard-root .cad-cam-tile__ping {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
#cow-ai-dashboard-root .cad-cam-tile__ping::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex: 0 0 auto;
}
#cow-ai-dashboard-root .cad-cam-tile__ping--ok {
background: var(--cad-success-2);
color: var(--cad-success);
}
#cow-ai-dashboard-root .cad-cam-tile__ping--danger {
background: var(--cad-danger-2);
color: var(--cad-danger);
}
#cow-ai-dashboard-root .cad-cam-tile__ping--probing {
background: color-mix(in srgb, var(--cad-text-2) 12%, transparent);
color: var(--cad-text-2);
}
#cow-ai-dashboard-root .cad-cam-tile__ping--probing::before {
animation: cad-spinner-rotate 0.9s linear infinite;
background: transparent;
border: 2px solid currentColor;
border-right-color: transparent;
width: 8px;
height: 8px;
}
#cow-ai-dashboard-root .cad-cam-tile__purpose {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--cad-text-2);
text-transform: uppercase;
}
#cow-ai-dashboard-root .cad-cam-tile__meta {
display: grid;
gap: 10px;
margin: 0;
}
#cow-ai-dashboard-root .cad-cam-tile__meta > div {
display: flex;
flex-direction: column;
gap: 2px;
}
#cow-ai-dashboard-root .cad-cam-tile__meta dt {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--cad-text-2);
}
#cow-ai-dashboard-root .cad-cam-tile__meta dd {
margin: 0;
font-size: 13px;
color: var(--cad-text);
font-variant-numeric: tabular-nums;
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
#cow-ai-dashboard-root .cad-cam-tile__ago {
font-size: 11px;
color: var(--cad-text-2);
font-weight: 500;
}
#cow-ai-dashboard-root .cad-cam-tile__actions {
margin-top: auto;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
}
#cow-ai-dashboard-root .cad-cam-tile__live,
#cow-ai-dashboard-root .cad-cam-tile__reboot {
display: inline-flex;
align-items: center;
gap: 6px;
}
#cow-ai-dashboard-root .cad-cam-tile__live-icon {
width: 14px;
height: 14px;
flex: 0 0 auto;
}
/* Restart-cam button feedback states. */
#cow-ai-dashboard-root .cad-cam-tile__reboot[disabled] {
cursor: progress;
opacity: 0.95;
}
#cow-ai-dashboard-root .cad-cam-tile__reboot--success {
background: var(--cad-success-2);
color: var(--cad-success);
border-color: color-mix(in srgb, var(--cad-success) 35%, var(--cad-border));
}
#cow-ai-dashboard-root .cad-cam-tile__reboot--error {
background: var(--cad-danger-2);
color: var(--cad-danger);
border-color: color-mix(in srgb, var(--cad-danger) 35%, var(--cad-border));
}
/* Generic inline spinner used inside buttons and other small UI. */
#cow-ai-dashboard-root .cad-spinner {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid currentColor;
border-right-color: transparent;
animation: cad-spinner-rotate 0.7s linear infinite;
flex: 0 0 auto;
}
#cow-ai-dashboard-root .cad-spinner--sm { width: 12px; height: 12px; border-width: 2px; }
@keyframes cad-spinner-rotate {
to { transform: rotate(360deg); }
}
#cow-ai-dashboard-root .cad-cam-tile--ok::before { background: var(--cad-success); opacity: 1; }
#cow-ai-dashboard-root .cad-cam-tile--ok .cad-cam-tile__badge {
background: var(--cad-success-2);
color: var(--cad-success);
}
#cow-ai-dashboard-root .cad-cam-tile--warn::before { background: var(--cad-warn); opacity: 1; }
#cow-ai-dashboard-root .cad-cam-tile--warn .cad-cam-tile__badge {
background: var(--cad-warn-2);
color: var(--cad-warn);
}
#cow-ai-dashboard-root .cad-cam-tile--danger::before { background: var(--cad-danger); opacity: 1; }
#cow-ai-dashboard-root .cad-cam-tile--danger {
border-color: color-mix(in srgb, var(--cad-danger) 35%, var(--cad-border));
}
#cow-ai-dashboard-root .cad-cam-tile--danger .cad-cam-tile__badge {
background: var(--cad-danger-2);
color: var(--cad-danger);
}
#cow-ai-dashboard-root .cad-cam-tile--danger .cad-cam-tile__live {
opacity: 0.85;
}
/* Floating MJPEG preview anchored bottom-right. Lives outside the
dashboard root so it floats over any tab; styled standalone so it
inherits no theme tokens and works on any page background. */
.cad-stream-pip {
position: fixed;
right: 16px;
bottom: 16px;
width: 360px;
max-width: calc(100vw - 32px);
background: #0f172a;
color: #f8fafc;
border-radius: 12px;
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.32),
0 2px 8px rgba(15, 23, 42, 0.18);
z-index: 99998;
overflow: hidden;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.cad-stream-pip__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 10px 8px 14px;
background: rgba(255, 255, 255, 0.05);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cad-stream-pip__title {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cad-stream-pip__btns {
display: inline-flex;
align-items: center;
gap: 4px;
}
.cad-stream-pip__icon-btn {
background: transparent;
color: #f8fafc;
border: 0;
cursor: pointer;
width: 28px;
height: 28px;
border-radius: 6px;
font-size: 18px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
.cad-stream-pip__icon-btn:hover {
background: rgba(255, 255, 255, 0.12);
}
.cad-stream-pip__icon-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.cad-stream-pip__icon-btn svg {
width: 15px;
height: 15px;
}
.cad-stream-pip__close {
font-size: 20px;
}
.cad-stream-pip__body {
position: relative;
background: #000;
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
}
.cad-stream-pip__img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.cad-stream-pip__loader {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
background: #000;
color: rgba(248, 250, 252, 0.85);
}
.cad-stream-pip__loader[hidden] { display: none; }
.cad-stream-pip__spinner {
width: 36px;
height: 36px;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.12);
border-top-color: #f8fafc;
animation: cad-stream-pip-spin 0.9s linear infinite;
}
.cad-stream-pip__loader-text {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.02em;
}
.cad-stream-pip__loader--error .cad-stream-pip__spinner {
display: none;
}
.cad-stream-pip__loader--error .cad-stream-pip__loader-text {
color: #fca5a5;
}
@keyframes cad-stream-pip-spin {
to { transform: rotate(360deg); }
}
@media (max-width: 480px) {
.cad-stream-pip { width: calc(100vw - 24px); right: 12px; bottom: 12px; }
}