* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* ─────────────────────────────────────────────────────────
Wave 1 design tokens (mockup-aligned). Existing vars below
are retained for backward-compat — migrate components over.
───────────────────────────────────────────────────────── */
/* Neutrals — warm linen → ink */
--linen-50: #faf7f2;
--linen-100: #f3ede4;
--linen-200: #ece4d6;
--stone-200: #e6dfd3;
--stone-300: #d4cabb;
--stone-400: #b3a995;
--stone-500: #8a8273;
--ink-700: #3a3a36;
--ink-900: #1a1a17;
/* Brand — forest green family + warm terracotta accent */
--forest-900: #163d2c;
--forest-800: #1b4332;
--forest-700: #2d6a4f;
--forest-600: #38866a;
--forest-500: #52b788;
--forest-100: #d8f3dc;
--terracotta-700: #a0563a;
--terracotta-600: #b86344;
--terracotta-100: #f3e0d6;
/* Semantic — paired -100/-600/-700 for tinted pills + text */
--success-700: #1f5e3a;
--success-600: #277a4c;
--success-100: #d6efdc;
--warning-700: #9c6c14;
--warning-600: #c08919;
--warning-100: #f5e6c2;
--danger-700: #7a2c20;
--danger-600: #a23a2a;
--danger-100: #f0d4cf;
--info-700: #1f5670;
--info-600: #2c6e89;
--info-100: #d4e6ee;
/* Type — Inter for UI, Fraunces for editorial moments */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
/* ── Legacy tokens (still used by existing components) ── */
/* Primary - Deep Forest Green */
--primary: #2d6a4f;
--primary-dark: #1b4332;
--primary-light: #52b788;
/* Secondary - Warm Sage & Earth */
--secondary: #7c8a6e;
--accent: #a0785a;
--accent-light: #c9a882;
/* Warm Neutrals */
--background: #faf8f5;
--surface: #ffffff;
--surface-alt: #f5f0eb;
--text: #2d3a2e;
--text-light: #6b7c6b;
--border: #d4cec5;
--border-light: #e8e2da;
/* Status colors */
--danger: #c0392b;
--warning: #d4a017;
--success: #27ae60;
--info: #2e86ab;
/* Calendar/Task colors */
--task-pending: #d4a017;
--task-complete: #27ae60;
--event-breeding: #8b7355;
--event-health: #2e86ab;
--event-production: #d4a017;
--event-task: #2d6a4f;
/* Shadow system */
--shadow-sm: 0 1px 3px rgba(45, 58, 46, 0.06);
--shadow-md: 0 4px 12px rgba(45, 58, 46, 0.08);
--shadow-lg: 0 8px 24px rgba(45, 58, 46, 0.12);
--shadow-xl: 0 12px 32px rgba(45, 58, 46, 0.16);
/* Sidebar */
--sidebar-width: 240px;
--sidebar-collapsed-width: 64px;
--sidebar-bg: #1b4332;
--sidebar-text: #d8f3dc;
--sidebar-text-muted: #95d5b2;
--sidebar-hover: rgba(255, 255, 255, 0.08);
--sidebar-active: rgba(255, 255, 255, 0.15);
--sidebar-divider: rgba(255, 255, 255, 0.1);
--mobile-topbar-height: 56px;
/* Border radius scale */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
/* Transitions */
--transition-fast: 0.15s ease;
--transition-normal: 0.25s ease;
}
body {
font-family: var(--font-sans);
background-color: var(--linen-50);
color: var(--text);
line-height: 1.6;
font-size: 1rem;
/* Wave 1 — guard against any inherited gradient on the document body */
background-image: none;
}
/* ─────────────────────────────────────────────────────────
Wave 1 icon system. Replaces emoji nav icons. Use:
.icon-sm = 14px, default = 18px, .icon-lg = 22px.
Inherits text color via currentColor on the symbols.
───────────────────────────────────────────────────────── */
.icon {
width: 18px;
height: 18px;
flex-shrink: 0;
vertical-align: -3px;
color: currentColor;
}
.icon-sm { width: 14px; height: 14px; vertical-align: -2px; }
.icon-lg { width: 22px; height: 22px; vertical-align: -4px; }
.icon-xl { width: 28px; height: 28px; }
/* Make sure existing .nav-icon span class doesn't add weight when an SVG is inside it */
.nav-icon { display: inline-flex; align-items: center; justify-content: center; }
.nav-icon .icon { width: 18px; height: 18px; }
/* Containers that previously held a giant emoji — size the SVG to match */
.summary-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--forest-700); }
.summary-icon .icon { width: 32px; height: 32px; }
.summary-card.income .summary-icon { color: var(--success-600); }
.empty-state-icon { display: inline-flex; align-items: center; justify-content: center; }
.empty-state-icon .icon { width: 48px; height: 48px; }
.chat-welcome-icon { display: inline-flex; align-items: center; justify-content: center; }
.chat-welcome-icon .icon { width: 36px; height: 36px; }
.chat-fab .icon, .fab-add-transaction .icon { width: 22px; height: 22px; }
.fab-add-transaction { color: #fff; }
.file-upload-icon { display: inline-flex; align-items: center; }
.file-upload-icon .icon { width: 28px; height: 28px; }
/* Sidebar logo — was 1.5rem emoji, give SVG matching prominence */
.sidebar-logo { display: inline-flex; align-items: center; justify-content: center; color: var(--forest-500); }
.sidebar-logo .icon { width: 22px; height: 22px; }
/* Wave 1c — fix the empty `` that renders literal
"————————— ————" placeholder dashes. Wrap with a label that shows
"All months" overlay until the input has a value. */
.month-filter-wrap { position: relative; display: inline-block; }
.month-filter-wrap input[type="month"] { font-family: inherit; }
.month-filter-wrap[data-empty="true"] input[type="month"] { color: transparent; }
.month-filter-wrap[data-empty="true"] input[type="month"]::-webkit-datetime-edit { color: transparent; }
.month-filter-wrap .month-filter-placeholder {
position: absolute;
top: 50%;
left: 12px;
transform: translateY(-50%);
color: var(--stone-500);
pointer-events: none;
font-size: 0.92rem;
display: none;
}
.month-filter-wrap[data-empty="true"] .month-filter-placeholder { display: inline; }
/* App Layout */
.app-container {
display: flex;
min-height: 100vh;
}
main {
flex: 1;
margin-left: var(--sidebar-width);
padding: 24px 32px;
max-width: 1400px;
transition: margin-left var(--transition-normal);
min-height: 100vh;
}
.app-container.sidebar-collapsed main {
margin-left: var(--sidebar-collapsed-width);
}
/* Sidebar */
.sidebar {
position: fixed;
top: 0;
left: 0;
width: var(--sidebar-width);
height: 100vh;
background: var(--sidebar-bg);
color: var(--sidebar-text);
display: flex;
flex-direction: column;
z-index: 900;
transition: width var(--transition-normal);
overflow: hidden;
}
.app-container.sidebar-collapsed .sidebar {
width: var(--sidebar-collapsed-width);
}
.sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
border-bottom: 1px solid var(--sidebar-divider);
min-height: 60px;
}
.sidebar-brand {
display: flex;
align-items: center;
gap: 10px;
}
.sidebar-logo {
font-size: 1.5rem;
flex-shrink: 0;
}
.sidebar-title {
/* Wave 1d — editorial brand serif */
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
letter-spacing: -0.01em;
}
.app-container.sidebar-collapsed .sidebar-title,
.app-container.sidebar-collapsed .nav-label,
.app-container.sidebar-collapsed .sidebar-section-header,
.app-container.sidebar-collapsed .sidebar-farm,
.app-container.sidebar-collapsed .sidebar-user .nav-label,
.app-container.sidebar-collapsed .btn-logout {
display: none;
}
.app-container.sidebar-collapsed .sidebar-section.collapsed .sidebar-section-links {
display: flex;
flex-direction: column;
}
.sidebar-toggle {
background: none;
border: none;
color: var(--sidebar-text-muted);
cursor: pointer;
padding: 6px;
border-radius: var(--radius-sm);
transition: background var(--transition-fast);
flex-shrink: 0;
}
.sidebar-toggle:hover {
background: var(--sidebar-hover);
}
.toggle-icon,
.toggle-icon::before,
.toggle-icon::after {
display: block;
width: 18px;
height: 2px;
background: currentColor;
border-radius: 1px;
transition: all var(--transition-fast);
}
.toggle-icon {
position: relative;
}
.toggle-icon::before,
.toggle-icon::after {
content: '';
position: absolute;
left: 0;
}
.toggle-icon::before { top: -6px; }
.toggle-icon::after { top: 6px; }
.app-container.sidebar-collapsed .toggle-icon { background: transparent; }
.app-container.sidebar-collapsed .toggle-icon::before { transform: rotate(45deg); top: 0; width: 12px; }
.app-container.sidebar-collapsed .toggle-icon::after { transform: rotate(-45deg); top: 0; width: 12px; }
/* Farm Selector in Sidebar */
.sidebar-farm {
padding: 12px 16px;
display: flex;
gap: 8px;
align-items: center;
}
.sidebar-farm .farm-selector {
flex: 1;
min-width: 0;
background: rgba(255, 255, 255, 0.08);
border: 1px solid var(--sidebar-divider);
color: var(--sidebar-text);
border-radius: var(--radius-md);
padding: 8px 10px;
font-size: 0.85rem;
}
.btn-create-farm {
flex-shrink: 0;
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid var(--sidebar-divider);
color: var(--sidebar-text);
border-radius: var(--radius-md);
cursor: pointer;
font-size: 1.1rem;
line-height: 1;
transition: background var(--transition-fast);
}
.btn-create-farm:hover {
background: var(--sidebar-hover);
}
.sidebar-farm .farm-selector option {
background: var(--sidebar-bg);
color: var(--sidebar-text);
}
/* Quick Entry Button */
.sidebar-quick-entry {
padding: 8px 16px;
}
.btn-quick-entry {
/* Wave 1d — refined Quick Entry button: deeper green-on-dark + accent
icon color so it reads as the primary CTA without screaming. */
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
background: var(--forest-500);
color: var(--forest-900);
border: none;
border-radius: var(--radius-md);
cursor: pointer;
font-weight: 600;
font-size: 0.9rem;
letter-spacing: -0.005em;
transition: background var(--transition-fast), transform var(--transition-fast);
}
.btn-quick-entry:hover {
background: #7ed09d;
}
.btn-quick-entry:active {
transform: translateY(1px);
}
.btn-quick-entry .icon { color: var(--forest-900); }
.app-container.sidebar-collapsed .btn-quick-entry .nav-label {
display: none;
}
.app-container.sidebar-collapsed .btn-quick-entry {
justify-content: center;
padding: 10px;
}
/* Navigation Area */
.sidebar-nav {
flex: 1;
overflow-y: auto;
padding: 8px 0;
scrollbar-width: thin;
scrollbar-color: var(--sidebar-divider) transparent;
/* Fade hint at bottom to signal more content */
-webkit-mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent 100%);
mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent 100%);
}
.sidebar-nav:hover {
-webkit-mask-image: none;
mask-image: none;
}
.sidebar-section-header {
/* Wave 1d — quieter section labels */
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 18px 8px;
font-size: 0.66rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.42);
white-space: nowrap;
cursor: pointer;
user-select: none;
}
.sidebar-section-header:hover {
color: var(--sidebar-text);
}
.section-chevron {
font-size: 0.6rem;
transition: transform var(--transition-fast);
line-height: 1;
}
.sidebar-section.collapsed .section-chevron {
transform: rotate(-90deg);
}
.sidebar-section.collapsed .sidebar-section-links {
display: none;
}
.sidebar-link {
/* Wave 1d — pill-style nav links, no heavy left bar */
display: flex;
align-items: center;
gap: 12px;
margin: 1px 10px;
padding: 8px 10px;
color: rgba(255, 255, 255, 0.78);
text-decoration: none;
font-size: 0.88rem;
font-weight: 500;
border-radius: var(--radius-sm);
transition: background var(--transition-fast), color var(--transition-fast);
cursor: pointer;
white-space: nowrap;
}
.sidebar-link:hover {
background: rgba(255, 255, 255, 0.06);
color: #fff;
}
.sidebar-link.active {
background: rgba(255, 255, 255, 0.10);
color: #fff;
font-weight: 500;
}
.sidebar-link.active .icon { color: var(--forest-500); }
.sidebar-link .nav-icon {
flex-shrink: 0;
width: 18px;
height: 18px;
text-align: center;
color: rgba(255, 255, 255, 0.6);
}
.sidebar-link:hover .nav-icon,
.sidebar-link.active .nav-icon { color: #fff; }
/* Sidebar Footer */
.sidebar-footer {
border-top: 1px solid var(--sidebar-divider);
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.sidebar-footer-btn {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
background: var(--sidebar-hover);
color: var(--sidebar-text);
border: none;
padding: 8px 10px;
border-radius: var(--radius-md);
cursor: pointer;
font-size: 0.85rem;
transition: background var(--transition-fast);
}
.sidebar-footer-btn:hover {
background: var(--sidebar-active);
}
.sidebar-user {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: var(--sidebar-text-muted);
}
.btn-logout {
/* Wave 1d — quieter logout, no bordered chip */
margin-left: auto;
background: none;
border: none;
color: rgba(255, 255, 255, 0.45);
padding: 4px 8px;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.01em;
transition: color var(--transition-fast), background var(--transition-fast);
}
.btn-logout:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
/* Mobile Top Bar */
.mobile-topbar {
display: none;
}
/* Sidebar Overlay */
.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 899;
}
.sidebar-overlay.active {
display: block;
}
/* Hamburger Button */
.hamburger-btn {
background: none;
border: none;
padding: 8px;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 5px;
min-width: 44px;
min-height: 44px;
align-items: center;
justify-content: center;
}
.hamburger-btn span {
display: block;
width: 22px;
height: 2px;
background: white;
border-radius: 1px;
transition: all var(--transition-fast);
}
/* Views */
.view {
display: none;
}
.view.active {
display: block;
}
.view-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.view-header h2 {
/* Wave 1d — editorial page titles */
color: var(--ink-900);
font-family: var(--font-serif);
font-weight: 500;
font-size: 1.85rem;
letter-spacing: -0.02em;
line-height: 1.1;
}
/* Buttons */
.btn {
padding: 10px 20px;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
font-size: 0.95rem;
font-weight: 600;
transition: all 0.2s;
letter-spacing: 0.01em;
}
.btn-primary {
background: var(--primary);
color: white;
box-shadow: 0 2px 4px rgba(45, 106, 79, 0.2);
}
.btn-primary:hover {
background: var(--primary-dark);
box-shadow: 0 4px 8px rgba(45, 106, 79, 0.3);
transform: translateY(-1px);
}
.btn-secondary {
background: var(--surface-alt);
color: var(--text);
border: 1px solid var(--border);
}
.btn-secondary:hover {
background: var(--border-light);
}
.btn-danger {
background: var(--danger);
color: white;
}
.btn-danger:hover {
background: #c9302c;
}
.btn-warning {
background: var(--warning-600);
color: white;
}
.btn-warning:hover {
background: var(--warning-700);
}
.btn-small {
padding: 6px 12px;
font-size: 0.85rem;
}
/* Stats Bar */
.stats-bar {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.stat {
background: var(--surface);
border: 1px solid var(--border-light);
padding: 24px;
border-radius: var(--radius-lg);
text-align: center;
box-shadow: var(--shadow-sm);
}
.clickable-stat {
cursor: pointer;
transition: all 0.2s ease;
}
.clickable-stat:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
background: var(--primary-light);
color: white;
}
.clickable-stat:hover .stat-value,
.clickable-stat:hover .stat-label {
color: white;
}
.clickable-stat:active {
transform: translateY(0);
}
.stat-value {
display: block;
font-size: 2rem;
font-weight: 700;
color: var(--primary);
}
.stat-label {
color: var(--text-light);
font-size: 0.9rem;
}
/* Search/Filter Bar */
.search-filter {
display: flex;
gap: 15px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.search-filter input,
.search-filter select {
padding: 10px 15px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-size: 0.95rem;
min-width: 200px;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.search-filter input:focus,
.search-filter select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1);
}
/* Sheep Grid */
.sheep-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.sheep-card {
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
position: relative;
}
.sheep-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.sheep-card-photo {
width: 100%;
height: 180px;
background: var(--background);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-light);
font-size: 3rem;
overflow: hidden;
position: relative;
}
.sheep-card-photo img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.sheep-card-body {
padding: 20px;
}
.sheep-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
}
.sheep-tag {
background: var(--primary);
color: white;
padding: 5px 12px;
border-radius: 20px;
font-weight: 600;
font-size: 0.9rem;
}
.sheep-status {
padding: 4px 10px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 500;
}
.sheep-status.active {
background: #e8f5e9;
color: var(--success);
}
.sheep-status.off-site {
background: #e3f2fd;
color: #1976d2;
}
.sheep-card.off-site {
opacity: 0.85;
border: 2px dashed #90a4ae;
}
/* Dairy Status Badges */
.dairy-status-badge {
display: inline-block;
padding: 3px 8px;
border-radius: 10px;
font-size: 0.7rem;
font-weight: 600;
margin-top: 5px;
}
.dairy-status-badge.lactating {
background: rgba(34, 197, 94, 0.15);
color: #16a34a;
}
.dairy-status-badge.dry {
background: rgba(234, 179, 8, 0.15);
color: #ca8a04;
}
.dairy-status-badge.pregnant {
background: rgba(168, 85, 247, 0.15);
color: #9333ea;
}
.dairy-status-badge.maiden {
background: rgba(99, 102, 241, 0.15);
color: #4f46e5;
}
.dairy-status-badge.bred {
background: rgba(251, 146, 60, 0.15);
color: #ea580c;
}
/* Lactation Curve Chart */
.lactation-chart-container {
height: 200px;
margin-bottom: 15px;
}
.lactation-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.lact-stat {
background: var(--background);
padding: 10px;
border-radius: 8px;
text-align: center;
}
.lact-stat span:first-child {
display: block;
font-size: 0.75rem;
color: var(--text-light);
margin-bottom: 3px;
}
.lact-stat span:last-child {
font-weight: 600;
color: var(--primary);
}
@media (max-width: 600px) {
.lactation-stats {
grid-template-columns: repeat(2, 1fr);
}
}
.sheep-status.sold {
background: #fff3e0;
color: var(--warning);
}
.sheep-status.deceased {
background: #ffebee;
color: var(--danger);
}
.sheep-status.slaughtered {
background: #fce4ec;
color: #c2185b;
}
.sheep-status.external {
background: #ede7f6;
color: #5e35b1;
}
.sheep-name {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 8px;
}
.sheep-info {
color: var(--text-light);
font-size: 0.9rem;
}
.sheep-info p {
margin-bottom: 4px;
}
.sheep-color-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 0.8rem;
background: var(--background);
margin-top: 6px;
}
.sheep-card-actions {
display: flex;
gap: 8px;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid var(--border);
}
/* Bulk Selection Checkbox — Wave 8: hover reveal + always-on touch */
.sheep-card-photo {
position: relative;
}
.sheep-card .sheep-select-checkbox {
position: absolute;
top: 8px;
left: 8px;
width: 22px;
height: 22px;
cursor: pointer;
accent-color: var(--forest-700, var(--primary));
background: var(--surface);
border: 2px solid var(--surface);
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,.18);
z-index: 10;
opacity: 0;
transition: opacity .15s ease;
}
.sheep-card:hover .sheep-select-checkbox,
.sheep-card .sheep-select-checkbox:checked,
.sheep-card.selected .sheep-select-checkbox {
opacity: 1;
}
@media (hover: none) {
.sheep-card .sheep-select-checkbox { opacity: 1; }
}
.sheep-card.selected {
outline: 2px solid var(--forest-500);
outline-offset: -2px;
box-shadow: 0 4px 15px rgba(45, 106, 79, 0.18);
}
/* Bulk Toolbar */
.bulk-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--primary);
color: white;
padding: 12px 20px;
border-radius: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 12px;
}
.bulk-toolbar-left {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.bulk-toolbar-left span {
font-weight: 600;
}
.bulk-toolbar-left .btn {
background: rgba(255, 255, 255, 0.2);
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.bulk-toolbar-left .btn:hover {
background: rgba(255, 255, 255, 0.3);
}
.bulk-toolbar-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.bulk-toolbar-actions .btn {
background: white;
color: var(--primary);
}
.bulk-toolbar-actions .btn:hover {
background: var(--background);
}
/* Bulk Modal Selected Summary */
.bulk-selected-summary {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 10px;
background: var(--background);
border-radius: 8px;
max-height: 120px;
overflow-y: auto;
}
.bulk-chip {
display: inline-block;
padding: 4px 10px;
background: var(--primary-light);
color: white;
border-radius: 15px;
font-size: 0.85rem;
font-weight: 500;
}
/* Bulk Type Fields */
.bulk-type-fields {
border-top: 1px solid var(--border);
padding-top: 15px;
margin-top: 15px;
}
/* Mobile adjustments for bulk toolbar */
@media (max-width: 600px) {
.bulk-toolbar {
flex-direction: column;
align-items: stretch;
}
.bulk-toolbar-left,
.bulk-toolbar-actions {
justify-content: center;
}
.bulk-toolbar-left span {
width: 100%;
text-align: center;
margin-bottom: 5px;
}
}
/* View Toggle */
.view-toggle {
display: flex;
gap: 4px;
background: var(--background);
border-radius: 6px;
padding: 4px;
}
.view-toggle-btn {
padding: 6px 10px;
border: none;
background: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
}
.view-toggle-btn.active {
background: var(--primary);
color: white;
}
/* Records List */
.records-list {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Ledger View */
.ledger-view {
overflow-x: auto;
}
.ledger-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.ledger-table th,
.ledger-table td {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid var(--border);
}
.ledger-table th {
background: var(--background);
font-weight: 600;
position: sticky;
top: 0;
}
.ledger-table th.sortable {
cursor: pointer;
user-select: none;
}
.ledger-table th.sortable:hover {
background: var(--border);
}
.sort-indicator {
font-size: 0.7rem;
opacity: 0.6;
margin-left: 2px;
}
.ledger-table .amount-col {
text-align: right;
min-width: 90px;
}
.ledger-table tbody tr:hover {
background: var(--background);
}
.ledger-table .income-cell {
color: var(--primary);
font-weight: 500;
}
.ledger-table .expense-cell {
color: var(--danger);
font-weight: 500;
}
.ledger-table .balance-cell {
font-weight: 600;
}
.ledger-table .balance-positive {
color: var(--primary);
}
.ledger-table .balance-negative {
color: var(--danger);
}
.ledger-table tfoot td {
font-weight: 700;
background: var(--background);
border-top: 2px solid var(--border);
}
.ledger-add-row {
background: var(--background) !important;
border-bottom: 2px solid var(--border) !important;
}
.ledger-add-row:hover {
background: var(--background) !important;
}
.ledger-actions {
white-space: nowrap;
}
.ledger-actions .btn {
margin-right: 4px;
padding: 4px 8px;
font-size: 0.9rem;
}
.ledger-actions .btn:last-child {
margin-right: 0;
}
.btn-receipt {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 1rem;
padding: 2px 4px;
border-radius: var(--radius-sm, 4px);
transition: background-color 0.15s;
vertical-align: middle;
}
.btn-receipt:hover {
background-color: var(--bg-hover, rgba(0, 0, 0, 0.08));
}
/* Floating Action Button */
.fab-add-transaction {
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--primary);
color: white;
border: none;
font-size: 1.5rem;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
transition: all 0.3s ease;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.fab-add-transaction:hover {
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(0,0,0,0.3);
background: var(--primary-dark);
}
.fab-add-transaction:active {
transform: scale(0.95);
}
.record-item {
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 15px 20px;
box-shadow: var(--shadow-sm);
display: flex;
justify-content: space-between;
align-items: center;
}
.record-main {
flex: 1;
}
.record-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 6px;
flex-wrap: wrap;
}
.record-type {
padding: 4px 10px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 500;
background: var(--primary-light);
color: white;
}
.record-type.vaccination {
background: #5bc0de;
}
.record-type.treatment {
background: #f0ad4e;
}
.record-type.checkup {
background: #5cb85c;
}
.record-type.deworming {
background: #9b59b6;
}
.record-type.hoof-trim {
background: #8b7355;
}
.record-type.injury {
background: #e74c3c;
}
.record-type.illness {
background: #e67e22;
}
.record-type.excellent {
background: #27ae60;
}
.record-type.good {
background: #3498db;
}
.record-type.fair {
background: #f39c12;
}
.record-type.poor {
background: #e74c3c;
}
.record-type.bred {
background: #9b59b6;
}
.record-type.confirmed {
background: #27ae60;
}
.record-type.lambed {
background: #3498db;
}
.record-type.open {
background: #95a5a6;
}
.record-sheep {
font-weight: 600;
}
.record-date {
color: var(--text-light);
font-size: 0.85rem;
}
.record-description {
color: var(--text-light);
font-size: 0.9rem;
}
.record-amount {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary);
}
.record-amount span {
font-size: 0.9rem;
font-weight: 400;
}
.record-actions {
display: flex;
gap: 8px;
margin-left: 15px;
}
/* Family Tree */
#family-tree-container {
background: var(--surface);
border-radius: 12px;
padding: 30px;
min-height: 400px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.family-tree {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
.tree-generation {
display: flex;
gap: 40px;
justify-content: center;
flex-wrap: wrap;
}
.tree-node {
background: var(--background);
border: 2px solid var(--primary);
border-radius: 10px;
padding: 15px 20px;
text-align: center;
min-width: 150px;
}
.tree-node.current {
background: var(--primary);
color: white;
}
.tree-node.unknown {
border-style: dashed;
color: var(--text-light);
}
.tree-node.unknown.addable {
border-color: var(--primary);
color: var(--primary);
background: #e8f5e9;
transition: all 0.2s ease;
}
.tree-node.unknown.addable:hover {
background: var(--primary);
color: white;
transform: scale(1.05);
}
.tree-node.unknown.addable .tree-node-tag {
font-size: 1.2rem;
}
.tree-node.external {
border-color: var(--secondary);
background: #fff8e1;
color: var(--text);
}
.tree-node-external-badge {
font-size: 0.7rem;
background: var(--secondary);
color: white;
padding: 2px 6px;
border-radius: 4px;
margin-top: 5px;
display: inline-block;
}
.tree-node-tag {
font-weight: 700;
margin-bottom: 4px;
}
.tree-node-name {
font-size: 0.9rem;
}
.tree-label {
color: var(--text-light);
font-size: 0.85rem;
margin-bottom: 10px;
}
.tree-generation.great-grandparents {
gap: 20px;
}
.ggp-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.ggp-group-label {
font-size: 0.7rem;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.ggp-pair {
display: flex;
gap: 8px;
}
.tree-node.compact {
min-width: 90px;
padding: 8px 10px;
font-size: 0.85rem;
}
.tree-node.compact .tree-node-tag {
font-size: 0.8rem;
}
.tree-node.compact .tree-node-name {
font-size: 0.75rem;
}
.tree-connector {
width: 2px;
height: 20px;
background: var(--primary-light);
}
.offspring-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
.offspring-section h4 {
margin-bottom: 15px;
color: var(--text-light);
}
/* Modal */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 1000;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal.active {
display: flex;
}
.modal-content {
background: var(--surface);
border-radius: var(--radius-xl);
width: 100%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--shadow-xl);
}
.modal-content.modal-small {
max-width: 380px;
}
.modal-content.modal-large {
max-width: 800px;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px;
border-bottom: 1px solid var(--border);
}
.modal-header h3 {
font-size: 1.2rem;
}
.close-btn {
background: none;
border: none;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
color: var(--text-light);
min-width: 44px;
min-height: 44px;
padding: 8px 12px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md, 8px);
-webkit-tap-highlight-color: rgba(0,0,0,0.05);
}
.close-btn:hover {
color: var(--text);
background: var(--surface-alt, rgba(0,0,0,0.04));
}
/* PDF Report Type Selection */
.report-type-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.report-type-option {
cursor: pointer;
}
.report-type-option input {
display: none;
}
.report-type-card {
border: 2px solid var(--border);
border-radius: 8px;
padding: 12px 15px;
transition: all 0.2s;
}
.report-type-card strong {
display: block;
margin-bottom: 4px;
}
.report-type-card p {
font-size: 0.85rem;
color: var(--text-light);
margin: 0;
}
.report-type-option input:checked + .report-type-card {
border-color: var(--primary);
background: var(--primary-light);
}
/* Photo Upload */
.photo-upload-section {
display: flex;
gap: 20px;
margin-bottom: 20px;
align-items: flex-start;
}
.photo-preview {
width: 150px;
height: 150px;
border: 2px dashed var(--border);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--background);
flex-shrink: 0;
}
.photo-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.photo-placeholder {
color: var(--text-light);
font-size: 0.9rem;
}
.photo-controls {
display: flex;
flex-direction: column;
gap: 10px;
}
.photo-adjust-controls {
margin-top: 10px;
padding: 10px;
background: var(--background);
border-radius: 8px;
width: 100%;
}
.photo-adjust-controls .adjust-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.photo-adjust-controls .adjust-row:last-child {
margin-bottom: 0;
}
.photo-adjust-controls label {
font-size: 0.85rem;
color: var(--text-light);
min-width: 70px;
}
.photo-adjust-controls input[type="range"] {
flex: 1;
height: 6px;
}
.photo-adjust-controls #photo-zoom-value {
font-size: 0.85rem;
color: var(--text);
min-width: 40px;
}
/* Sheep Attachments */
.sheep-attachments-list {
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px;
margin-bottom: 10px;
max-height: 200px;
overflow-y: auto;
}
.empty-attachments {
color: var(--text-light);
font-size: 0.9rem;
margin: 0;
text-align: center;
padding: 10px;
}
.sheep-attachment-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
background: var(--background);
border-radius: 6px;
margin-bottom: 8px;
}
.sheep-attachment-item:last-child {
margin-bottom: 0;
}
/* Generic attachments list (for health, production, etc.) */
.attachments-list {
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px;
margin-bottom: 10px;
max-height: 200px;
overflow-y: auto;
}
.attachment-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
background: var(--background);
border-radius: 6px;
margin-bottom: 8px;
}
.attachment-item:last-child {
margin-bottom: 0;
}
.attachment-buttons {
display: flex;
gap: 10px;
}
.attachment-info {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
}
.attachment-icon {
font-size: 1.2rem;
}
.attachment-name {
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.attachment-actions {
display: flex;
gap: 5px;
flex-shrink: 0;
}
/* Record attachments in list view */
.record-attachments {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.record-attachment-link {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
background: var(--background);
border-radius: 4px;
font-size: 0.85rem;
cursor: pointer;
transition: background 0.2s;
}
.record-attachment-link:hover {
background: var(--border);
}
.attachment-add-controls {
display: flex;
gap: 10px;
}
/* Detail view attachments */
.detail-attachments-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.detail-attachment-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: var(--background);
border-radius: 6px;
}
.detail-attachment-item .attachment-icon {
font-size: 1.2rem;
}
.detail-attachment-item .attachment-name {
flex: 1;
font-size: 0.9rem;
}
/* Disposition Fields */
.disposition-fields {
background: #fff8e1;
border: 1px solid #ffe082;
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
}
.disposition-fields h4 {
margin-bottom: 15px;
color: var(--secondary);
}
/* Forms */
form {
padding: 20px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 6px;
font-weight: 500;
color: var(--text);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-size: 0.95rem;
font-family: inherit;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1);
}
.form-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 20px;
}
/* Task Modal Specific */
.checkbox-group {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.checkbox-group label {
display: inline-flex;
align-items: center;
gap: 5px;
cursor: pointer;
}
.task-templates {
background: var(--background);
padding: 15px;
border-radius: 10px;
margin: 15px 0;
}
.task-templates p {
margin: 0 0 10px 0;
font-size: 0.9rem;
color: var(--text-light);
}
.task-templates button {
margin: 5px 5px 5px 0;
}
/* Parent Select with Add Button */
.parent-select-wrapper {
display: flex;
gap: 8px;
}
.parent-select-wrapper select {
flex: 1;
}
.parent-select-wrapper .btn {
flex-shrink: 0;
padding: 8px 12px;
}
/* External Ancestor Styles */
.external-ancestor-note {
background: #e3f2fd;
border: 1px solid #90caf9;
border-radius: 8px;
padding: 12px;
margin-bottom: 15px;
font-size: 0.9rem;
color: #1565c0;
}
.external-badge {
font-size: 0.75rem;
background: var(--secondary);
color: white;
padding: 2px 6px;
border-radius: 4px;
vertical-align: middle;
margin-left: 5px;
}
/* Sheep Detail */
.detail-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 20px;
border-bottom: 1px solid var(--border);
}
.detail-photo {
width: 200px;
height: 200px;
border-radius: 10px;
overflow: hidden;
background: var(--background);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.detail-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.detail-photo-placeholder {
font-size: 4rem;
color: var(--text-light);
}
.detail-info {
padding: 20px;
}
.detail-header-actions {
display: flex;
justify-content: flex-end;
margin-bottom: 15px;
}
.detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.detail-item {
background: var(--background);
padding: 15px;
border-radius: 8px;
}
.detail-label {
color: var(--text-light);
font-size: 0.85rem;
margin-bottom: 4px;
}
.detail-value {
font-weight: 600;
font-size: 1.1rem;
}
.detail-section {
margin-top: 25px;
}
.detail-section h4 {
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.detail-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.detail-section-header h4 {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.detail-section-link {
color: var(--primary);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
}
.detail-section-link:hover {
text-decoration: underline;
}
.detail-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
/* File Upload */
.file-upload-area {
border: 2px dashed var(--border);
border-radius: 10px;
padding: 30px 20px;
text-align: center;
cursor: pointer;
transition: all 0.2s;
background: var(--background);
}
.file-upload-area:hover,
.file-upload-area.drag-over {
border-color: var(--primary);
background: rgba(74, 124, 89, 0.05);
}
.file-upload-area.has-file {
border-style: solid;
border-color: var(--success);
background: rgba(92, 184, 92, 0.05);
}
.file-upload-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.file-upload-icon {
font-size: 2rem;
}
.file-upload-text {
font-weight: 500;
color: var(--text);
}
.file-upload-hint {
font-size: 0.85rem;
color: var(--text-light);
}
/* File Preview Modal */
.file-preview-content {
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
background: var(--background);
border-radius: 8px;
margin-bottom: 20px;
overflow: hidden;
}
.file-preview-image {
max-width: 100%;
max-height: 500px;
object-fit: contain;
}
.file-preview-pdf {
width: 100%;
height: 500px;
border: none;
}
.file-preview-generic {
text-align: center;
padding: 40px;
}
.file-preview-generic .file-preview-icon {
font-size: 4rem;
display: block;
margin-bottom: 15px;
}
.file-preview-hint {
color: var(--text-light);
font-size: 0.9rem;
}
/* Document File Indicator */
.document-file-indicator {
font-size: 0.8rem;
color: var(--text-light);
background: var(--background);
padding: 2px 8px;
border-radius: 10px;
}
/* Tabs in detail view */
.detail-tabs {
display: flex;
gap: 5px;
margin-bottom: 20px;
border-bottom: 1px solid var(--border);
padding-bottom: 10px;
}
.detail-tab {
padding: 8px 16px;
border: none;
background: none;
cursor: pointer;
font-size: 0.9rem;
color: var(--text-light);
border-radius: 6px;
}
.detail-tab:hover {
background: var(--background);
}
.detail-tab.active {
background: var(--primary);
color: white;
}
/* Individual Sheep Page */
.sheep-detail-page {
padding: 20px;
}
.sheep-detail-section {
display: none;
}
.sheep-detail-section.active {
display: block;
}
.sheep-detail-header {
display: flex;
gap: 25px;
margin-bottom: 30px;
}
.sheep-detail-photo {
width: 200px;
height: 200px;
border-radius: 12px;
overflow: hidden;
background: var(--background);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
}
.sheep-detail-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sheep-detail-info {
flex: 1;
}
.sheep-detail-info h3 {
margin: 0 0 10px 0;
font-size: 1.5rem;
}
.sheep-detail-meta {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 15px;
color: var(--text-light);
}
.sheep-detail-meta span {
display: flex;
align-items: center;
gap: 5px;
}
.sheep-detail-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 15px;
margin-top: 20px;
}
.sheep-detail-stat {
background: var(--background);
padding: 15px;
border-radius: 8px;
text-align: center;
}
.sheep-detail-stat-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary);
}
.sheep-detail-stat-label {
font-size: 0.85rem;
color: var(--text-light);
}
.sheep-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.sheep-section-header h3 {
margin: 0;
}
.sheep-records-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.sheep-record-card {
background: white;
border: 1px solid var(--border);
border-radius: 8px;
padding: 15px;
}
.sheep-record-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.sheep-record-date {
font-weight: 600;
}
.sheep-record-actions {
display: flex;
gap: 8px;
margin-top: 12px;
}
.sheep-lineage-section {
margin-top: 30px;
}
.sheep-lineage-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.sheep-lineage-card {
background: var(--background);
padding: 15px;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s;
}
.sheep-lineage-card:hover {
background: var(--border);
}
.sheep-lineage-label {
font-size: 0.8rem;
color: var(--text-light);
margin-bottom: 5px;
}
.sheep-chart-container {
margin-bottom: 30px;
max-width: 800px;
}
/* Responsive for Sheep Detail */
@media (max-width: 768px) {
.sheep-detail-header {
flex-direction: column;
align-items: center;
text-align: center;
}
.sheep-detail-meta {
justify-content: center;
}
#sheep-detail-tabs {
flex-wrap: wrap;
}
.sheep-section-header {
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.sheep-lineage-grid[style*="grid-template-columns: repeat(4"] {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* Batch Detail Page */
.batch-detail-page {
padding: 20px;
max-width: 900px;
}
.quick-log-form {
background: var(--primary-light);
border: 2px solid var(--primary);
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
}
.quick-log-form h4 {
margin: 0 0 12px 0;
color: var(--primary);
}
.quick-log-inputs {
display: flex;
gap: 10px;
}
.quick-log-inputs input[type="datetime-local"] {
width: 200px;
padding: 10px;
border: 1px solid var(--border);
border-radius: 6px;
}
.quick-log-inputs input[type="text"] {
flex: 1;
padding: 10px;
border: 1px solid var(--border);
border-radius: 6px;
}
.batch-overview {
background: white;
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
}
.batch-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 15px;
margin-top: 15px;
}
.batch-stat {
text-align: center;
padding: 12px;
background: var(--background);
border-radius: 8px;
}
.batch-stat-value {
font-size: 1.4rem;
font-weight: 700;
color: var(--primary);
}
.batch-stat-label {
font-size: 0.8rem;
color: var(--text-light);
}
.batch-section {
margin-bottom: 25px;
}
.batch-log-timeline {
display: flex;
flex-direction: column;
gap: 12px;
}
.log-entry {
display: flex;
gap: 15px;
padding: 15px;
background: white;
border: 1px solid var(--border);
border-radius: 8px;
position: relative;
}
.log-entry-time {
flex-shrink: 0;
width: 140px;
font-size: 0.85rem;
color: var(--text-light);
}
.log-entry-time .date {
font-weight: 600;
color: var(--text);
}
.log-entry-note {
flex: 1;
}
.log-entry-actions {
position: absolute;
top: 10px;
right: 10px;
opacity: 0;
transition: opacity 0.2s;
display: flex;
gap: 4px;
}
.log-entry:hover .log-entry-actions {
opacity: 1;
}
.log-entry-actions .btn-small {
padding: 4px 8px;
min-width: 28px;
}
.empty-log {
text-align: center;
padding: 40px;
color: var(--text-light);
}
.log-milestone {
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
border-color: var(--success);
border-left: 4px solid var(--success);
}
.log-milestone .log-entry-note {
font-weight: 600;
color: var(--success);
}
.milestone-icon {
margin-right: 4px;
}
/* Breeding Timeline Compact View */
.breeding-timeline {
display: flex;
flex-direction: column;
gap: 8px;
}
.log-entry-compact {
display: flex;
gap: 12px;
padding: 8px 12px;
background: #f9fafb;
border-left: 3px solid var(--primary);
border-radius: 4px;
font-size: 0.9rem;
}
.log-entry-compact .log-time {
flex-shrink: 0;
min-width: 140px;
color: var(--text-light);
font-size: 0.85rem;
}
.log-entry-compact .log-note {
flex: 1;
color: var(--text);
}
/* Batch Detail Responsive */
@media (max-width: 768px) {
.quick-log-inputs {
flex-direction: column;
}
.quick-log-inputs input[type="datetime-local"] {
width: 100%;
}
.log-entry {
flex-direction: column;
gap: 8px;
}
.log-entry-time {
width: auto;
}
.log-entry-actions {
opacity: 1;
position: static;
margin-top: 8px;
}
}
/* Empty State */
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--text-light);
}
.empty-state-icon {
font-size: 4rem;
margin-bottom: 15px;
}
.empty-state h3 {
margin-bottom: 10px;
color: var(--text);
}
/* Due date highlights */
.due-soon {
background: #fff3e0 !important;
border-left: 4px solid var(--warning);
}
.overdue {
background: #ffebee !important;
border-left: 4px solid var(--danger);
}
/* Weight change indicators */
.weight-change {
font-size: 0.85rem;
margin-left: 8px;
}
.weight-change.positive {
color: var(--success);
}
.weight-change.negative {
color: var(--danger);
}
/* Health Alerts */
.health-alerts {
/* Polish: neutralized container colors. The amber bg+border was the
most plausible culprit of the "warm edge tint at page edges" — a
perceptual bleed against neighbouring neutrals. After Fix 3 each
alert row carries its own severity swatch (red/amber/blue), so
the container itself can use Wave 1 tokens. Per-row stripes still
communicate urgency. */
background: var(--linen-100);
border: 1px solid var(--stone-200);
border-radius: 16px;
padding: 20px 24px;
margin-bottom: 24px;
}
.alerts-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
/* Dashboard Tasks Widget */
.dashboard-tasks {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 20px 24px;
margin-bottom: 24px;
box-shadow: var(--shadow-sm);
}
.tasks-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.tasks-header h3 {
margin: 0;
font-size: 1.1rem;
color: var(--text);
}
.tasks-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.task-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 15px;
background: var(--background);
border-radius: 10px;
transition: transform 0.2s, box-shadow 0.2s;
}
.task-item.high-priority {
border-left: 4px solid var(--danger);
}
.task-item.normal-priority {
border-left: 4px solid var(--primary);
}
.task-item.low-priority {
border-left: 4px solid var(--text-light);
}
.task-item.completed {
opacity: 0.6;
}
.task-checkbox {
width: 20px;
height: 20px;
cursor: pointer;
}
.task-content {
flex: 1;
}
.task-title {
font-weight: 600;
color: var(--text);
font-size: 0.95rem;
}
.task-item.completed .task-title {
text-decoration: line-through;
}
.task-meta {
display: flex;
gap: 12px;
font-size: 0.85rem;
color: var(--text-light);
margin-top: 3px;
}
.task-meta-item {
display: flex;
align-items: center;
gap: 4px;
}
.task-actions {
display: flex;
gap: 8px;
}
.task-action-btn {
background: none;
border: none;
padding: 4px 8px;
cursor: pointer;
font-size: 0.9rem;
color: var(--text-light);
border-radius: 4px;
transition: background 0.2s;
}
.task-action-btn:hover {
background: var(--border);
color: var(--text);
}
.alerts-header h3 {
margin: 0;
font-size: 1.1rem;
color: #e65100;
}
.alerts-content {
display: flex;
flex-direction: column;
gap: 10px;
}
.alert-item {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
background: white;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s;
font-size: 0.88rem;
min-height: 0;
}
.alert-item:hover {
background: #fafafa;
}
.alert-item.overdue { border-left: 3px solid #d32f2f; }
.alert-item.urgent { border-left: 3px solid #f57c00; }
.alert-item.upcoming{ border-left: 3px solid #fbc02d; }
.alert-icon {
font-size: 1rem;
flex-shrink: 0;
}
.alert-content {
flex: 1;
display: flex;
align-items: baseline;
gap: 6px;
overflow: hidden;
min-width: 0;
}
.alert-sheep {
font-weight: 600;
color: var(--text);
white-space: nowrap;
flex-shrink: 0;
}
.alert-message {
color: var(--text-light);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.alert-detail { display: none; }
.alert-date {
font-size: 0.8rem;
color: var(--text-light);
white-space: nowrap;
flex-shrink: 0;
}
.alert-dismiss {
background: none;
border: none;
color: var(--text-light);
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 2px 4px;
border-radius: 3px;
flex-shrink: 0;
opacity: 0.5;
transition: opacity 0.15s;
}
.alert-item:hover .alert-dismiss { opacity: 1; }
.alerts-more {
text-align: center;
padding: 10px;
color: var(--text-light);
font-size: 0.9rem;
}
/* Dashboard */
.dashboard-controls {
display: flex;
gap: 15px;
}
.dashboard-controls select {
padding: 8px 15px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 0.9rem;
}
.dashboard-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 25px;
}
.summary-card {
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-xl);
padding: 24px;
display: flex;
align-items: center;
gap: 15px;
box-shadow: var(--shadow-md);
}
.summary-card.clickable-card {
cursor: pointer;
transition: all 0.2s ease;
}
.summary-card.clickable-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
background: var(--primary-light);
}
/* Wave 1c — removed accent border that singled out the Net Income card.
The card's value already changes color (success/danger) to convey meaning;
the extra border made it look inconsistent with its 3 neighbors. */
.summary-card.income { /* intentionally empty */ }
.summary-icon {
font-size: 2.5rem;
}
.summary-content {
flex: 1;
}
.summary-value {
font-size: 1.8rem;
font-weight: 700;
color: var(--primary);
}
.summary-label {
color: var(--text-light);
font-size: 0.9rem;
}
/* Chart Selector */
.chart-selector {
display: flex;
gap: 8px;
margin-bottom: 20px;
flex-wrap: wrap;
background: var(--surface);
padding: 10px;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.chart-tab {
padding: 10px 20px;
border: none;
background: var(--background);
color: var(--text);
border-radius: 8px;
cursor: pointer;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.2s;
}
.chart-tab:hover {
background: var(--primary-light);
color: white;
}
.chart-tab.active {
background: var(--primary);
color: white;
}
/* Charts Container */
.charts-container {
margin-bottom: 30px;
}
.chart-section {
display: none;
}
.chart-section.active {
display: block;
}
.chart-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.chart-card {
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-xl);
padding: 24px;
box-shadow: var(--shadow-sm);
}
.chart-card h4 {
margin-bottom: 15px;
color: var(--text);
font-size: 1rem;
}
.chart-card.small {
display: flex;
flex-direction: column;
}
.chart-card canvas {
max-height: 300px;
}
.chart-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.chart-card-header h4 {
margin-bottom: 0;
}
.chart-toggle {
display: flex;
gap: 4px;
background: var(--background);
padding: 4px;
border-radius: 8px;
}
.chart-toggle-btn {
padding: 6px 12px;
border: none;
background: transparent;
color: var(--text-light);
font-size: 0.8rem;
font-weight: 500;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
}
.chart-toggle-btn:hover {
color: var(--text);
}
.chart-toggle-btn.active {
background: var(--primary);
color: white;
}
/* Chart Stats */
.chart-stats {
display: flex;
flex-direction: row;
gap: 12px;
flex: 1;
justify-content: center;
flex-wrap: wrap;
}
.chart-stat {
text-align: center;
padding: 12px 16px;
background: var(--background);
border-radius: 8px;
flex: 1;
min-width: 80px;
}
.chart-stat-value {
display: block;
font-size: 1.8rem;
font-weight: 700;
color: var(--primary);
}
.chart-stat-label {
color: var(--text-light);
font-size: 0.85rem;
}
/* Milk View Charts */
.milk-view-charts {
margin: 30px 0;
scroll-margin-top: 80px; /* Account for header when scrolling */
}
.milk-view-charts h3 {
margin-bottom: 20px;
color: var(--text);
}
/* Production batch cards */
.batch-info {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.batch-stat {
text-align: center;
}
.batch-stat-value {
font-size: 1.2rem;
font-weight: 600;
color: var(--primary);
}
.batch-stat-label {
font-size: 0.8rem;
color: var(--text-light);
}
/* Status colors for production */
.record-type.in-progress {
background: #3498db;
}
.record-type.aging {
background: #9b59b6;
}
.record-type.ready {
background: #27ae60;
}
.record-type.sold {
background: #2ecc71;
}
.record-type.consumed {
background: #95a5a6;
}
.record-type.failed {
background: #e74c3c;
}
/* Feed type colors */
.record-type.hay {
background: #d4a574;
}
.record-type.grain {
background: #c9a227;
}
.record-type.mineral {
background: #7f8c8d;
}
.record-type.supplement {
background: #16a085;
}
.record-type.pasture {
background: #27ae60;
}
.record-type.silage {
background: #8e6b3d;
}
/* Financials Page Charts */
.financials-charts {
margin-bottom: 25px;
}
.financials-charts .chart-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 1024px) {
.financials-charts .chart-row {
grid-template-columns: 1fr;
}
}
/* Pasture Management */
.pasture-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.pasture-card {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-left: 4px solid var(--border);
}
.pasture-card.grazing {
border-left-color: var(--success);
}
.pasture-card.resting {
border-left-color: var(--warning);
}
.pasture-card.maintenance {
border-left-color: var(--danger);
}
.pasture-card.available {
border-left-color: var(--primary);
}
.pasture-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.pasture-card-header h4 {
margin: 0;
font-size: 1.1rem;
}
.pasture-status {
padding: 4px 10px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.pasture-status.grazing {
background: rgba(34, 197, 94, 0.15);
color: #16a34a;
}
.pasture-status.resting {
background: rgba(234, 179, 8, 0.15);
color: #ca8a04;
}
.pasture-status.maintenance {
background: rgba(239, 68, 68, 0.15);
color: #dc2626;
}
.pasture-status.available {
background: rgba(99, 102, 241, 0.15);
color: #4f46e5;
}
.pasture-card-body {
margin-bottom: 15px;
}
.pasture-card-body p {
margin: 5px 0;
font-size: 0.9rem;
color: var(--text);
}
/* Pasture Map View */
#pasture-map-container {
margin-bottom: 30px;
}
.map-toolbar {
display: flex;
gap: 10px;
margin-bottom: 15px;
flex-wrap: wrap;
align-items: center;
}
.map-canvas-wrapper {
position: relative;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 15px;
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
border: 2px solid transparent;
}
#pasture-map-canvas {
max-width: 100%;
max-height: 80vh;
cursor: crosshair;
display: block;
}
.map-instructions {
position: absolute;
bottom: 20px;
left: 20px;
text-align: left;
color: #1a1a1a;
padding: 12px 18px;
max-width: 400px;
background: rgba(255, 255, 255, 0.98);
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
font-weight: 600;
font-size: 14px;
z-index: 10;
border: 2px solid rgba(0, 0, 0, 0.1);
}
.pasture-info-panel {
position: absolute;
top: 20px;
right: 20px;
width: 320px;
background: white;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
z-index: 20;
overflow: hidden;
}
.pasture-info-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: var(--primary);
color: white;
}
.pasture-info-header h4 {
margin: 0;
font-size: 1.1rem;
}
.pasture-info-header .close-btn {
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
padding: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: background 0.2s;
}
.pasture-info-header .close-btn:hover {
background: rgba(255, 255, 255, 0.2);
}
.pasture-info-content {
padding: 20px;
max-height: 300px;
overflow-y: auto;
}
.pasture-info-content p {
margin: 8px 0;
color: var(--text);
}
.pasture-info-content strong {
color: var(--text);
font-weight: 600;
}
.pasture-info-content ul {
margin: 10px 0;
padding-left: 20px;
}
.pasture-info-content li {
margin: 5px 0;
color: var(--text-light);
}
.pasture-info-actions {
display: flex;
gap: 10px;
padding: 15px 20px;
background: var(--background);
border-top: 1px solid var(--border);
}
.pasture-card-actions {
display: flex;
gap: 8px;
}
.section-header {
margin: 20px 0 15px;
}
.section-header h3 {
margin: 0;
color: var(--text);
}
.header-buttons {
display: flex;
gap: 10px;
}
/* Activity type colors */
.record-type.grazing-start,
.record-type.grazing-end,
.record-type.grazing {
background: #22c55e;
}
.grazing-days {
font-size: 12px;
font-weight: 600;
color: var(--primary);
background: rgba(22, 45, 74, 0.08);
padding: 2px 8px;
border-radius: 10px;
}
.grazing-in-progress {
font-size: 11px;
font-weight: 600;
color: #22c55e;
background: rgba(34, 197, 94, 0.1);
padding: 2px 8px;
border-radius: 10px;
}
.record-type.resting {
background: #eab308;
}
.record-type.amendment {
background: #8b5cf6;
}
.record-type.seeding {
background: #10b981;
}
.record-type.mowing {
background: #06b6d4;
}
.record-type.fencing {
background: #f97316;
}
.record-type.inspection {
background: #6366f1;
}
/* Document Records */
.document-record {
border-left: 4px solid var(--border);
}
.document-record.current {
border-left-color: var(--success);
}
.document-record.expiring {
border-left-color: var(--warning);
}
.document-record.expired {
border-left-color: var(--danger);
}
.document-record.pending {
border-left-color: var(--primary);
}
.record-title {
font-weight: 600;
font-size: 1rem;
margin: 5px 0;
}
.document-status {
padding: 3px 8px;
border-radius: 10px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
}
.document-status.current {
background: rgba(34, 197, 94, 0.15);
color: #16a34a;
}
.document-status.expiring {
background: rgba(234, 179, 8, 0.15);
color: #ca8a04;
}
.document-status.expired {
background: rgba(239, 68, 68, 0.15);
color: #dc2626;
}
.document-status.pending {
background: rgba(99, 102, 241, 0.15);
color: #4f46e5;
}
.record-type.document-type {
background: #64748b;
}
.record-meta {
display: flex;
align-items: center;
gap: 10px;
}
/* Knowledge Base */
.knowledge-tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
border-bottom: 2px solid var(--border);
padding-bottom: 10px;
}
.knowledge-tab {
padding: 10px 20px;
border: none;
background: transparent;
cursor: pointer;
font-size: 0.95rem;
color: var(--text-light);
border-radius: 8px 8px 0 0;
transition: all 0.2s;
}
.knowledge-tab:hover {
background: var(--background);
color: var(--text);
}
.knowledge-tab.active {
background: var(--primary);
color: white;
}
.knowledge-section {
display: none;
}
.knowledge-section.active {
display: block;
}
/* Notes Grid */
.notes-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.note-card {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.note-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.note-category {
background: var(--primary);
color: white;
padding: 3px 10px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
}
.note-date {
color: var(--text-light);
font-size: 0.8rem;
}
.note-title {
margin: 0 0 10px 0;
font-size: 1.1rem;
}
.note-preview {
color: var(--text-light);
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 10px;
}
.note-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 15px;
}
.tag {
background: var(--background);
color: var(--text);
padding: 2px 8px;
border-radius: 10px;
font-size: 0.75rem;
}
.note-card-actions {
display: flex;
gap: 8px;
}
/* References Grid */
.references-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.reference-card {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-left: 4px solid var(--primary);
overflow: hidden;
}
/* Knowledge Base Thumbnails */
.reference-thumbnail {
margin: -20px -20px 14px -16px;
height: 140px;
overflow: hidden;
cursor: pointer;
background: var(--background);
}
.reference-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.2s;
}
.reference-thumbnail:hover img {
transform: scale(1.03);
}
.reference-thumbnail.pdf-thumb {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
background: #fef2f2;
}
.pdf-icon {
font-size: 1.1rem;
font-weight: 700;
color: #dc2626;
background: white;
padding: 4px 10px;
border-radius: 4px;
border: 1px solid #fca5a5;
}
.pdf-filename {
font-size: 0.7rem;
color: var(--text-light);
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.plan-thumbnails {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.plan-thumb {
width: 56px;
height: 56px;
border-radius: var(--radius-md);
overflow: hidden;
cursor: pointer;
border: 1px solid var(--border-light);
}
.plan-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.plan-thumb.pdf-thumb {
display: flex;
align-items: center;
justify-content: center;
background: #fef2f2;
}
.plan-thumb .pdf-icon {
font-size: 0.7rem;
padding: 2px 6px;
}
.plan-thumb.more-thumb {
display: flex;
align-items: center;
justify-content: center;
background: var(--background);
color: var(--text-light);
font-size: 0.8rem;
font-weight: 600;
}
.detail-attachment-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--border-light);
}
.detail-att-thumb {
width: 48px;
height: 48px;
border-radius: var(--radius-sm);
object-fit: cover;
cursor: pointer;
flex-shrink: 0;
border: 1px solid var(--border-light);
}
.detail-att-thumb.pdf-thumb {
display: flex;
align-items: center;
justify-content: center;
background: #fef2f2;
width: 48px;
height: 48px;
border-radius: var(--radius-sm);
cursor: pointer;
flex-shrink: 0;
border: 1px solid var(--border-light);
}
.detail-att-info {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
}
.reference-card-header {
margin-bottom: 10px;
}
.reference-category {
font-size: 0.8rem;
color: var(--primary);
font-weight: 600;
text-transform: uppercase;
}
.reference-title {
margin: 0 0 8px 0;
font-size: 1.1rem;
}
.reference-source {
font-size: 0.85rem;
color: var(--text-light);
margin: 0 0 8px 0;
}
.reference-description {
font-size: 0.9rem;
color: var(--text);
margin: 0 0 15px 0;
line-height: 1.5;
}
.reference-card-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* Plans Grid */
.plans-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.plan-card {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-left: 4px solid var(--border);
}
.plan-card.active {
border-left-color: var(--success);
}
.plan-card.draft {
border-left-color: var(--secondary);
}
.plan-card.completed {
border-left-color: var(--primary);
}
.plan-card.archived {
border-left-color: var(--text-light);
opacity: 0.8;
}
.plan-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.plan-category {
font-size: 0.8rem;
color: var(--text-light);
font-weight: 600;
text-transform: uppercase;
}
.plan-status-badge {
font-size: 0.75rem;
padding: 3px 8px;
border-radius: 4px;
font-weight: 600;
}
.plan-status-badge.active {
background: #e8f5e9;
color: var(--success);
}
.plan-status-badge.draft {
background: #fff8e1;
color: var(--secondary);
}
.plan-status-badge.completed {
background: #e3f2fd;
color: var(--primary);
}
.plan-status-badge.archived {
background: #f5f5f5;
color: var(--text-light);
}
.plan-title {
margin: 0 0 8px 0;
font-size: 1.1rem;
}
.plan-target-date {
font-size: 0.85rem;
color: var(--text-light);
margin: 0 0 8px 0;
}
.plan-description {
font-size: 0.9rem;
color: var(--text);
margin: 0 0 10px 0;
line-height: 1.5;
}
.plan-attachments-count {
font-size: 0.85rem;
color: var(--text-light);
margin: 0 0 15px 0;
}
.plan-card-actions {
display: flex;
gap: 8px;
}
/* File Attachment Area */
.file-attachment-area {
border: 2px dashed var(--border);
border-radius: 8px;
padding: 15px;
background: var(--background);
}
.file-preview-box {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
min-height: 30px;
}
.file-preview-box .file-icon {
font-size: 1.5rem;
}
.file-preview-box .file-name {
font-size: 0.9rem;
word-break: break-all;
}
.file-preview-box .file-placeholder {
color: var(--text-light);
font-size: 0.9rem;
}
.file-buttons {
display: flex;
gap: 10px;
}
.plan-attachments-list {
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px;
margin-bottom: 10px;
max-height: 150px;
overflow-y: auto;
}
/* Vendors Grid */
.vendors-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.vendor-card {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-left: 4px solid var(--border);
}
.vendor-card.preferred {
border-left-color: var(--success);
}
.vendor-card.inactive {
opacity: 0.7;
border-left-color: var(--text-light);
}
.vendor-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.vendor-category {
background: #64748b;
color: white;
padding: 3px 10px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
}
.vendor-badge {
padding: 3px 8px;
border-radius: 10px;
font-size: 0.7rem;
font-weight: 600;
}
.vendor-badge.preferred {
background: rgba(34, 197, 94, 0.15);
color: #16a34a;
}
.vendor-badge.inactive {
background: rgba(100, 116, 139, 0.15);
color: #64748b;
}
.vendor-name {
margin: 0 0 5px 0;
font-size: 1.1rem;
}
.vendor-rating {
color: #eab308;
font-size: 0.9rem;
margin-bottom: 10px;
}
.vendor-info {
margin-bottom: 10px;
}
.vendor-info p {
margin: 3px 0;
font-size: 0.85rem;
color: var(--text);
}
.vendor-notes {
font-size: 0.85rem;
color: var(--text-light);
margin-bottom: 15px;
}
.vendor-card-actions {
display: flex;
gap: 8px;
}
/* Weather Log */
/* Farm Location Search */
.location-search-row {
display: flex;
gap: 6px;
margin-bottom: 8px;
}
.location-search-row input {
flex: 1;
}
.location-search-row .btn {
flex-shrink: 0;
width: auto;
padding: 8px 12px;
}
.geocode-results {
border: 1px solid var(--border);
border-radius: var(--radius-md);
max-height: 200px;
overflow-y: auto;
margin-bottom: 8px;
}
.geocode-result-item {
padding: 10px 12px;
cursor: pointer;
font-size: 0.85rem;
border-bottom: 1px solid var(--border-light);
}
.geocode-result-item:last-child {
border-bottom: none;
}
.geocode-result-item:hover {
background: var(--background);
}
.farm-location-display {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: var(--primary-light);
border-radius: var(--radius-md);
font-size: 0.9rem;
flex-wrap: wrap;
}
.farm-location-display span {
flex: 1;
min-width: 0;
word-break: break-word;
}
.farm-location-display small {
color: var(--text-light);
font-size: 0.8rem;
flex-basis: 100%;
}
.farm-location-display .btn {
flex-shrink: 0;
width: auto;
padding: 4px 10px;
font-size: 0.8rem;
}
.weather-record {
border-left: 4px solid var(--border);
}
.weather-record.low {
border-left-color: #22c55e;
}
.weather-record.medium {
border-left-color: #eab308;
}
.weather-record.high {
border-left-color: #f97316;
}
.weather-record.severe {
border-left-color: #ef4444;
}
.weather-severity {
padding: 3px 8px;
border-radius: 10px;
font-size: 0.7rem;
font-weight: 600;
}
.weather-severity.low {
background: rgba(34, 197, 94, 0.15);
color: #16a34a;
}
.weather-severity.medium {
background: rgba(234, 179, 8, 0.15);
color: #ca8a04;
}
.weather-severity.high {
background: rgba(249, 115, 22, 0.15);
color: #ea580c;
}
.weather-severity.severe {
background: rgba(239, 68, 68, 0.15);
color: #dc2626;
}
.weather-type.heat { background: #ef4444; }
.weather-type.cold { background: #0ea5e9; }
.weather-type.storm { background: #6366f1; }
.weather-type.rain { background: #3b82f6; }
.weather-type.snow { background: #06b6d4; }
.weather-type.drought { background: #f97316; }
.weather-type.flood { background: #8b5cf6; }
.weather-type.wind { background: #64748b; }
.weather-type.seasonal { background: #22c55e; }
.weather-temp {
font-size: 1.2rem;
font-weight: 600;
color: var(--text);
margin: 5px 0;
}
/* ==========================================
NWS Weather View
========================================== */
.weather-setup-prompt {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px 20px;
color: var(--text-light);
}
.weather-setup-prompt .setup-icon {
font-size: 3rem;
margin-bottom: 12px;
}
.weather-setup-prompt h3 {
margin: 0 0 8px;
color: var(--text);
}
.weather-setup-prompt p {
margin: 0 0 20px;
}
.weather-overview {
display: grid;
grid-template-columns: 280px 1fr;
gap: 20px;
margin-bottom: 20px;
min-width: 0;
}
#weather-view {
overflow: hidden;
max-width: 900px;
}
/* Current Conditions Card */
.weather-current-card {
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 20px;
box-shadow: var(--shadow-sm);
}
.weather-current-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.weather-location {
font-weight: 600;
font-size: 1rem;
color: var(--text);
}
.weather-updated {
font-size: 0.8rem;
color: var(--text-light);
}
.weather-current-body {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.weather-icon-lg {
width: 64px;
height: 64px;
flex-shrink: 0;
}
.weather-temp-main {
display: flex;
flex-direction: column;
}
.weather-temp-value {
font-size: 2.5rem;
font-weight: 700;
line-height: 1;
color: var(--text);
}
.weather-desc {
font-size: 0.95rem;
color: var(--text-light);
margin-top: 4px;
}
.weather-current-details {
display: flex;
gap: 16px;
border-top: 1px solid var(--border-light);
padding-top: 12px;
}
.weather-detail {
display: flex;
flex-direction: column;
gap: 2px;
}
.weather-detail-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-light);
}
.weather-detail span:last-child {
font-weight: 600;
font-size: 0.9rem;
}
/* Forecast Grid */
.weather-forecast-section {
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 20px;
box-shadow: var(--shadow-sm);
min-width: 0;
overflow: hidden;
}
.weather-section-title {
font-size: 1rem;
font-weight: 600;
margin: 0 0 12px;
color: var(--text);
}
.weather-forecast-grid {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
}
.weather-forecast-card {
width: 95px;
min-width: 95px;
max-width: 95px;
flex-shrink: 0;
text-align: center;
padding: 12px 8px;
border-radius: var(--radius-md);
background: var(--background);
border: 1px solid var(--border-light);
}
.weather-forecast-card.nighttime {
background: #f1f0f5;
}
.forecast-period-name {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-light);
margin-bottom: 6px;
word-wrap: break-word;
}
.weather-icon-sm {
width: 40px;
height: 40px;
margin: 4px auto;
display: block;
}
.forecast-temp {
font-size: 1.1rem;
font-weight: 700;
margin: 4px 0;
}
.forecast-desc {
font-size: 0.7rem;
color: var(--text-light);
line-height: 1.3;
word-wrap: break-word;
overflow-wrap: break-word;
}
.forecast-precip {
font-size: 0.7rem;
color: #3b82f6;
margin-top: 4px;
}
/* Hourly Forecast */
.weather-hourly-scroll {
display: flex;
gap: 6px;
overflow-x: auto;
padding-bottom: 8px;
-webkit-overflow-scrolling: touch;
}
.weather-hourly-card {
width: 80px;
min-width: 80px;
max-width: 80px;
flex-shrink: 0;
text-align: center;
padding: 10px 6px;
border-radius: var(--radius-md);
background: var(--surface);
border: 1px solid var(--border-light);
}
.hourly-time {
font-size: 0.7rem;
font-weight: 600;
color: var(--text-light);
margin-bottom: 4px;
}
.weather-icon-xs {
width: 32px;
height: 32px;
margin: 2px auto;
display: block;
}
.hourly-temp {
font-size: 1rem;
font-weight: 700;
}
.hourly-desc {
font-size: 0.65rem;
color: var(--text-light);
line-height: 1.2;
word-wrap: break-word;
overflow-wrap: break-word;
}
.hourly-precip {
font-size: 0.65rem;
color: #3b82f6;
}
/* Weather Alerts */
.weather-alert {
background: #fef3c7;
border: 1px solid #f59e0b;
border-left: 4px solid #f59e0b;
border-radius: var(--radius-md);
margin-bottom: 12px;
overflow: hidden;
}
.weather-alert.severe,
.weather-alert.extreme {
background: #fee2e2;
border-color: #ef4444;
border-left-color: #ef4444;
}
.weather-alert.moderate {
background: #fef3c7;
border-color: #f59e0b;
border-left-color: #f59e0b;
}
.weather-alert.minor {
background: #e0f2fe;
border-color: #0ea5e9;
border-left-color: #0ea5e9;
}
.weather-alert-header {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
cursor: pointer;
flex-wrap: wrap;
}
.alert-severity-badge {
padding: 2px 8px;
border-radius: 10px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.alert-severity-badge.severe,
.alert-severity-badge.extreme {
background: #ef4444;
color: white;
}
.alert-severity-badge.moderate {
background: #f59e0b;
color: white;
}
.alert-severity-badge.minor {
background: #0ea5e9;
color: white;
}
.alert-event {
font-weight: 600;
font-size: 0.9rem;
}
.alert-expires {
font-size: 0.8rem;
color: var(--text-light);
margin-left: auto;
}
.alert-toggle {
font-size: 0.7rem;
transition: transform 0.2s;
}
.weather-alert.expanded .alert-toggle {
transform: rotate(180deg);
}
.weather-alert-body {
display: none;
padding: 0 16px 16px;
font-size: 0.85rem;
line-height: 1.5;
}
.weather-alert.expanded .weather-alert-body {
display: block;
}
/* Weather View Tabs */
.weather-view-tabs {
display: flex;
gap: 5px;
margin-bottom: 16px;
border-bottom: 1px solid var(--border);
padding-bottom: 8px;
}
.weather-view-tab {
padding: 8px 16px;
border: none;
background: none;
cursor: pointer;
font-size: 0.9rem;
color: var(--text-light);
border-radius: 6px;
}
.weather-view-tab:hover {
background: var(--background);
}
.weather-view-tab.active {
background: var(--primary);
color: white;
}
.weather-tab-section {
display: none;
min-width: 0;
overflow: hidden;
}
.weather-tab-section.active {
display: block;
}
/* Weather Loading & Error States */
.weather-loading {
text-align: center;
padding: 30px;
color: var(--text-light);
font-size: 0.9rem;
}
.weather-error {
text-align: center;
padding: 20px;
color: var(--danger);
font-size: 0.9rem;
}
/* Livestock Stress Indicators */
.stress-indicators {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 20px;
}
.stress-card {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: var(--radius-lg);
border-left: 4px solid var(--border);
background: var(--surface);
box-shadow: var(--shadow-sm);
}
.stress-card-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.stress-card-body {
min-width: 0;
}
.stress-card-title {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-light);
}
.stress-card-value {
font-size: 1.2rem;
font-weight: 700;
color: var(--text);
}
.stress-card-level {
font-size: 0.8rem;
font-weight: 600;
}
.lambing-risk-flag {
display: inline-block;
background: #7c3aed;
color: white;
font-size: 0.65rem;
padding: 1px 6px;
border-radius: 8px;
margin-left: 4px;
vertical-align: middle;
}
/* Stress Level Colors */
.stress-comfort {
border-left-color: #22c55e;
background: #ecfdf5;
}
.stress-comfort .stress-card-level { color: #16a34a; }
.stress-mild {
border-left-color: #eab308;
background: #fefce8;
}
.stress-mild .stress-card-level { color: #ca8a04; }
.stress-moderate {
border-left-color: #f97316;
background: #fff7ed;
}
.stress-moderate .stress-card-level { color: #ea580c; }
.stress-severe {
border-left-color: #ef4444;
background: #fef2f2;
}
.stress-severe .stress-card-level { color: #dc2626; }
.stress-emergency {
border-left-color: #dc2626;
background: #fdf2f8;
}
.stress-emergency .stress-card-level { color: #be123c; }
.stress-dormant {
border-left-color: #94a3b8;
background: #f8fafc;
}
.stress-dormant .stress-card-level { color: #64748b; }
.stress-surplus {
border-left-color: #3b82f6;
background: #eff6ff;
}
.stress-surplus .stress-card-level { color: #2563eb; }
/* Stress Card Clickable */
.stress-card-clickable {
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
}
.stress-card-clickable:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.stress-info-hint {
font-size: 0.65rem;
opacity: 0.5;
vertical-align: super;
}
/* Stress Reference Modal */
.stress-reference-body {
padding: 0 24px 24px;
}
.stress-ref-content {
display: flex;
flex-direction: column;
gap: 20px;
}
.stress-ref-image {
width: 100%;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
}
.stress-ref-description h4 {
margin: 0 0 10px;
font-size: 1rem;
color: var(--text);
}
.stress-ref-description p {
margin: 10px 0;
font-size: 0.85rem;
color: var(--text-light);
line-height: 1.5;
}
.stress-ref-thresholds {
display: flex;
flex-direction: column;
gap: 6px;
margin: 12px 0;
}
.stress-ref-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: var(--radius-md);
font-size: 0.85rem;
}
.stress-ref-dot {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
}
.stress-ref-row.stress-comfort { background: #ecfdf5; }
.stress-ref-row.stress-comfort .stress-ref-dot { background: #22c55e; }
.stress-ref-row.stress-mild { background: #fefce8; }
.stress-ref-row.stress-mild .stress-ref-dot { background: #eab308; }
.stress-ref-row.stress-moderate { background: #fff7ed; }
.stress-ref-row.stress-moderate .stress-ref-dot { background: #f97316; }
.stress-ref-row.stress-severe { background: #fef2f2; }
.stress-ref-row.stress-severe .stress-ref-dot { background: #ef4444; }
.stress-ref-row.stress-emergency { background: #fdf2f8; }
.stress-ref-row.stress-emergency .stress-ref-dot { background: #be123c; }
.stress-ref-note {
font-size: 0.8rem !important;
color: var(--text-light);
border-left: 3px solid var(--border);
padding-left: 10px;
margin: 12px 0 !important;
}
.stress-ref-source {
font-size: 0.7rem !important;
color: #94a3b8;
font-style: italic;
}
/* Cold Stress Reference Chart */
.cold-stress-chart h4 {
margin: 0 0 10px;
font-size: 1rem;
color: var(--text);
}
.cold-chart-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 10px;
}
.cold-chart-table {
width: 100%;
border-collapse: collapse;
font-size: 0.8rem;
text-align: center;
white-space: nowrap;
}
.cold-chart-table th {
background: var(--surface-alt, #f1f5f9);
padding: 6px 8px;
font-weight: 600;
border: 1px solid var(--border);
font-size: 0.75rem;
}
.cold-chart-table td {
padding: 5px 8px;
border: 1px solid var(--border);
font-weight: 500;
}
.wc-temp-label {
background: var(--surface-alt, #f1f5f9);
font-weight: 700 !important;
}
.wc-comfort { background: #ecfdf5; color: #166534; }
.wc-alert { background: #dbeafe; color: #1e40af; }
.wc-danger { background: #c7d2fe; color: #3730a3; }
.wc-extreme { background: #ede9fe; color: #6b21a8; }
.cold-chart-legend {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 16px;
font-size: 0.75rem;
}
.cold-legend-item {
display: flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: var(--radius-sm);
font-weight: 600;
}
.cold-comfort { background: #ecfdf5; color: #166534; }
.cold-alert { background: #dbeafe; color: #1e40af; }
.cold-danger { background: #c7d2fe; color: #3730a3; }
.cold-extreme { background: #ede9fe; color: #6b21a8; }
/* THI Table Colors */
.thi-comfort { background: #ecfdf5; color: #166534; }
.thi-mild { background: #fefce8; color: #854d0e; }
.thi-moderate { background: #fff7ed; color: #9a3412; }
.thi-severe { background: #fef2f2; color: #dc2626; }
.thi-emergency { background: #fdf2f8; color: #be123c; font-weight: 700; }
/* Cold LCT Table */
.cold-lct-table {
display: flex;
flex-direction: column;
gap: 2px;
margin: 10px 0;
}
.cold-lct-row {
display: flex;
justify-content: space-between;
padding: 6px 10px;
background: var(--surface-alt, #f8fafc);
border-radius: var(--radius-sm);
font-size: 0.85rem;
}
.cold-lct-row:first-child {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--text-light);
background: transparent;
}
.cold-lct-alert {
background: #fef2f2;
color: #dc2626;
}
/* Climate Summary Stats */
.climate-summary-stats {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
margin-bottom: 20px;
}
.climate-stat-card {
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 10px 12px;
text-align: center;
}
.climate-stat-value {
font-size: 1.4rem;
font-weight: 700;
color: var(--text);
}
.climate-stat-label {
font-size: 0.8rem;
color: var(--text-light);
margin-top: 2px;
}
.climate-stat-sub {
font-size: 0.75rem;
color: var(--text-light);
margin-top: 4px;
}
.climate-tag {
display: inline-block;
padding: 1px 6px;
border-radius: 8px;
font-size: 0.65rem;
font-weight: 600;
}
.stress-comfort .climate-tag { background: #dcfce7; color: #16a34a; }
.stress-moderate .climate-tag { background: #ffedd5; color: #ea580c; }
.stress-severe .climate-tag { background: #fee2e2; color: #dc2626; }
.stress-surplus .climate-tag { background: #dbeafe; color: #2563eb; }
/* Frost Info */
.climate-frost-info {
display: flex;
gap: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.frost-card {
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: 10px 16px;
display: flex;
gap: 8px;
align-items: center;
}
.frost-label {
font-size: 0.8rem;
color: var(--text-light);
}
.frost-value {
font-weight: 600;
font-size: 0.9rem;
}
/* Climate Charts Row */
.climate-charts-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
/* Weather View Responsive */
@media (max-width: 768px) {
.weather-overview {
grid-template-columns: 1fr;
}
.stress-indicators {
grid-template-columns: 1fr;
}
.climate-charts-row {
grid-template-columns: 1fr;
}
.climate-summary-stats {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
}
@media (max-width: 480px) {
.weather-current-card {
padding: 14px;
}
.weather-temp-value {
font-size: 2rem;
}
.weather-icon-lg {
width: 48px;
height: 48px;
}
.weather-forecast-card {
min-width: 85px;
padding: 8px 6px;
}
.weather-hourly-card {
min-width: 70px;
}
.weather-view-tabs {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
}
.weather-view-tab {
flex-shrink: 0;
min-height: 44px;
display: flex;
align-items: center;
}
.stress-indicators {
grid-template-columns: 1fr;
gap: 8px;
}
.stress-card {
padding: 10px 12px;
}
.stress-value {
font-size: 1.3rem;
}
.climate-summary-stats {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.climate-stat-card {
padding: 10px;
}
.climate-frost-info {
grid-template-columns: 1fr;
}
.chart-card {
padding: 12px;
}
.chart-card h4 {
font-size: 0.85rem;
}
}
/* Data Management */
.data-management {
padding: 10px 0;
}
.data-section {
padding: 20px;
margin-bottom: 15px;
background: var(--background);
border-radius: 8px;
}
.data-section h4 {
margin: 0 0 8px 0;
color: var(--text);
}
.data-section p {
color: var(--text-light);
font-size: 0.9rem;
margin-bottom: 15px;
}
.data-section.data-warning {
background: #fff5f5;
border: 1px solid #ffcdd2;
}
.data-section.data-warning h4 {
color: var(--danger);
}
.data-section.data-highlight {
background: linear-gradient(135deg, rgba(74, 124, 89, 0.08), rgba(107, 155, 122, 0.05));
border-left: 4px solid var(--primary);
}
.data-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.data-stats {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 8px;
}
.stat-row {
display: flex;
justify-content: space-between;
padding: 8px 12px;
background: white;
border-radius: 6px;
font-size: 0.9rem;
}
.stat-row span:first-child {
color: var(--text-light);
}
.stat-row span:last-child {
font-weight: 600;
color: var(--text);
}
/* Expense/Income colors */
.record-income {
border-left: 4px solid var(--success);
}
.record-expense {
border-left: 4px solid var(--danger);
}
.amount-positive {
color: var(--success);
}
.amount-negative {
color: var(--danger);
}
/* Responsive */
@media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr;
}
.stats-bar {
grid-template-columns: repeat(2, 1fr);
}
.record-item {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.record-actions {
margin-left: 0;
}
.detail-actions {
flex-wrap: wrap;
}
.photo-upload-section {
flex-direction: column;
align-items: center;
}
.sheep-grid {
grid-template-columns: 1fr;
}
.fab-add-transaction {
width: 56px;
height: 56px;
bottom: 20px;
right: 20px;
font-size: 1.3rem;
}
.ledger-table {
font-size: 0.8rem;
}
.ledger-actions .btn {
padding: 3px 6px;
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.sheep-grid {
grid-template-columns: 1fr;
}
}
/* Descendants View */
.descendants-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.descendants-header h3 {
margin: 0;
}
.descendants-summary {
background: var(--primary-light);
padding: 15px 20px;
border-radius: 10px;
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.descendants-summary strong {
font-size: 1.1rem;
color: var(--primary);
}
.descendants-summary span {
color: var(--text-light);
}
.generation-group {
margin-bottom: 25px;
}
.generation-group h4 {
margin: 0 0 12px 0;
padding-bottom: 8px;
border-bottom: 2px solid var(--border);
color: var(--text);
}
.descendants-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
}
.descendant-card {
background: white;
border: 1px solid var(--border);
border-radius: 10px;
padding: 15px;
cursor: pointer;
transition: all 0.2s;
}
.descendant-card:hover {
border-color: var(--primary);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.descendant-name {
font-weight: 600;
margin-bottom: 4px;
}
.descendant-tag {
color: var(--primary);
font-size: 0.9rem;
}
.descendant-info {
font-size: 0.85rem;
color: var(--text-light);
margin-top: 6px;
}
/* Attachment Preview Modal */
.attachment-preview-content {
max-width: 90vw;
max-height: 90vh;
width: 800px;
}
.attachment-preview-body {
max-height: 75vh;
overflow: auto;
display: flex;
justify-content: center;
align-items: center;
background: #f5f5f5;
padding: 20px;
min-height: 400px;
}
.attachment-preview-body img {
max-width: 100%;
max-height: 65vh;
object-fit: contain;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.attachment-preview-body iframe,
.attachment-preview-body embed {
width: 100%;
height: 65vh;
border: none;
border-radius: 4px;
}
.attachment-preview-body .unsupported-file {
text-align: center;
padding: 40px;
color: var(--text-light);
}
/* ====================================
CALENDAR STYLES
==================================== */
.calendar-view-controls {
display: flex;
gap: 15px;
align-items: center;
flex-wrap: wrap;
}
.calendar-nav {
display: flex;
gap: 10px;
align-items: center;
}
.calendar-period-label {
font-size: 1.1rem;
font-weight: 600;
color: var(--text);
min-width: 150px;
text-align: center;
}
.calendar-view-selector {
display: flex;
gap: 5px;
}
.calendar-view-btn.active {
background: var(--primary) !important;
color: white !important;
}
.calendar-legend {
display: flex;
gap: 20px;
padding: 15px;
background: var(--surface);
border-radius: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
color: var(--text);
}
.legend-color {
width: 16px;
height: 16px;
border-radius: 4px;
}
/* Month View */
.calendar-month-view {
background: var(--surface);
border-radius: 16px;
padding: 24px;
box-shadow: var(--shadow-md);
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px;
}
.calendar-day-header {
font-weight: 600;
color: var(--text);
padding: 10px;
text-align: center;
font-size: 0.9rem;
}
.calendar-day {
min-height: 100px;
background: var(--background);
border: 1px solid var(--border);
border-radius: 10px;
padding: 8px;
cursor: pointer;
transition: all 0.2s;
}
.calendar-day:hover {
background: var(--primary-light);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.calendar-day.other-month {
opacity: 0.4;
}
.calendar-day.today {
border: 2px solid var(--primary);
background: rgba(45, 139, 139, 0.1);
}
.calendar-day-number {
font-weight: 600;
color: var(--text);
margin-bottom: 5px;
font-size: 0.9rem;
}
.calendar-day.today .calendar-day-number {
color: var(--primary);
}
.calendar-events {
display: flex;
flex-direction: column;
gap: 3px;
}
.calendar-event {
font-size: 0.75rem;
padding: 3px 6px;
border-radius: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
transition: opacity 0.2s;
}
.calendar-event:hover {
opacity: 0.8;
}
.calendar-event.completed {
text-decoration: line-through;
opacity: 0.6;
}
.calendar-event.event-breeding {
background: var(--event-breeding);
color: white;
}
.calendar-event.event-health {
background: var(--event-health);
color: white;
}
.calendar-event.event-production {
background: var(--event-production);
color: white;
}
.calendar-event.event-task {
background: var(--event-task);
color: white;
}
.calendar-more {
font-size: 0.7rem;
color: var(--text-light);
margin-top: 3px;
font-style: italic;
}
/* Agenda View */
.calendar-agenda-view {
background: var(--surface);
border-radius: 16px;
padding: 24px;
box-shadow: var(--shadow-md);
}
.agenda-day-group {
margin-bottom: 24px;
}
.agenda-date-header {
font-weight: 600;
font-size: 1.1rem;
color: var(--text);
padding: 12px 0;
border-bottom: 2px solid var(--primary);
margin-bottom: 12px;
}
.agenda-date-header.today {
color: var(--primary);
}
.agenda-date-label {
font-size: 0.85rem;
color: var(--text-light);
margin-left: 10px;
}
.agenda-events {
display: flex;
flex-direction: column;
gap: 10px;
}
.agenda-event-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 15px;
background: var(--background);
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
border-left: 4px solid transparent;
}
.agenda-event-item:hover {
background: var(--primary-light);
transform: translateX(5px);
box-shadow: var(--shadow-sm);
}
.agenda-event-item.event-breeding {
border-left-color: var(--event-breeding);
}
.agenda-event-item.event-health {
border-left-color: var(--event-health);
}
.agenda-event-item.event-production {
border-left-color: var(--event-production);
}
.agenda-event-item.event-task {
border-left-color: var(--event-task);
}
.agenda-event-item.completed {
opacity: 0.6;
}
.agenda-event-time {
font-weight: 600;
color: var(--text);
min-width: 70px;
font-size: 0.9rem;
}
.agenda-event-content {
flex: 1;
}
.agenda-event-title {
font-weight: 600;
color: var(--text);
margin-bottom: 3px;
}
.agenda-event-item.completed .agenda-event-title {
text-decoration: line-through;
}
.agenda-event-type {
font-size: 0.85rem;
color: var(--text-light);
}
.agenda-event-icon {
font-size: 1.2rem;
}
.agenda-empty {
text-align: center;
padding: 40px;
color: var(--text-light);
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.calendar-view-controls {
flex-direction: column;
align-items: stretch;
}
.calendar-nav {
justify-content: space-between;
}
.calendar-day {
min-height: 80px;
padding: 5px;
}
.calendar-day-number {
font-size: 0.8rem;
}
.calendar-event {
font-size: 0.7rem;
padding: 2px 4px;
}
.calendar-grid {
gap: 5px;
}
.agenda-event-item {
flex-direction: column;
gap: 8px;
}
.agenda-event-time {
min-width: auto;
}
}
/* ====================================
COMPREHENSIVE MOBILE OPTIMIZATION
==================================== */
/* Tablet and Below (768px) - Enhanced */
@media (max-width: 768px) {
/* Sidebar becomes overlay on mobile */
.sidebar {
transform: translateX(-100%);
width: var(--sidebar-width);
box-shadow: none;
}
.sidebar.open {
transform: translateX(0);
box-shadow: var(--shadow-xl);
}
main {
margin-left: 0;
padding: 16px;
padding-top: calc(var(--mobile-topbar-height) + 16px);
}
.app-container.sidebar-collapsed main {
margin-left: 0;
}
.mobile-topbar {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--mobile-topbar-height);
background: var(--sidebar-bg);
color: white;
align-items: center;
padding: 0 16px;
z-index: 800;
gap: 12px;
}
.mobile-title {
flex: 1;
font-size: 1.1rem;
font-weight: 600;
}
.sidebar-toggle {
display: none;
}
/* View Headers */
.view-header {
flex-direction: column;
gap: 12px;
align-items: stretch;
}
.view-header h2 {
text-align: center;
font-size: 1.3rem;
}
/* Stats Bar */
.stats-bar {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.stat {
padding: 16px;
}
.stat-value {
font-size: 1.6rem;
}
.stat-label {
font-size: 0.85rem;
}
/* Dashboard */
.dashboard-summary {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.summary-card {
padding: 16px;
}
.summary-icon {
font-size: 2rem;
}
.summary-value {
font-size: 1.5rem;
}
/* Dashboard Tasks */
.dashboard-tasks {
padding: 16px;
}
.task-item {
padding: 10px 12px;
gap: 10px;
}
.task-meta {
flex-direction: column;
gap: 4px;
align-items: flex-start;
}
/* Charts */
.chart-row {
grid-template-columns: 1fr;
gap: 15px;
}
.chart-card {
padding: 16px;
}
.chart-card canvas {
max-height: 250px;
}
/* Milk View Charts */
.milk-view-charts {
margin: 20px 0;
}
/* Forms and Modals */
.modal-content {
max-width: 90vw;
margin: 20px;
}
.modal-header {
padding: 16px;
}
.form-row {
flex-direction: column;
}
.form-group {
width: 100%;
}
/* Task Templates */
.task-templates {
padding: 12px;
}
.task-templates button {
font-size: 0.8rem;
padding: 6px 10px;
}
/* Records Lists */
.record-item {
padding: 12px;
}
.record-actions {
flex-direction: column;
gap: 6px;
width: 100%;
}
.record-actions .btn {
width: 100%;
}
/* Search and Filters */
.search-filter {
flex-direction: column;
gap: 10px;
}
.search-filter select,
.search-filter input {
width: 100%;
}
/* Tables */
.ledger-table {
font-size: 0.85rem;
}
.ledger-table th,
.ledger-table td {
padding: 8px 6px;
}
/* Touch Targets - Minimum 44px */
.clickable-stat {
min-height: 80px;
}
.task-checkbox {
width: 24px;
height: 24px;
}
.task-action-btn {
padding: 8px 12px;
font-size: 1rem;
}
.btn-small {
min-height: 40px;
}
/* Close buttons */
.close-btn {
padding: 8px;
font-size: 1.8rem;
min-width: 44px;
min-height: 44px;
}
/* Form inputs - Prevent iOS zoom */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="month"],
select,
textarea {
min-height: 44px;
font-size: 16px;
}
}
/* Mobile Phones (600px and below) */
@media (max-width: 600px) {
/* Stats - Single Column */
.stats-bar {
grid-template-columns: 1fr;
}
/* Dashboard Summary - Single Column */
.dashboard-summary {
grid-template-columns: 1fr;
}
/* Buttons */
.btn {
width: 100%;
padding: 12px 16px;
}
.btn-small {
padding: 8px 12px;
font-size: 0.85rem;
}
/* View Header Buttons */
.view-header .btn {
width: 100%;
}
/* Calendar Controls */
.calendar-nav .btn {
padding: 8px 12px;
font-size: 0.85rem;
width: auto;
}
.calendar-view-selector {
width: 100%;
}
.calendar-view-selector .btn {
flex: 1;
}
/* Task Widget */
.tasks-header {
flex-direction: column;
gap: 10px;
align-items: stretch;
}
.tasks-header .btn {
width: 100%;
}
/* Modals - Full Screen */
.modal-content {
max-width: 100vw;
margin: 0;
border-radius: 0;
max-height: 100vh;
}
.modal-header h3 {
font-size: 1.1rem;
}
/* Form Actions */
.form-actions {
flex-direction: column;
gap: 8px;
}
.form-actions .btn {
width: 100%;
}
/* Checkbox Group - Stack */
.checkbox-group {
flex-direction: column;
gap: 8px;
}
/* Task Templates - Stack */
.task-templates button {
width: 100%;
margin: 4px 0;
}
/* Calendar Legend */
.calendar-legend {
flex-direction: column;
gap: 10px;
}
/* Milk View */
.milk-view-charts h3 {
font-size: 1.1rem;
}
/* Chart Stats */
.chart-stats {
gap: 12px;
}
}
/* Very Small Phones (480px and below) */
@media (max-width: 480px) {
main {
padding: 10px;
padding-top: calc(var(--mobile-topbar-height) + 10px);
}
/* View Headers */
.view-header h2 {
font-size: 1.1rem;
}
.view-header {
gap: 8px;
}
/* Stats */
.stat {
padding: 12px;
}
.stat-value {
font-size: 1.4rem;
}
/* Dashboard Cards */
.summary-card {
padding: 12px;
}
.summary-value {
font-size: 1.3rem;
}
/* Task Items */
.task-item {
padding: 8px 10px;
}
.task-title {
font-size: 0.9rem;
}
.task-meta {
font-size: 0.75rem;
}
/* Calendar */
.calendar-day {
min-height: 70px;
padding: 4px;
}
.calendar-day-number {
font-size: 0.75rem;
}
/* Agenda */
.agenda-event-item {
padding: 10px 12px;
}
.agenda-event-title {
font-size: 0.9rem;
}
/* Charts */
.chart-card canvas {
max-height: 200px;
}
/* Records */
.record-item {
padding: 10px;
font-size: 0.9rem;
}
.record-meta {
font-size: 0.8rem;
gap: 6px;
}
/* Sheep Detail Tabs - Scrollable */
.detail-tabs {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
gap: 4px;
padding-bottom: 8px;
}
.detail-tabs::-webkit-scrollbar {
display: none;
}
.detail-tab {
flex-shrink: 0;
padding: 8px 12px;
font-size: 0.82rem;
min-height: 44px;
display: flex;
align-items: center;
}
/* Ledger Table - Hide less critical columns, tighten spacing */
.ledger-table {
font-size: 0.8rem;
}
.ledger-table th,
.ledger-table td {
padding: 6px 4px;
}
.ledger-hide-mobile {
display: none;
}
}
/* Toast Notifications */
.toast {
position: fixed;
bottom: 24px;
right: 24px;
background: var(--success);
color: white;
padding: 16px 24px;
border-radius: 8px;
box-shadow: var(--shadow-lg);
font-weight: 500;
z-index: 10000;
animation: slideIn 0.3s ease-out, fadeOut 0.3s ease-in 2.7s;
pointer-events: none;
}
.toast.error {
background: var(--danger);
}
.toast.warning {
background: var(--warning);
}
.toast.info {
background: var(--info);
}
@keyframes slideIn {
from {
transform: translateX(400px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* Animals View Table */
#animals-table {
width: 100%;
table-layout: fixed;
}
#animals-table th:nth-child(1),
#animals-table td:nth-child(1) { width: 60px; } /* Photo */
#animals-table th:nth-child(2),
#animals-table td:nth-child(2) { width: 80px; } /* Tag */
#animals-table th:nth-child(4),
#animals-table td:nth-child(4) { width: 70px; } /* Type */
#animals-table th:nth-child(6),
#animals-table td:nth-child(6) { width: 80px; } /* Age */
#animals-table th:nth-child(7),
#animals-table td:nth-child(7) { width: 100px; } /* Status */
#animals-table th:nth-child(8),
#animals-table td:nth-child(8) { width: 80px; } /* Actions */
#animals-table th {
padding: 10px 12px;
background: var(--primary);
color: white;
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.03em;
border-bottom: 2px solid #1b5e20;
}
#animals-table th.sortable {
cursor: pointer;
user-select: none;
}
#animals-table th.sortable:hover {
background: #1b5e20;
}
.sort-arrow {
font-size: 0.7em;
margin-left: 4px;
opacity: 0.4;
}
#animals-table th.sortable.sorted .sort-arrow {
opacity: 1;
}
#animals-table td {
padding: 10px 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#animals-table tbody tr:nth-child(even) {
background: #f0ece6;
}
#animals-table tbody tr:hover {
background: #e8f5e9;
}
/* Name and Breed columns get remaining space */
#animals-table th:nth-child(3),
#animals-table td:nth-child(3),
#animals-table th:nth-child(5),
#animals-table td:nth-child(5) {
white-space: normal;
overflow: visible;
}
@media (max-width: 768px) {
#animals-table {
table-layout: auto;
min-width: 700px;
}
#animals-view {
overflow-x: auto;
}
}
/* Animals Card Layout for Mobile */
.animals-card-list {
display: none;
}
@media (max-width: 600px) {
#animals-table {
display: none;
}
.animals-card-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.animals-card-list .animal-card {
display: flex;
align-items: center;
gap: 12px;
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 12px;
cursor: pointer;
transition: box-shadow 0.2s;
}
.animals-card-list .animal-card:active {
box-shadow: var(--shadow-md);
}
.animals-card-list .animal-card-photo {
width: 56px;
height: 56px;
border-radius: var(--radius-md);
overflow: hidden;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--background);
font-size: 28px;
}
.animals-card-list .animal-card-photo img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.animals-card-list .animal-card-info {
flex: 1;
min-width: 0;
}
.animals-card-list .animal-card-name {
font-weight: 600;
font-size: 1rem;
color: var(--text);
display: flex;
align-items: center;
gap: 8px;
}
.animals-card-list .animal-card-name .sheep-status {
font-size: 0.75rem;
padding: 2px 8px;
}
.animals-card-list .animal-card-details {
font-size: 0.85rem;
color: var(--text-light);
margin-top: 2px;
}
.animals-card-list .animal-card-empty {
text-align: center;
padding: 40px;
color: var(--text-light);
}
.animals-card-list .animal-card.off-site {
border: 2px dashed #90a4ae;
opacity: 0.85;
}
}
.animal-photo-cell {
width: 48px;
height: 48px;
border-radius: var(--radius-sm);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: var(--background);
font-size: 24px;
}
.animal-photo-cell img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
/* Sidebar logo image */
.sidebar-logo img {
display: block;
}
/* Transaction Split */
.split-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
background: var(--background);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 12px;
}
.split-summary {
display: flex;
gap: 16px;
color: var(--text-light);
font-size: 0.9rem;
}
.split-total {
font-weight: 600;
font-size: 1rem;
}
.split-line {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 8px;
}
.split-line select {
flex: 2;
padding: 6px 8px;
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 0.9rem;
}
.split-line input[type="number"] {
flex: 1;
max-width: 120px;
padding: 6px 8px;
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 0.9rem;
}
.split-line input[type="text"] {
flex: 2;
padding: 6px 8px;
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 0.9rem;
}
.split-line .btn-remove {
padding: 4px 8px;
background: none;
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
color: var(--danger);
font-size: 1rem;
line-height: 1;
}
.split-line .btn-remove:hover {
background: var(--danger);
color: white;
}
.split-remaining {
text-align: right;
padding: 8px 0;
font-weight: 500;
font-size: 0.95rem;
}
.split-remaining.balanced {
color: var(--success);
}
.split-remaining.over {
color: var(--danger);
}
.split-remaining.under {
color: var(--warning, #e67e22);
}
/* ============================================
FINANCIALS TABS & BATCH ENTRY
============================================ */
.financials-tabs {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 0;
border-bottom: 2px solid var(--border);
}
.financials-tabs-left {
display: flex;
align-items: flex-end;
}
.financials-tabs-right {
display: flex;
align-items: center;
padding-bottom: 8px;
}
.financials-timeframe-select {
padding: 8px 12px;
border-radius: var(--radius);
border: 1px solid var(--border);
font-size: 0.9rem;
background: var(--background);
cursor: pointer;
}
.financials-tab {
padding: 10px 20px;
cursor: pointer;
font-size: 0.95rem;
color: var(--text-light);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
transition: background 0.2s, color 0.2s, border-color 0.2s;
background: var(--surface-alt);
border: 1px solid var(--border);
border-bottom: none;
margin-bottom: -2px;
position: relative;
}
.financials-tab:hover {
background: var(--border-light);
color: var(--text);
}
.financials-tab.active {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.financials-section {
display: none;
}
.financials-section.active {
display: block;
}
/* Batch Entry */
.batch-entry-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 10px;
}
.batch-entry-header h3 {
margin: 0;
}
.batch-entry-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.batch-entry-table-wrapper {
overflow-x: auto;
margin-bottom: 16px;
}
.batch-entry-table {
width: 100%;
border-collapse: collapse;
}
.batch-entry-table thead th {
background: var(--background);
padding: 10px 8px;
text-align: left;
font-weight: 600;
font-size: 0.85rem;
color: var(--text-light);
border-bottom: 2px solid var(--border);
position: sticky;
top: 0;
z-index: 1;
}
.batch-entry-table tbody tr {
border-bottom: 1px solid var(--border);
}
.batch-entry-table tbody tr:nth-child(even) {
background: var(--background);
}
.batch-entry-table td {
padding: 6px 4px;
}
.batch-entry-table input,
.batch-entry-table select {
width: 100%;
padding: 8px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 0.9rem;
box-sizing: border-box;
}
.batch-entry-table input:focus,
.batch-entry-table select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.15);
}
.batch-entry-table input[type="number"] {
text-align: right;
min-width: 90px;
}
.batch-entry-table input[type="date"] {
min-width: 130px;
}
.batch-entry-table select {
min-width: 140px;
}
.batch-entry-footer {
display: flex;
align-items: center;
gap: 20px;
padding: 12px 0;
border-top: 2px solid var(--border);
flex-wrap: wrap;
}
.batch-entry-footer span {
font-size: 0.95rem;
font-weight: 500;
}
#batch-total-amount {
color: var(--primary);
font-weight: 700;
}
.batch-entry-footer-actions {
margin-left: auto;
display: flex;
gap: 8px;
}
/* OCR Loading Overlay */
#financials-batch-entry-section,
#financials-scan-receipt-section {
position: relative;
}
.scan-receipt-container {
display: flex;
justify-content: center;
padding: 40px 20px;
}
.scan-receipt-prompt {
text-align: center;
max-width: 400px;
}
.scan-receipt-prompt h3 {
margin: 0 0 10px;
}
.scan-receipt-prompt p {
color: var(--text-light);
margin: 0 0 20px;
font-size: 0.95rem;
}
.scan-receipt-prompt .btn-large {
font-size: 1.1rem;
padding: 14px 32px;
}
.ocr-loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
border-radius: var(--radius);
}
.ocr-loading-content {
text-align: center;
}
.ocr-loading-content .spinner {
width: 40px;
height: 40px;
border: 4px solid var(--border);
border-top-color: var(--primary);
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin: 0 auto 12px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.ocr-loading-content p {
margin: 0;
color: var(--text-light);
font-size: 0.95rem;
}
@media (max-width: 600px) {
.batch-entry-header {
flex-direction: column;
align-items: flex-start;
}
.batch-entry-footer {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.batch-entry-footer-actions {
margin-left: 0;
width: 100%;
}
.batch-entry-footer-actions .btn {
flex: 1;
}
.financials-tabs {
gap: 6px;
}
.financials-tab {
padding: 8px 14px;
font-size: 0.9rem;
}
}
/* =============================================
AI CHAT
============================================= */
.chat-container {
display: flex;
flex-direction: column;
height: calc(100vh - 140px);
background: var(--background);
border-radius: var(--radius-lg);
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
.chat-message {
display: flex;
max-width: 80%;
}
.chat-message-user {
align-self: flex-end;
}
.chat-message-assistant {
align-self: flex-start;
}
.chat-bubble {
padding: 10px 16px;
border-radius: var(--radius-lg);
line-height: 1.5;
font-size: 0.95rem;
word-wrap: break-word;
overflow-wrap: break-word;
}
.chat-message-user .chat-bubble {
background: var(--primary);
color: white;
border-bottom-right-radius: var(--radius-xs);
}
.chat-message-assistant .chat-bubble {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border-light);
border-bottom-left-radius: var(--radius-xs);
}
.chat-message-assistant .chat-bubble strong {
color: var(--primary-dark);
}
.chat-message-assistant .chat-bubble code {
background: var(--surface-alt);
padding: 2px 5px;
border-radius: var(--radius-xs);
font-size: 0.9em;
}
.chat-message-assistant .chat-bubble pre {
background: var(--surface-alt);
padding: 10px;
border-radius: var(--radius-sm);
overflow-x: auto;
margin: 8px 0;
}
.chat-message-assistant .chat-bubble pre code {
background: none;
padding: 0;
}
.chat-message-assistant .chat-bubble ul,
.chat-message-assistant .chat-bubble ol {
padding-left: 20px;
margin: 6px 0;
}
.chat-message-assistant .chat-bubble li {
margin: 3px 0;
}
.chat-table {
width: 100%;
border-collapse: collapse;
margin: 8px 0;
font-size: 0.9em;
}
.chat-table th,
.chat-table td {
padding: 6px 10px;
border: 1px solid var(--border-light);
text-align: left;
}
.chat-table th {
background: var(--surface-alt);
font-weight: 600;
}
.chat-input-area {
display: flex;
gap: 8px;
padding: 12px 20px;
border-top: 1px solid var(--border-light);
background: var(--surface);
align-items: flex-end;
}
.chat-textarea {
flex: 1;
resize: none;
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 10px 14px;
font-family: inherit;
font-size: 0.95rem;
line-height: 1.4;
background: var(--background);
color: var(--text);
max-height: 120px;
overflow-y: auto;
}
.chat-textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(45, 106, 79, 0.15);
}
.chat-send-btn {
height: 40px;
padding: 0 20px;
white-space: nowrap;
flex-shrink: 0;
}
/* Welcome state */
.chat-welcome {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px 20px;
flex: 1;
}
.chat-welcome-icon {
font-size: 3rem;
margin-bottom: 12px;
}
.chat-welcome h3 {
color: var(--text);
margin-bottom: 8px;
}
.chat-welcome p {
color: var(--text-light);
margin-bottom: 20px;
max-width: 400px;
}
.chat-suggestions {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.chat-chip {
padding: 8px 16px;
border: 1px solid var(--border);
border-radius: var(--radius-full);
background: var(--surface);
color: var(--text);
font-size: 0.85rem;
cursor: pointer;
transition: all var(--transition-fast);
}
.chat-chip:hover {
border-color: var(--primary);
color: var(--primary);
background: rgba(45, 106, 79, 0.05);
}
/* Typing indicator */
.chat-typing .chat-bubble {
display: flex;
gap: 5px;
padding: 14px 20px;
}
.typing-dot {
width: 8px;
height: 8px;
background: var(--text-light);
border-radius: 50%;
animation: typingBounce 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(2) {
animation-delay: 0.2s;
}
.typing-dot:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes typingBounce {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
40% { transform: scale(1); opacity: 1; }
}
/* Chat FAB */
.chat-fab {
position: fixed;
bottom: 30px;
right: 30px;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--primary);
color: white;
border: none;
font-size: 1.5rem;
cursor: pointer;
box-shadow: var(--shadow-lg);
transition: all 0.3s ease;
z-index: 1001;
display: flex;
align-items: center;
justify-content: center;
}
.chat-fab:hover {
transform: scale(1.1);
box-shadow: var(--shadow-xl);
background: var(--primary-dark);
}
/* Chat Widget */
.chat-widget {
position: fixed;
bottom: 100px;
right: 30px;
width: 400px;
height: 500px;
background: var(--background);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
z-index: 1002;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--border-light);
}
.chat-widget-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: var(--primary-dark);
color: white;
}
.chat-widget-title {
font-weight: 600;
font-size: 0.95rem;
}
.chat-widget-actions {
display: flex;
gap: 4px;
}
.chat-widget-btn {
background: none;
border: none;
color: white;
cursor: pointer;
padding: 4px 8px;
font-size: 1.1rem;
border-radius: var(--radius-xs);
opacity: 0.8;
transition: opacity var(--transition-fast);
}
.chat-widget-btn:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.15);
}
.chat-widget-messages {
flex: 1;
overflow-y: auto;
padding: 12px;
gap: 10px;
}
.chat-widget .chat-input-area {
padding: 8px 12px;
}
.chat-widget .chat-textarea {
font-size: 0.9rem;
padding: 8px 12px;
}
.chat-widget .chat-send-btn {
height: 36px;
padding: 0 14px;
font-size: 0.85rem;
}
.chat-welcome-small {
padding: 30px 16px;
}
.chat-welcome-small p {
font-size: 0.9rem;
margin-bottom: 12px;
}
.chat-welcome-small .chat-chip {
font-size: 0.8rem;
padding: 6px 12px;
}
/* Mobile */
@media (max-width: 768px) {
.chat-fab,
.chat-widget {
display: none !important;
}
.chat-container {
height: calc(100vh - var(--mobile-topbar-height) - 100px);
}
.chat-message {
max-width: 90%;
}
.chat-welcome {
padding: 30px 16px;
}
.chat-input-area {
padding: 10px 12px;
}
}
/* Lamb Registration Modal */
.lamb-reg-banner {
background: var(--surface-alt);
border-left: 3px solid var(--primary);
padding: 12px 16px;
border-radius: 4px;
margin-bottom: 20px;
font-size: 14px;
color: var(--text);
line-height: 1.5;
}
.lamb-cards-container {
max-height: 60vh;
overflow-y: auto;
padding-right: 4px;
}
.lamb-card {
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
background: var(--surface-alt);
}
.lamb-card-header {
font-weight: 600;
font-size: 12px;
color: var(--primary-dark);
text-transform: uppercase;
letter-spacing: 0.6px;
margin-bottom: 14px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.locked-field {
padding: 8px 10px;
background: var(--background);
border: 1px solid var(--border-light);
border-radius: 4px;
font-size: 14px;
color: var(--text-light);
min-height: 36px;
display: flex;
align-items: center;
}
.gender-radio-group {
display: flex;
gap: 18px;
padding: 8px 2px;
flex-wrap: wrap;
}
.gender-radio-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
cursor: pointer;
color: var(--text);
font-weight: normal;
}
.gender-radio-label input[type="radio"] {
cursor: pointer;
accent-color: var(--primary);
}
.lamb-born-hint {
font-size: 12px;
color: var(--primary);
margin-top: 5px;
font-style: italic;
}
/* ── Floating Action Button ───────────────────────────────────── */
.fab {
position: fixed;
bottom: 24px;
right: 24px;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--primary);
color: #fff;
border: none;
font-size: 24px;
line-height: 1;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0,0,0,0.25);
z-index: 900;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.fab:hover {
background: var(--primary-dark);
box-shadow: 0 6px 18px rgba(0,0,0,0.32);
transform: scale(1.05);
}
.fab:active { transform: scale(0.97); }
/* ── Tab Count Badges ─────────────────────────────────────────── */
.tab-count {
display: inline-block;
background: rgba(0,0,0,0.12);
color: inherit;
font-size: 10px;
font-weight: 600;
line-height: 1;
padding: 2px 5px;
border-radius: 10px;
margin-left: 4px;
vertical-align: middle;
opacity: 0.75;
}
.detail-tab.active .tab-count {
background: rgba(255,255,255,0.25);
opacity: 1;
}
/* ── Breeding Card Collapse ───────────────────────────────────── */
.breeding-card-collapsed .breeding-detail-body { display: none; }
.breeding-card-expanded .breeding-detail-body { display: block; }
.breeding-card-summary {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
flex: 1;
cursor: pointer;
min-height: 36px;
padding: 4px 0;
-webkit-tap-highlight-color: rgba(0,0,0,0.05);
}
.breeding-card-summary:focus-visible {
outline: 2px solid var(--forest-700, var(--primary));
outline-offset: 2px;
border-radius: 4px;
}
.breeding-card-summary .summary-sep {
color: var(--text-light);
font-size: 12px;
}
.breeding-collapse-toggle {
background: none;
border: none;
cursor: pointer;
color: var(--text-light);
font-size: 18px;
padding: 8px 12px;
border-radius: 4px;
line-height: 1;
flex-shrink: 0;
min-width: 44px;
min-height: 44px;
transition: color 0.15s, background 0.15s;
}
.breeding-collapse-toggle:hover {
color: var(--primary);
background: var(--surface-alt);
}
@media (max-width: 600px) {
.breeding-card-summary { min-height: 44px; padding: 8px 0; }
.record-actions .btn { min-height: 44px; }
}
.breeding-detail-body {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
.complication-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--danger);
display: inline-block;
margin-left: 4px;
vertical-align: middle;
flex-shrink: 0;
}
/* ── Animals Table ────────────────────────────────────────────── */
#animals-table tbody tr:hover {
background: var(--surface-alt);
}
#animals-table tbody .breed-cell {
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Sheep Detail Prev/Next Nav ───────────────────────────────── */
.sheep-detail-nav {
display: flex;
align-items: center;
gap: 4px;
}
.sheep-nav-btn {
background: none;
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text-light);
cursor: pointer;
font-size: 14px;
padding: 4px 10px;
transition: border-color 0.15s, color 0.15s;
white-space: nowrap;
}
.sheep-nav-btn:hover {
border-color: var(--primary);
color: var(--primary);
}
.sheep-nav-btn:disabled {
opacity: 0.3;
cursor: default;
pointer-events: none;
}
.sheep-nav-pos {
font-size: 12px;
color: var(--text-light);
padding: 0 4px;
white-space: nowrap;
}
/* ── Financials Stats Wrap ────────────────────────────────────── */
.summary-cards {
flex-wrap: wrap;
}
/* ── Health View Toggle Labels ────────────────────────────────── */
.view-toggle-btn {
font-size: 0.8rem;
padding: 4px 10px;
min-width: 56px;
}
/* ── Animal Timeline ──────────────────────────────────────────── */
.animal-timeline {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
padding-left: 4px;
}
.timeline-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border-light, #e8e8e8);
position: relative;
}
.timeline-item:last-child {
border-bottom: none;
}
.timeline-icon {
font-size: 18px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--bg-secondary, #f5f5f0);
flex-shrink: 0;
margin-top: 2px;
}
.timeline-body {
flex: 1;
min-width: 0;
}
.timeline-meta {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 3px;
}
.timeline-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--text-light);
flex-shrink: 0;
}
.timeline-date {
font-size: 12px;
color: var(--text-light);
margin-left: auto;
white-space: nowrap;
}
.timeline-summary {
font-size: 14px;
color: var(--text);
line-height: 1.45;
word-break: break-word;
}
.timeline-actions {
margin-top: 6px;
}
/* Type-specific accent colors on the icon circle */
.timeline-type-birth .timeline-icon { background: #e8f4fd; }
.timeline-type-health .timeline-icon { background: #fde8e8; }
.timeline-type-milk .timeline-icon { background: #e8f0fd; }
.timeline-type-shearing .timeline-icon{ background: #f0f0f0; }
.timeline-type-breeding .timeline-icon{ background: #fdf3e8; }
.timeline-type-weight .timeline-icon { background: #e8fde8; }
.timeline-type-note .timeline-icon { background: #f5f0fd; }
@media (max-width: 600px) {
.timeline-item {
gap: 8px;
}
.timeline-icon {
width: 28px;
height: 28px;
font-size: 15px;
}
.timeline-date {
width: 100%;
margin-left: 0;
}
}
/* ─────────────────────────────────────────────────────────
Wave 2 — Quick Entry session-first UI
───────────────────────────────────────────────────────── */
.qe-shell {
background: var(--linen-50);
border-radius: var(--radius-lg);
width: min(100%, 460px);
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
padding: 0;
}
@media (max-width: 600px) {
.qe-shell { width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; }
}
.qe-header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 18px;
background: var(--linen-50);
border-bottom: 1px solid var(--stone-200);
flex-shrink: 0;
}
.qe-icon-btn {
width: 36px; height: 36px; border-radius: var(--radius-full);
background: rgba(0,0,0,.05); border: none;
display: grid; place-items: center; cursor: pointer;
}
.qe-icon-btn:hover { background: rgba(0,0,0,.08); }
.qe-icon-btn .icon { color: var(--ink-700); width: 18px; height: 18px; }
.qe-title {
font-family: var(--font-serif); font-weight: 500;
font-size: 1.05rem; letter-spacing: -0.01em;
margin: 0;
}
.qe-view { flex: 1; overflow-y: auto; padding: 16px 20px 20px; }
.qe-view[hidden] { display: none; }
.qe-eyebrow {
font-size: 0.72rem; color: var(--stone-500);
text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
margin-bottom: 6px;
}
.qe-h1 {
font-family: var(--font-serif); font-weight: 500;
font-size: 1.55rem; letter-spacing: -0.02em; line-height: 1.1;
margin: 0 0 18px; color: var(--ink-900);
}
.qe-session-sub {
font-size: 0.85rem; color: var(--stone-500);
margin: 4px 0 16px;
}
.qe-back-row { margin-bottom: 12px; }
.qe-back {
display: inline-flex; align-items: center; gap: 4px;
background: none; border: none;
color: var(--stone-500); font-family: inherit; font-size: 0.82rem; font-weight: 500;
cursor: pointer; padding: 4px 0;
}
.qe-back:hover { color: var(--ink-900); }
/* Session picker */
.qe-session-list { display: flex; flex-direction: column; gap: 8px; }
.qe-session-card {
display: flex; align-items: center; gap: 14px;
padding: 16px;
background: var(--surface);
border: 1px solid var(--stone-200);
border-radius: var(--radius-lg);
cursor: pointer;
transition: transform .12s, box-shadow .12s;
text-align: left; font-family: inherit;
width: 100%;
}
.qe-session-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.qe-session-card.featured { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.qe-session-card.featured .qe-session-meta { color: rgba(255,255,255,.6); }
.qe-session-card.featured .qe-session-icon { background: rgba(255,255,255,.1); color: #fff; }
.qe-session-card.disabled { opacity: .55; cursor: not-allowed; }
.qe-session-icon {
width: 40px; height: 40px; border-radius: var(--radius-md);
background: var(--linen-100); color: var(--ink-700);
display: grid; place-items: center; flex-shrink: 0;
}
.qe-session-icon .icon { width: 22px; height: 22px; }
.qe-session-body { flex: 1; min-width: 0; }
.qe-session-title { font-size: 0.95rem; font-weight: 600; }
.qe-session-meta { font-size: 0.78rem; color: var(--stone-500); margin-top: 2px; }
.qe-session-card .qe-chev { color: var(--stone-400); width: 18px; height: 18px; flex-shrink: 0; }
.qe-divider-label {
font-size: 0.72rem; color: var(--stone-500);
text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
margin: 18px 0 8px;
}
/* Animal rows (used in session views) */
.qe-row-list { display: flex; flex-direction: column; gap: 8px; }
.qe-row {
background: var(--surface);
border: 1px solid var(--stone-200);
border-radius: var(--radius-lg);
padding: 12px 14px;
}
.qe-row.dimmed { opacity: .5; }
.qe-row.dimmed .qe-stepper { opacity: .6; }
.qe-row.expanded { border-color: var(--forest-700); box-shadow: 0 0 0 3px rgba(45,106,79,.1); }
.qe-row-head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.qe-row-head:last-child { margin-bottom: 0; }
.qe-animal-photo {
width: 32px; height: 32px; border-radius: var(--radius-full);
background: var(--stone-300); flex-shrink: 0;
overflow: hidden; display: grid; place-items: center;
font-weight: 600; color: #fff; font-size: 12px;
background-size: cover; background-position: center;
}
.qe-animal-name {
font-size: 0.9rem; font-weight: 600; flex: 1;
line-height: 1.2; color: var(--ink-900);
}
.qe-animal-tag {
font-size: 0.74rem; color: var(--stone-500);
font-weight: 400; margin-left: 6px;
}
.qe-animal-prev {
font-size: 0.7rem; color: var(--stone-500);
background: var(--linen-100); padding: 3px 8px;
border-radius: var(--radius-full); margin-left: auto;
}
.qe-animal-prev strong { color: var(--ink-700); font-weight: 600; }
.qe-stepper {
display: flex; align-items: center;
background: var(--linen-100);
border-radius: var(--radius-md); padding: 4px;
}
.qe-stepper button {
flex-shrink: 0; width: 40px; height: 40px;
border: none; background: var(--surface);
border-radius: 8px;
font-family: inherit; font-size: 1.1rem; font-weight: 500;
color: var(--ink-700); cursor: pointer;
display: grid; place-items: center;
box-shadow: var(--shadow-sm);
}
.qe-stepper button:active { background: var(--stone-200); }
.qe-stepper .qe-val {
flex: 1; text-align: center;
font-family: var(--font-serif); font-size: 1.4rem; font-weight: 500;
letter-spacing: -.02em; color: var(--ink-900);
}
.qe-stepper .qe-unit {
font-size: 0.78rem; color: var(--stone-500);
font-weight: 400; margin-left: 4px; font-family: var(--font-sans);
}
/* BCS row (weighing) */
.qe-bcs-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.qe-bcs-label {
font-size: 0.72rem; color: var(--stone-500);
text-transform: uppercase; letter-spacing: .05em; font-weight: 600; flex: 1;
}
.qe-bcs-toggle {
display: inline-flex; background: var(--linen-100);
border-radius: var(--radius-full); padding: 3px;
}
.qe-bcs-toggle button {
width: 28px; height: 28px; border: none; background: none;
border-radius: 50%;
font-family: inherit; font-size: 0.78rem; font-weight: 600;
color: var(--stone-500); cursor: pointer;
}
.qe-bcs-toggle button.on { background: var(--ink-900); color: #fff; }
/* Skip toggle (milking + weighing) */
.qe-skip-row {
margin-top: 6px;
display: flex; align-items: center; justify-content: space-between;
font-size: 0.74rem; color: var(--stone-500);
}
.qe-skip-row button {
background: none; border: none; color: var(--terracotta-600);
font-family: inherit; font-size: 0.74rem; font-weight: 500;
cursor: pointer; padding: 4px 0;
}
.qe-skip-row button:hover { text-decoration: underline; }
/* Health-round add-note button */
.qe-add-note-btn {
margin-left: auto;
background: var(--linen-100);
border: 1px solid var(--stone-200);
color: var(--ink-700);
padding: 6px 12px;
border-radius: var(--radius-full);
font-family: inherit; font-size: 0.78rem; font-weight: 500;
cursor: pointer;
display: inline-flex; align-items: center; gap: 5px;
}
.qe-add-note-btn .icon { width: 12px; height: 12px; }
.qe-add-note-btn:hover { background: var(--surface); border-color: var(--ink-900); }
/* Health expanded form */
.qe-health-form { display: flex; flex-direction: column; gap: 8px; }
.qe-type-toggle {
display: flex; background: var(--linen-100);
border-radius: var(--radius-md); padding: 3px; gap: 2px;
}
.qe-type-toggle button {
flex: 1; border: none; background: none;
padding: 7px 6px;
font-family: inherit; font-size: 0.74rem; font-weight: 500;
color: var(--ink-700); border-radius: 7px; cursor: pointer;
}
.qe-type-toggle button.on {
background: var(--surface); color: var(--ink-900);
box-shadow: var(--shadow-sm);
}
.qe-health-textarea {
width: 100%;
border: 1px solid var(--stone-200);
border-radius: var(--radius-md);
padding: 9px 11px;
font-family: inherit; font-size: 0.85rem;
color: var(--ink-700);
min-height: 60px; resize: none;
background: var(--linen-50);
box-sizing: border-box;
}
.qe-health-textarea:focus {
outline: none;
border-color: var(--forest-700);
background: var(--surface);
}
.qe-collapse-btn {
background: none; border: none;
color: var(--stone-500);
font-family: inherit; font-size: 0.74rem; font-weight: 500;
cursor: pointer; align-self: flex-end; padding: 4px 0;
}
/* Quick note (single-animal) form */
.qe-note-form { display: flex; flex-direction: column; gap: 14px; }
.qe-note-row { display: flex; gap: 10px; }
.qe-note-field label {
display: block;
font-size: 0.74rem; color: var(--stone-500);
text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
margin-bottom: 4px;
}
.qe-note-select, .qe-note-input {
width: 100%;
border: 1px solid var(--stone-200);
border-radius: var(--radius-md);
padding: 10px 11px;
font-family: inherit; font-size: 0.92rem;
color: var(--ink-900);
background: var(--linen-50);
box-sizing: border-box;
}
.qe-note-select:focus, .qe-note-input:focus {
outline: none;
border-color: var(--forest-700);
background: var(--surface);
}
.qe-note-textarea {
width: 100%;
border: 1px solid var(--stone-200);
border-radius: var(--radius-md);
padding: 10px 11px;
font-family: inherit; font-size: 0.92rem;
color: var(--ink-900);
background: var(--linen-50);
resize: vertical; min-height: 110px;
box-sizing: border-box;
}
.qe-note-textarea:focus {
outline: none;
border-color: var(--forest-700);
background: var(--surface);
}
/* Sticky bottom bar */
.qe-footer {
border-top: 1px solid var(--stone-200);
padding: 12px 18px max(12px, env(safe-area-inset-bottom));
background: var(--linen-50);
display: flex; flex-direction: column; gap: 8px;
flex-shrink: 0;
}
.qe-footer[hidden] { display: none; }
.qe-summary {
font-size: 0.78rem; color: var(--stone-500);
text-align: center;
}
.qe-summary strong { color: var(--ink-900); font-weight: 600; }
.qe-save {
background: var(--ink-900); color: #fff;
border: none; border-radius: var(--radius-full);
padding: 14px;
font-family: inherit; font-size: 0.95rem; font-weight: 600;
cursor: pointer; width: 100%;
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.qe-save:disabled { background: var(--stone-300); cursor: not-allowed; }
/* Empty state inside row list */
.qe-row-list .empty-state {
background: var(--surface);
border: 1px dashed var(--stone-300);
border-radius: var(--radius-lg);
padding: 28px 20px;
text-align: center;
}
.qe-row-list .empty-state p { margin: 0 0 4px; color: var(--ink-700); font-size: 0.92rem; }
/* Desktop 2-col variant */
@media (min-width: 900px) {
.qe-shell { width: 920px; max-width: 920px; height: auto; max-height: 80vh; }
.qe-shell.has-rail {
display: grid;
grid-template-columns: 280px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"rail header"
"rail main"
"rail footer";
}
.qe-shell.has-rail .qe-header { grid-area: header; }
.qe-shell.has-rail .qe-picker {
grid-area: rail; padding: 24px 16px;
background: var(--linen-100); border-right: 1px solid var(--stone-200);
overflow-y: auto;
}
.qe-shell.has-rail .qe-picker .qe-h1 { font-size: 1.2rem; padding: 0 8px; }
.qe-shell.has-rail .qe-picker .qe-eyebrow { padding: 0 8px; }
.qe-shell.has-rail .qe-session-card {
padding: 10px 12px;
background: none; border: none; border-radius: var(--radius-md);
}
.qe-shell.has-rail .qe-session-card:hover { background: rgba(0,0,0,.04); transform: none; box-shadow: none; }
.qe-shell.has-rail .qe-session-card.featured,
.qe-shell.has-rail .qe-session-card.active {
background: var(--ink-900); color: #fff;
}
.qe-shell.has-rail .qe-session-card.active .qe-session-meta { color: rgba(255,255,255,.6); }
.qe-shell.has-rail .qe-session-card.active .qe-session-icon { background: rgba(255,255,255,.1); color: #fff; }
.qe-shell.has-rail .qe-session-icon { width: 30px; height: 30px; background: var(--surface); border: 1px solid var(--stone-200); }
.qe-shell.has-rail .qe-session-icon .icon { width: 16px; height: 16px; }
.qe-shell.has-rail .qe-session-card .qe-chev { display: none; }
.qe-shell.has-rail .qe-session,
.qe-shell.has-rail .qe-note-view { grid-area: main; padding: 24px 32px; }
.qe-shell.has-rail .qe-back-row { display: none; }
.qe-shell.has-rail .qe-footer { grid-area: footer; flex-direction: row; align-items: center; }
.qe-shell.has-rail .qe-footer .qe-summary { flex: 1; text-align: left; }
.qe-shell.has-rail .qe-footer .qe-save { width: auto; padding: 10px 18px; font-size: 0.9rem; }
}
/* ─────────────────────────────────────────────────────────
Wave 3 — Animal detail: hero, vitals, timeline filters,
sticky add bar, single-record bottom sheet
───────────────────────────────────────────────────────── */
.sheep-detail-header {
display: grid;
grid-template-columns: 380px 1fr;
gap: 28px;
align-items: end;
padding: 24px 0 24px;
margin-bottom: 0;
background: none; border: none; box-shadow: none;
border-radius: 0;
}
@media (max-width: 800px) {
.sheep-detail-header { grid-template-columns: 1fr; gap: 14px; }
}
.sheep-detail-photo {
aspect-ratio: 4/3;
border-radius: var(--radius-xl);
background: var(--stone-300);
overflow: hidden; position: relative;
display: block;
width: 100%; height: auto;
cursor: pointer;
}
.sheep-detail-photo img {
width: 100%; height: 100%; object-fit: cover;
transform-origin: center;
}
.sheep-detail-photo > .icon {
width: 60%; height: 60%;
position: absolute; top: 20%; left: 20%;
color: rgba(255,255,255,.4);
}
.sheep-detail-photo-edit {
position: absolute; top: 12px; right: 12px;
width: 32px; height: 32px;
border-radius: var(--radius-full);
background: rgba(255,255,255,.85);
border: none; cursor: pointer;
display: grid; place-items: center;
backdrop-filter: blur(4px);
opacity: 0; transition: opacity .2s;
}
.sheep-detail-photo:hover .sheep-detail-photo-edit { opacity: 1; }
.sheep-detail-photo-edit .icon { color: var(--ink-900); width: 14px; height: 14px; }
.sheep-detail-info { padding-bottom: 6px; }
.sheep-detail-eyebrow {
font-size: 0.74rem; color: var(--stone-500);
text-transform: uppercase; letter-spacing: .08em;
font-weight: 600; display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
}
.sheep-detail-info h3 {
font-family: var(--font-serif); font-weight: 500;
font-size: 3.5rem; letter-spacing: -0.025em; line-height: 1;
margin: 8px 0 12px; color: var(--ink-900);
}
@media (max-width: 800px) { .sheep-detail-info h3 { font-size: 2.25rem; } }
.sheep-detail-meta {
display: flex; flex-wrap: wrap; gap: 0 24px;
color: var(--ink-700); font-size: 0.88rem;
}
.sheep-detail-meta span { padding: 5px 0; }
.sheep-detail-meta strong { color: var(--ink-900); font-weight: 500; }
.detail-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 9px; border-radius: var(--radius-full);
font-size: 0.72rem; font-weight: 500;
}
.detail-pill::before {
content: ''; width: 5px; height: 5px;
border-radius: 50%; background: currentColor;
}
.detail-pill.active { background: var(--success-100); color: var(--success-700); }
.detail-pill.bred { background: var(--info-100); color: var(--info-700); }
.detail-pill.lactating{ background: var(--forest-100); color: var(--forest-700); }
.detail-pill.dry { background: var(--linen-200); color: var(--ink-700); }
.detail-pill.offsite { background: var(--linen-100); color: var(--stone-500); }
.detail-pill.maiden { background: var(--linen-100); color: var(--ink-700); }
.detail-pill.pregnant { background: var(--info-100); color: var(--info-700); }
.sheep-vitals {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin: 0 0 28px;
}
@media (max-width: 800px) { .sheep-vitals { grid-template-columns: 1fr 1fr; gap: 8px; } }
.sheep-vital {
background: var(--surface);
border: 1px solid var(--stone-200);
border-radius: var(--radius-lg);
padding: 14px 16px;
}
.sheep-vital-label {
font-size: 0.66rem; color: var(--stone-500);
text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
.sheep-vital-value {
font-family: var(--font-serif); font-size: 1.45rem; font-weight: 500;
letter-spacing: -.02em; margin-top: 5px; color: var(--ink-900);
line-height: 1.1;
}
.sheep-vital-value .small {
font-size: 0.78rem; color: var(--stone-400); font-weight: 400;
font-family: var(--font-sans);
}
.sheep-vital-meta {
font-size: 0.72rem; color: var(--stone-500);
margin-top: 4px; display: flex; align-items: center; gap: 5px;
}
.sheep-vital-meta .delta {
color: var(--success-700); font-weight: 500;
display: inline-flex; align-items: center; gap: 2px;
}
.sheep-vital-meta .delta.down { color: var(--danger-600); }
.sheep-vital-meta .delta .icon { width: 11px; height: 11px; }
.timeline-filter-chips {
display: flex; align-items: center; gap: 6px;
flex-wrap: wrap; padding: 14px 0 12px;
}
.tl-chip {
padding: 4px 10px;
border: 1px solid var(--stone-300);
border-radius: var(--radius-full);
background: var(--surface);
font-family: inherit; font-size: 0.74rem;
color: var(--ink-700); font-weight: 500;
cursor: pointer;
display: inline-flex; align-items: center; gap: 4px;
}
.tl-chip .icon { width: 11px; height: 11px; }
.tl-chip.on { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.tl-range {
margin-left: auto; color: var(--stone-500); font-size: 0.74rem;
}
.tl-event {
display: flex; gap: 12px;
padding: 8px 10px; border-radius: var(--radius-md);
align-items: flex-start;
}
.tl-event:hover { background: var(--linen-100); }
.tl-event-icon {
width: 26px; height: 26px;
border-radius: var(--radius-sm);
display: grid; place-items: center;
flex-shrink: 0; margin-top: 1px;
}
.tl-event-icon .icon { width: 13px; height: 13px; }
.tl-event-icon.health { background: var(--info-100); color: var(--info-700); }
.tl-event-icon.milk { background: var(--linen-200); color: var(--ink-700); }
.tl-event-icon.weight { background: var(--warning-100);color: var(--warning-700); }
.tl-event-icon.breeding { background: var(--terracotta-100); color: var(--terracotta-600); }
.tl-event-icon.shearing { background: var(--linen-200); color: var(--ink-700); }
.tl-event-icon.note { background: var(--surface); color: var(--stone-500); border: 1px solid var(--stone-300); }
.tl-event-icon.birth { background: var(--success-100);color: var(--success-700); }
.tl-event-body { flex: 1; min-width: 0; }
.tl-event-time { font-size: 0.72rem; color: var(--stone-500); font-weight: 500; }
.tl-event-text { font-size: 0.82rem; color: var(--ink-900); margin-top: 1px; }
.tl-event-text strong { font-weight: 600; }
.tl-event-text .meta { color: var(--stone-500); font-weight: 400; }
.tl-event-aside {
font-size: 0.78rem; color: var(--ink-700); font-weight: 500;
flex-shrink: 0; text-align: right;
}
.tl-day-header {
font-size: 0.66rem; color: var(--stone-500);
text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
padding-bottom: 8px; border-bottom: 1px solid var(--stone-200);
margin: 18px 0 10px; display: flex; align-items: center; gap: 10px;
}
.tl-day-header .ago { color: var(--stone-400); font-weight: 400; letter-spacing: 0; text-transform: none; }
.sheep-lineage-block h3 {
font-family: var(--font-serif); font-weight: 500;
font-size: 1.45rem; letter-spacing: -.02em;
margin-bottom: 14px; color: var(--ink-900);
}
.lineage-row { display: grid; gap: 10px; margin-bottom: 14px; }
.lineage-row.parents { grid-template-columns: repeat(2, 1fr); }
.lineage-row.gp { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 800px) {
.lineage-row.gp { grid-template-columns: 1fr 1fr; }
}
.lineage-card {
background: var(--surface); border: 1px solid var(--stone-200);
border-radius: var(--radius-md); padding: 12px 14px;
}
.lineage-label {
font-size: 0.66rem; color: var(--stone-500);
text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
.lineage-name { font-size: 0.85rem; font-weight: 500; margin-top: 4px; color: var(--ink-900); }
.lineage-row.parents .lineage-name {
font-family: var(--font-serif); font-size: 1.05rem;
font-weight: 500; letter-spacing: -.01em;
}
.lineage-name a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--stone-300); }
.lineage-name a:hover { color: var(--forest-700); border-color: var(--forest-700); }
.lineage-tag { font-size: 0.74rem; color: var(--stone-500); margin-top: 2px; }
.lineage-link {
color: var(--forest-700); font-size: 0.85rem;
text-decoration: none; font-weight: 500;
}
.lineage-link:hover { color: var(--forest-900); text-decoration: underline; }
.sheep-add-bar {
position: sticky; bottom: 18px; z-index: 50;
margin: 18px 0 0;
background: var(--ink-900); color: #fff;
border-radius: var(--radius-full);
display: flex; align-items: center; justify-content: space-between;
padding: 6px 6px 6px 18px;
box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.sheep-add-bar[hidden] { display: none; }
.sheep-add-label { font-size: 0.85rem; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.sheep-add-label .icon { width: 14px; height: 14px; }
.sheep-add-label strong { font-weight: 600; }
.sheep-add-options { display: flex; gap: 4px; flex-wrap: wrap; }
.sheep-add-opt {
background: rgba(255,255,255,.1); border: none;
color: #fff; padding: 8px 14px;
border-radius: var(--radius-full);
font-family: inherit; font-size: 0.85rem; font-weight: 500;
cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
}
.sheep-add-opt:hover { background: rgba(255,255,255,.2); }
.sheep-add-opt .icon { width: 14px; height: 14px; }
.sheep-add-opt.primary { background: var(--forest-500); color: var(--forest-900); }
.sheep-add-opt.primary:hover { background: #7ed09d; }
@media (max-width: 600px) {
.sheep-add-bar {
position: fixed; left: 14px; right: 14px;
bottom: max(14px, env(safe-area-inset-bottom));
margin: 0;
}
.sheep-add-options .sheep-add-opt:not(.primary) { display: none; }
.sheep-add-options .sheep-add-opt.primary {
background: var(--forest-500); color: var(--forest-900);
}
}
.sr-modal .modal-content { padding: 0; }
.sr-shell {
background: var(--surface);
border-radius: var(--radius-xl);
width: min(100%, 460px);
max-height: 90vh;
display: flex; flex-direction: column;
overflow: hidden;
}
@media (max-width: 600px) {
.sr-modal { align-items: flex-end !important; }
.sr-shell {
width: 100%;
border-radius: 24px 24px 0 0;
max-height: 85vh;
}
}
.sr-handle {
width: 40px; height: 4px;
background: var(--stone-300); border-radius: 2px;
margin: 12px auto 6px;
}
@media (min-width: 601px) { .sr-handle { display: none; } }
.sr-header { padding: 8px 20px 14px; text-align: center; }
.sr-h {
font-family: var(--font-serif); font-size: 1.15rem;
font-weight: 500; letter-spacing: -.01em; margin: 0 0 4px;
}
.sr-sub { font-size: 0.78rem; color: var(--stone-500); margin: 0; }
.sr-type {
display: flex; justify-content: center; gap: 6px;
flex-wrap: wrap; padding: 0 20px 16px;
}
.sr-type button {
padding: 6px 12px; border-radius: var(--radius-full);
border: 1px solid var(--stone-300); background: var(--surface);
font-family: inherit; font-size: 0.78rem; font-weight: 500;
color: var(--ink-700); cursor: pointer;
}
.sr-type button.on {
background: var(--ink-900); color: #fff; border-color: var(--ink-900);
}
.sr-row-container { padding: 0 20px 14px; flex: 1; overflow-y: auto; }
.sr-row-container .qe-row { background: var(--linen-50); }
.sr-actions {
display: flex; gap: 8px;
padding: 14px 20px max(14px, env(safe-area-inset-bottom));
border-top: 1px solid var(--stone-200);
}
.sr-cancel {
flex: 1; background: none; border: 1px solid var(--stone-300);
color: var(--ink-700); padding: 13px;
border-radius: var(--radius-full);
font-family: inherit; font-size: 0.92rem; font-weight: 600;
cursor: pointer;
}
.sr-save {
flex: 2; background: var(--ink-900); color: #fff;
border: none; padding: 13px;
border-radius: var(--radius-full);
font-family: inherit; font-size: 0.92rem; font-weight: 600;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.sr-save:disabled { background: var(--stone-300); cursor: not-allowed; }
.sr-ampm-btn {
background: var(--linen-100); border: 1px solid var(--stone-200);
border-radius: var(--radius-full);
padding: 6px 16px;
font-family: inherit; font-size: 0.82rem; font-weight: 500;
color: var(--ink-700); cursor: pointer;
}
.sr-ampm-btn.on { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.sr-note-textarea {
width: 100%;
border: 1px solid var(--stone-200);
border-radius: var(--radius-md);
padding: 10px 12px;
font-family: inherit; font-size: 0.92rem;
color: var(--ink-900);
background: var(--linen-50);
min-height: 120px; resize: vertical;
box-sizing: border-box;
}
.sr-note-textarea:focus {
outline: none;
border-color: var(--forest-700);
background: var(--surface);
}
/* ─────────────────────────────────────────────────────────
Wave 4 — Financials surface
───────────────────────────────────────────────────────── */
.financials-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; gap: 16px; flex-wrap: wrap; position: relative; z-index: 100; }
.financials-header .page-eyebrow {
font-size: 0.74rem; color: var(--stone-500);
text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
margin-bottom: 4px;
}
.financials-actions { display: flex; align-items: center; gap: 8px; position: relative; flex-wrap: wrap; }
.financials-timeframe-select {
border: 1px solid var(--stone-300); background: #fff;
border-radius: var(--radius-md); padding: 7px 12px;
font-family: inherit; font-size: 0.85rem; color: var(--ink-700); font-weight: 500;
cursor: pointer;
}
/* Split-button */
.split-button {
display: inline-flex; border-radius: var(--radius-md);
overflow: hidden; border: 1px solid var(--forest-700);
background: var(--forest-700); position: relative;
}
.split-button:hover { background: var(--forest-800); border-color: var(--forest-800); }
.split-main, .split-caret {
border: none; background: none; cursor: pointer;
color: #fff; font-family: inherit;
}
.split-main {
padding: 8px 14px; font-size: 0.85rem; font-weight: 500;
display: inline-flex; align-items: center; gap: 6px;
}
.split-caret {
padding: 8px 10px; border-left: 1px solid rgba(255,255,255,.2);
display: grid; place-items: center;
}
.split-menu {
position: absolute; top: 100%; right: 0; margin-top: 4px;
background: #fff; border: 1px solid var(--stone-200);
border-radius: var(--radius-md);
box-shadow: 0 8px 24px rgba(0,0,0,.10);
min-width: 240px; padding: 6px; z-index: 1000;
}
.split-menu[hidden] { display: none; }
.split-menu button {
width: 100%; display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border: none; background: none;
font-family: inherit; font-size: 0.85rem; text-align: left;
color: var(--ink-700); font-weight: 500;
border-radius: var(--radius-sm); cursor: pointer;
}
.split-menu button:hover:not(:disabled) { background: var(--linen-100); }
.split-menu button:disabled { color: var(--stone-400); cursor: not-allowed; }
.split-menu .icon-cell {
width: 24px; height: 24px; border-radius: 6px;
background: var(--linen-100);
display: grid; place-items: center;
color: var(--ink-700); flex-shrink: 0;
}
.split-menu .menu-meta {
font-size: 0.72rem; color: var(--stone-500); margin-left: auto;
}
.split-menu .menu-divider { height: 1px; background: var(--stone-200); margin: 5px 4px; }
/* Segmented Table/Cards toggle */
.seg.view-mode-toggle {
display: inline-flex; gap: 2px;
background: var(--linen-100); border-radius: var(--radius-md);
padding: 3px;
}
.seg.view-mode-toggle button {
border: none; background: none; cursor: pointer;
padding: 6px 12px; font-family: inherit; font-size: 0.82rem;
font-weight: 500; color: var(--ink-700);
border-radius: 6px;
display: inline-flex; align-items: center; gap: 5px;
}
.seg.view-mode-toggle button:hover:not(.on) { background: rgba(255,255,255,.5); }
.seg.view-mode-toggle button.on {
background: var(--surface); color: var(--ink-900);
box-shadow: var(--shadow-sm);
}
.seg.view-mode-toggle .icon { width: 14px; height: 14px; }
/* Category pills — semantic */
.cat-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 9px; border-radius: var(--radius-full);
font-size: 0.72rem; font-weight: 500; line-height: 1.4;
border: 1px solid;
}
.cat-pill::before {
content: ''; width: 5px; height: 5px;
border-radius: 50%; background: currentColor;
}
.cat-veterinary,
.cat-health,
.cat-breeding-vet { color: var(--info-700); border-color: var(--info-100); background: var(--info-100); }
.cat-feed,
.cat-pasture { color: var(--warning-700); border-color: var(--warning-100); background: var(--warning-100); }
.cat-supplies,
.cat-equipment,
.cat-utilities,
.cat-shearing-exp{ color: var(--stone-500); border-color: var(--stone-200); background: var(--linen-100); }
.cat-fencing,
.cat-facilities,
.cat-labor { color: var(--ink-700); border-color: var(--linen-200); background: var(--linen-200); }
.cat-animal-purchase,
.cat-breeding { color: var(--forest-700); border-color: var(--forest-100); background: var(--forest-100); }
.cat-marketing,
.cat-regulatory,
.cat-transport,
.cat-processing,
.cat-losses { color: var(--terracotta-600); border-color: var(--terracotta-100); background: var(--terracotta-100); }
.cat-income { color: #fff; background: var(--success-600); border-color: var(--success-600); }
.cat-income::before { background: rgba(255,255,255,.85); }
/* Ledger table refinements (Wave 4) */
.ledger-table thead { background: var(--linen-100); }
.ledger-table th {
text-align: left; padding: 10px 14px;
font-size: 0.72rem; color: var(--stone-500);
text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
border-bottom: 1px solid var(--stone-200); white-space: nowrap;
}
.ledger-table th.amount-col { text-align: right; }
.ledger-table tbody tr:hover { background: var(--linen-50); }
.ledger-table tbody tr:hover .row-actions { opacity: 1; }
.ledger-table td.amount-col {
text-align: right; font-family: var(--font-mono);
font-weight: 500;
font-variant-numeric: tabular-nums; font-size: 0.8rem;
}
.ledger-table .date-cell {
font-family: var(--font-mono); font-size: 0.78rem;
color: var(--stone-500); font-weight: 500; white-space: nowrap;
}
.ledger-table .desc-main { color: var(--ink-900); font-weight: 500; }
.ledger-table .desc-sub { color: var(--stone-500); font-size: 0.74rem; margin-top: 1px; }
/* Row actions — hidden by default, revealed on row hover */
.row-actions {
position: relative;
display: inline-flex; gap: 3px; opacity: 0;
transition: opacity .15s;
}
.row-actions button {
width: 28px; height: 28px;
border-radius: var(--radius-sm);
border: none; background: transparent;
color: var(--stone-500); cursor: pointer;
display: grid; place-items: center;
}
.row-actions button:hover { background: var(--linen-200); color: var(--ink-900); }
.row-actions button .icon { width: 13px; height: 13px; }
/* Row dot-menu */
.row-menu {
position: absolute; top: 32px; right: 0; z-index: 20;
background: #fff; border: 1px solid var(--stone-200);
border-radius: var(--radius-md); box-shadow: 0 6px 18px rgba(0,0,0,.10);
min-width: 180px; padding: 5px; display: none;
}
.row-menu.open { display: block; }
.row-menu button {
width: 100%; padding: 7px 10px; text-align: left;
background: none; border: none; cursor: pointer;
font-family: inherit; font-size: 0.82rem; color: var(--ink-700);
border-radius: var(--radius-sm);
display: flex; align-items: center; gap: 8px;
height: auto;
}
.row-menu button:hover { background: var(--linen-100); }
.row-menu button.danger { color: var(--danger-700); }
.row-menu button.danger:hover { background: var(--danger-100); }
/* Inline-add row */
.ledger-table tr.add-row { background: var(--linen-50); }
.ledger-table tr.add-row:hover { background: var(--linen-100); }
.ledger-table tr.add-row td {
padding: 9px 14px; color: var(--stone-500);
cursor: pointer;
}
.ledger-table tr.add-row .add-link {
display: inline-flex; align-items: center; gap: 6px;
color: var(--forest-700); font-weight: 500;
}
.ledger-table tr.add-row .add-link .icon { width: 13px; height: 13px; }
.ledger-table tr.add-row.editing {
background: #fffaef;
box-shadow: inset 0 0 0 2px var(--warning-100);
}
.ledger-table tr.add-row.editing td { padding: 8px 12px; cursor: default; }
.cell-input {
width: 100%; border: 1px solid transparent;
background: transparent; padding: 5px 8px;
border-radius: 6px;
font-family: inherit; font-size: 0.8rem; color: var(--ink-900);
box-sizing: border-box;
}
.cell-input:focus {
outline: none; border-color: var(--forest-700);
background: #fff;
}
.cell-input.num {
text-align: right;
font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.cell-select { appearance: none; cursor: pointer; }
.add-row-actions { display: inline-flex; gap: 5px; align-items: center; }
.add-row-actions .btn-save-row {
background: var(--forest-700); color: #fff;
padding: 6px 12px; font-size: 0.8rem;
border-radius: 6px; border: none;
font-family: inherit; font-weight: 500; cursor: pointer;
display: inline-flex; align-items: center; gap: 5px;
}
.add-row-actions .btn-save-row .icon { width: 11px; height: 11px; }
.add-row-actions .btn-cancel-row {
background: none; color: var(--stone-500);
padding: 6px 8px; font-size: 0.8rem;
border: none; font-family: inherit; font-weight: 500; cursor: pointer;
}
.ledger-table tr.add-row .add-row-hint {
color: var(--stone-400); font-size: 0.72rem;
}
.ledger-table tr.add-row .more-fields-link {
color: var(--forest-700); font-size: 0.72rem;
background: none; border: none; cursor: pointer;
font-weight: 500; padding: 0; text-decoration: underline;
}
.ledger-table tr.add-row .add-row-scan-btn {
margin-left: 14px;
background: none; border: none; cursor: pointer;
color: var(--forest-700); font-size: 0.78rem;
font-family: inherit; font-weight: 500; padding: 0;
display: inline-flex; align-items: center; gap: 4px;
text-decoration: underline;
}
.ledger-table tr.add-row .add-row-scan-btn:hover { color: var(--forest-900); }
.ledger-table tr.add-row .add-row-scan-btn .icon { width: 12px; height: 12px; }
/* Default: table visible, cards hidden. .financials-view-cards class
flips that. Mobile media query forces cards regardless of class. */
#financials-ledger-section #expense-records-list { display: none; }
#financials-ledger-section #expense-ledger-view { display: block; }
.financials-view-cards #expense-records-list { display: block !important; }
.financials-view-cards #expense-ledger-view { display: none !important; }
@media (max-width: 600px) {
#financials-ledger-section #expense-records-list { display: block !important; }
#financials-ledger-section #expense-ledger-view { display: none !important; }
}
.expense-card {
background: #fff; border: 1px solid var(--stone-200);
border-radius: var(--radius-md); padding: 10px 12px;
margin-bottom: 6px;
display: flex; flex-direction: column; gap: 5px;
position: relative; overflow: hidden;
cursor: pointer;
}
.expense-card .top-row { display: flex; align-items: center; justify-content: space-between; }
.expense-card .top-row .right {
font-family: var(--font-mono); font-weight: 600;
font-size: 0.85rem; font-variant-numeric: tabular-nums;
}
.expense-card .top-row .right.expense { color: var(--danger-700); }
.expense-card .top-row .right.income { color: var(--success-700); }
.expense-card .desc { font-size: 0.85rem; color: var(--ink-900); font-weight: 500; line-height: 1.3; }
.expense-card .meta { font-size: 0.74rem; color: var(--stone-500); display: flex; gap: 8px; align-items: center; }
.expense-card .meta .vendor { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expense-card .meta .date { flex-shrink: 0; font-family: var(--font-mono); }
.expense-day-header {
font-size: 0.66rem; color: var(--stone-500);
text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
padding: 14px 4px 6px;
}
/* Polish v2 Fix 3: smaller buttons + 6px gap + 6px inset, two-step delete */
.expense-card.swiped { padding-right: 130px; transition: padding .15s; }
.expense-card .swipe-actions {
position: absolute; top: 6px; right: 6px; bottom: 6px;
display: flex; align-items: stretch; gap: 6px;
}
.expense-card .swipe-actions button {
border: none; color: #fff; font-family: inherit;
font-size: 0.78rem; font-weight: 600; cursor: pointer;
padding: 0 12px; min-width: 56px;
border-radius: var(--radius-sm);
}
.expense-card .swipe-actions .edit { background: var(--ink-700); }
.expense-card .swipe-actions .delete { background: var(--danger-600); }
.expense-card .swipe-actions .delete.confirm { background: var(--danger-700); }
/* Production cost dashboard card */
.summary-card.production-cost {
border: 1px solid var(--terracotta-100);
background: linear-gradient(180deg, #fdf6f0, #fff);
}
.summary-card.production-cost .summary-icon { color: var(--terracotta-600); }
.summary-card.production-cost .summary-value { color: var(--terracotta-600); }
.summary-card.production-cost canvas { width: 100%; height: 36px; margin-top: 6px; display: block; }
.summary-card.production-cost .kpi-secondary {
font-size: 0.74rem; color: var(--stone-500);
margin-top: 8px;
border-top: 1px solid var(--stone-200);
padding-top: 8px;
}
.summary-card.production-cost .kpi-secondary strong {
color: var(--ink-700); font-family: var(--font-mono);
}
/* ─────────────────────────────────────────────────────────
Wave 5 — IA simplification: 4-primary sidebar + More
───────────────────────────────────────────────────────── */
/* nav-meta count badges to the right of primary nav items */
.sidebar-nav .nav-link .nav-meta {
margin-left: auto;
font-size: 0.7rem;
color: rgba(255, 255, 255, .42);
font-weight: 500;
}
.sidebar-nav .nav-link.active .nav-meta { color: rgba(255, 255, 255, .8); }
.sidebar-nav .nav-link {
/* Allow nav-meta to right-align */
display: flex;
align-items: center;
}
/* Collapsible More section in the sidebar */
.nav-more-section {
margin-top: 14px;
padding: 0 10px;
}
.nav-more-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 11px;
color: rgba(255, 255, 255, .42);
font-size: 0.66rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .1em;
cursor: pointer;
background: none;
border: none;
width: 100%;
font-family: inherit;
}
.nav-more-toggle:hover { color: rgba(255, 255, 255, .7); }
.nav-more-toggle .icon { width: 11px; height: 11px; transition: transform .15s; color: currentColor; }
.nav-more-section.open .nav-more-toggle .icon { transform: rotate(90deg); }
.nav-more-list { display: none; padding-top: 4px; }
.nav-more-section.open .nav-more-list { display: block; }
/* Wave 5c: Shell views (Animals / Production / Ledger) */
.shell-view .view-header { margin-bottom: 0; }
.shell-view .page-eyebrow {
font-size: 0.74rem; color: var(--stone-500);
text-transform: uppercase; letter-spacing: .06em;
font-weight: 600; margin-bottom: 4px;
}
.shell-sub { color: var(--stone-500); font-size: 0.85rem; margin-top: 4px; }
.shell-subnav {
display: flex; gap: 24px;
border-bottom: 1px solid var(--stone-200);
margin: 18px 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.shell-tab {
color: var(--stone-500); text-decoration: none;
font-size: 0.82rem; font-weight: 500;
padding: 10px 0; border-bottom: 2px solid transparent;
display: inline-flex; align-items: center; gap: 5px;
cursor: pointer; white-space: nowrap;
flex-shrink: 0;
}
.shell-tab:hover { color: var(--ink-700); }
.shell-tab.active { color: var(--ink-900); border-bottom-color: var(--forest-700); }
.shell-tab .count {
background: var(--linen-100); color: var(--stone-500);
padding: 1px 6px; border-radius: var(--radius-full);
font-size: 0.7rem; font-weight: 600;
}
.shell-tab.active .count { background: var(--forest-700); color: #fff; }
.shell-content { /* Inner view sections are portaled here by showView */ }
/* When an inner view sits inside .shell-content, suppress its own
view-header (since the shell's header is doing the framing).
Only the active portaled view shows — the default `.view { display:none }`
handles inactive children; this asserts .active wins inside the portal. */
.shell-content > .view > .view-header { display: none; }
.shell-content > .view.active { display: block !important; }
/* Wave 5d: Records aggregator */
.records-toolbar {
display: flex; gap: 10px; align-items: center;
margin-bottom: 8px; flex-wrap: wrap;
}
.records-search {
display: flex; align-items: center; gap: 6px;
background: var(--surface);
border: 1px solid var(--stone-300);
border-radius: var(--radius-md);
padding: 6px 12px;
flex: 1; min-width: 220px;
}
.records-search .icon { color: var(--stone-500); }
.records-search input {
flex: 1; border: none; outline: none; background: none;
font-family: inherit; font-size: 0.85rem; color: var(--ink-900);
}
.records-toolbar select {
border: 1px solid var(--stone-300); background: var(--surface);
border-radius: var(--radius-md); padding: 7px 12px;
font-family: inherit; font-size: 0.82rem; color: var(--ink-700); font-weight: 500;
cursor: pointer;
}
.records-filter-chips {
display: flex; align-items: center; gap: 6px;
flex-wrap: wrap; padding: 0 4px 14px;
}
.records-filter-chips .chip {
padding: 5px 11px;
border: 1px solid var(--stone-300);
border-radius: var(--radius-full);
background: var(--surface);
font-family: inherit; font-size: 0.78rem;
color: var(--ink-700); font-weight: 500;
cursor: pointer;
display: inline-flex; align-items: center; gap: 5px;
}
.records-filter-chips .chip .icon { width: 12px; height: 12px; }
.records-filter-chips .chip.on { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.records-filter-chips .chip .ct { margin-left: 3px; color: var(--stone-400); font-weight: 400; }
.records-filter-chips .chip.on .ct { color: rgba(255, 255, 255, .55); }
.records-table-wrap {
background: var(--surface);
border: 1px solid var(--stone-200);
border-radius: var(--radius-lg);
overflow: hidden;
}
.records-table { width: 100%; border-collapse: collapse; }
.records-table thead { background: var(--linen-100); }
.records-table th {
text-align: left; padding: 10px 14px;
font-size: 0.7rem; color: var(--stone-500);
text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
border-bottom: 1px solid var(--stone-200);
}
.records-table td {
padding: 11px 14px; border-bottom: 1px solid var(--linen-100);
font-size: 0.85rem; color: var(--ink-700);
}
.records-table tbody tr:hover { background: var(--linen-50); }
.records-table th.num,
.records-table td.num { text-align: right; font-family: var(--font-mono); }
.r-icon {
width: 24px; height: 24px; border-radius: var(--radius-sm);
display: inline-grid; place-items: center;
flex-shrink: 0; margin-right: 8px; vertical-align: middle;
}
.r-icon .icon { width: 12px; height: 12px; }
.r-icon.health { background: var(--info-100); color: var(--info-700); }
.r-icon.milk { background: var(--linen-200); color: var(--ink-700); }
.r-icon.weight { background: var(--warning-100);color: var(--warning-700); }
.r-icon.shearing { background: var(--linen-200); color: var(--ink-700); }
.r-icon.breeding { background: var(--terracotta-100); color: var(--terracotta-600); }
.records-table .animal-link { color: var(--forest-700); text-decoration: none; font-weight: 500; }
.records-table .animal-link:hover { text-decoration: underline; }
/* Wave 5g: mobile bottom-tab bar */
.bottom-tabbar {
display: none;
position: fixed; left: 0; right: 0; bottom: 0;
background: #fff;
border-top: 1px solid var(--stone-200);
height: calc(78px + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom);
align-items: center;
z-index: 800;
box-shadow: 0 -4px 12px rgba(0, 0, 0, .04);
}
.bottom-tabbar .tab {
flex: 1;
display: flex; flex-direction: column; align-items: center; gap: 4px;
color: var(--stone-500);
font-size: 0.66rem; font-weight: 500;
text-decoration: none; padding: 6px 0;
cursor: pointer;
}
.bottom-tabbar .tab.active { color: var(--ink-900); }
.bottom-tabbar .tab .icon { width: 22px; height: 22px; color: currentColor; }
.bottom-tabbar .tab-fab {
flex: 0 0 auto;
background: var(--forest-700); color: #fff;
width: 54px; height: 54px;
border-radius: var(--radius-full);
display: grid; place-items: center;
box-shadow: 0 6px 16px rgba(45, 106, 79, .4);
margin-top: -26px;
border: 3px solid var(--linen-50);
}
.bottom-tabbar .tab-fab .icon { width: 24px; height: 24px; color: #fff; }
/* Hide sidebar on mobile, show bottom-tab; reverse on desktop */
@media (max-width: 600px) {
.sidebar { display: none !important; }
.bottom-tabbar { display: flex; }
main { padding-bottom: 100px; }
/* Hide the legacy fab on mobile — bottom-tabbar center button replaces it */
.fab { display: none !important; }
}
@media (min-width: 601px) {
.bottom-tabbar { display: none; }
}
/* Wave 5h: mobile More drawer */
.mobile-drawer-overlay {
position: fixed; inset: 0;
background: rgba(0, 0, 0, .4);
backdrop-filter: blur(2px);
z-index: 900;
}
.mobile-drawer {
position: fixed; left: 0; right: 0; bottom: 0;
background: var(--surface);
border-radius: 24px 24px 0 0;
padding: 14px 18px max(28px, env(safe-area-inset-bottom));
z-index: 905;
box-shadow: 0 -8px 24px rgba(0, 0, 0, .18);
max-height: 70vh; overflow-y: auto;
}
.mobile-drawer[hidden],
.mobile-drawer-overlay[hidden] { display: none; }
.mobile-drawer .drawer-handle {
width: 40px; height: 4px;
background: var(--stone-300); border-radius: 2px;
margin: 0 auto 14px;
}
.mobile-drawer .drawer-h {
font-family: var(--font-serif); font-size: 1.15rem;
font-weight: 500; letter-spacing: -0.01em;
margin-bottom: 14px; text-align: center;
}
.mobile-drawer .drawer-list { display: flex; flex-direction: column; gap: 2px; }
.mobile-drawer .drawer-item {
display: flex; align-items: center; gap: 12px;
padding: 12px;
border-radius: var(--radius-md);
color: var(--ink-700); font-weight: 500; font-size: 0.9rem;
text-decoration: none; cursor: pointer;
}
.mobile-drawer .drawer-item:hover { background: var(--linen-100); }
.mobile-drawer .drawer-item .icon {
width: 18px; height: 18px;
color: var(--stone-500);
}
@media (min-width: 601px) {
.mobile-drawer, .mobile-drawer-overlay { display: none !important; }
}
/* Polish: Production cost card — sparkline + serif "$N" carry the
visual; the leading #i-money icon column was redundant and read
as a stray $ glyph next to the value. Hide it for this card only. */
.summary-card.production-cost .summary-icon { display: none; }
.summary-card.production-cost .summary-content { padding-left: 4px; }
/* Polish: alert icons — color-by-severity, icon-by-category */
.alert-item .alert-icon {
display: grid; place-items: center;
width: 28px; height: 28px;
border-radius: var(--radius-sm);
flex-shrink: 0;
}
.alert-item .alert-icon .icon { width: 14px; height: 14px; }
.alert-severity-overdue .alert-icon { background: var(--danger-100); color: var(--danger-700); }
.alert-severity-urgent .alert-icon { background: var(--warning-100); color: var(--warning-700); }
.alert-severity-upcoming .alert-icon { background: var(--info-100); color: var(--info-700); }
/* Polish v2 Fix 1: Animals shell header — flex layout for action button */
.view-header.animals-shell-header {
display: flex; align-items: flex-end;
justify-content: space-between;
gap: 16px; flex-wrap: wrap;
}
.shell-actions { display: flex; align-items: center; gap: 8px; }
.shell-actions .btn .icon { width: 14px; height: 14px; margin-right: 6px; }
.shell-action-group { display: none; align-items: center; gap: 8px; }
body.view-milk .shell-action-milk,
body.view-production-batches .shell-action-production-batches,
body.view-feed .shell-action-feed,
body.view-pastures .shell-action-pastures { display: flex; }
/* Polish v2 Fix 5: canonical category color tokens — used by both the
Wave 4 .cat-pill rules and Chart.js dataset colors so chart slices
match ledger pills. */
:root {
--cat-veterinary: #4286c4;
--cat-feed: #d4933a;
--cat-supplies: #b3a995;
--cat-equipment: #8a8273;
--cat-fencing: #3a3a36;
--cat-facilities: #6b6356;
--cat-utilities: #7a8294;
--cat-labor: #4a4a47;
--cat-processing: #856b58;
--cat-transport: #b86344;
--cat-marketing: #a0563a;
--cat-regulatory: #9c6c14;
--cat-losses: #d65a5a;
--cat-animal-purchase: #2d6a4f;
--cat-breeding: #38866a;
--cat-shearing: #b3a995;
--cat-income: #44a35c;
}
/* Polish v2 Fix 8: Animals table mode — turns #sheep-grid from a CSS
grid back into a normal block when in table view. */
.sheep-grid.animals-table-mode { display: block; }
.animals-table-list {
width: 100%; border-collapse: collapse;
background: var(--surface);
border: 1px solid var(--stone-200);
border-radius: var(--radius-lg);
overflow: hidden;
}
.animals-table-list thead { background: var(--linen-100); }
.animals-table-list th {
text-align: left; padding: 10px 14px;
font-size: 0.7rem; color: var(--stone-500);
text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
border-bottom: 1px solid var(--stone-200);
}
.animals-table-list th.num,
.animals-table-list td.num { text-align: left; font-family: var(--font-mono); }
.animals-table-list td {
padding: 11px 14px; border-bottom: 1px solid var(--linen-100);
font-size: 0.85rem; color: var(--ink-700);
}
.animals-table-list tbody tr:hover { background: var(--linen-50); }
.animals-table-list td.muted { color: var(--stone-500); font-size: 0.78rem; }
/* Polish v2 Fix 6: modal titles use Fraunces serif for typography
consistency with view headers (Wave 1d) and Quick Entry h-titles. */
.modal h2,
.modal h3,
.modal-content h2,
.modal-content h3,
.modal-header h3 {
font-family: var(--font-serif);
font-weight: 500;
letter-spacing: -0.01em;
}
.modal-content h2,
.modal-header h3 { font-size: 1.4rem; }
.modal-content h3 { font-size: 1.15rem; }
/* Polish v2 Fix 16: chat FAB respects bottom safe-area on iOS, and is
hidden on the sheep + batch detail pages where the Wave 3 sticky
add bar already occupies that corner. */
.chat-fab {
bottom: calc(20px + env(safe-area-inset-bottom));
}
body.view-sheep-detail .chat-fab,
body.view-sheep-detail .fab,
body.view-batch-detail .chat-fab,
body.view-batch-detail .fab {
display: none !important;
}
/* ─────────────────────────────────────────────────────────
Wave 6 — Lambing modal + per-lamb rows
───────────────────────────────────────────────────────── */
.lambing-shell {
background: var(--linen-50);
width: min(100%, 720px);
max-height: 90vh;
display: flex; flex-direction: column;
border-radius: var(--radius-lg);
overflow: hidden;
padding: 0;
}
@media (max-width: 600px) {
.lambing-shell { width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; }
}
.lambing-header {
padding: 18px 22px;
display: flex; align-items: flex-start; justify-content: space-between;
border-bottom: 1px solid var(--stone-200);
background: var(--surface);
flex-shrink: 0;
}
.lambing-header h3 {
font-family: var(--font-serif);
font-size: 1.4rem; font-weight: 500;
letter-spacing: -0.02em;
margin: 0;
}
.lambing-header .lambing-sub {
font-size: 0.82rem; color: var(--stone-500);
margin: 4px 0 0;
}
.lambing-header .modal-close {
background: none; border: none; cursor: pointer;
color: var(--stone-500); padding: 4px;
display: grid; place-items: center;
border-radius: var(--radius-sm);
}
.lambing-header .modal-close:hover { background: var(--linen-100); color: var(--ink-900); }
.lambing-header .modal-close .icon { width: 18px; height: 18px; }
.lambing-body { flex: 1; overflow-y: auto; }
.lambing-event,
.lambing-lambs {
padding: 18px 22px;
border-bottom: 1px solid var(--stone-200);
}
.lambing-lambs:last-child { border-bottom: none; }
.lambing-lambs-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px;
}
.lambing-lambs-header h4 {
font-family: var(--font-serif); font-weight: 500;
font-size: 1.1rem; margin: 0;
}
/* Lambing-modal-scoped form-row + form-field (the existing .form-row at
styles.css:1841 uses display:flex which stacks differently than this
2-column grid). Keep generic .form-row alone; scope the grid here. */
.lambing-modal .form-row {
display: grid; grid-template-columns: 1fr 1fr;
gap: 14px; margin-bottom: 12px;
}
@media (max-width: 600px) {
.lambing-modal .form-row { grid-template-columns: 1fr; }
}
.lambing-modal .form-field label {
display: block; font-size: 0.78rem;
color: var(--stone-500); font-weight: 500;
margin-bottom: 4px;
}
.lambing-modal .form-field input[type="text"],
.lambing-modal .form-field input[type="number"],
.lambing-modal .form-field input[type="date"],
.lambing-modal .form-field input[type="time"],
.lambing-modal .form-field select,
.lambing-modal .form-field textarea {
width: 100%; padding: 8px 12px;
border: 1px solid var(--stone-300);
border-radius: var(--radius-md);
font-family: inherit; font-size: 0.9rem;
background: var(--surface);
color: var(--ink-900);
box-sizing: border-box;
}
.lambing-modal .form-field input:focus,
.lambing-modal .form-field select:focus,
.lambing-modal .form-field textarea:focus {
outline: 2px solid var(--forest-500);
outline-offset: -1px; border-color: var(--forest-700);
}
.lambing-modal .form-field textarea { resize: vertical; min-height: 60px; }
/* Per-lamb row */
.lamb-row {
background: var(--surface);
border: 1px solid var(--stone-200);
border-radius: var(--radius-lg);
padding: 16px;
margin-bottom: 12px;
}
.lamb-row:last-child { margin-bottom: 0; }
.lamb-row-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--linen-100);
}
.lamb-order {
font-family: var(--font-serif);
font-size: 1rem; font-weight: 500;
color: var(--ink-900);
}
.lamb-remove {
background: none; border: none; cursor: pointer;
color: var(--stone-500); padding: 4px;
display: grid; place-items: center;
border-radius: var(--radius-sm);
}
.lamb-remove:hover { color: var(--danger-600); background: var(--danger-100); }
.lamb-remove .icon { width: 14px; height: 14px; }
/* Generic .seg used by lamb sex/vigor/status toggles (the existing
.seg.view-mode-toggle is scoped by view-mode-toggle so we add the
bare-class rules here). */
.seg {
display: inline-flex;
background: var(--linen-100);
border-radius: var(--radius-md);
padding: 3px;
flex-wrap: wrap;
}
.seg button {
border: none; background: none; cursor: pointer;
padding: 6px 12px;
font-family: inherit; font-size: 0.78rem; font-weight: 500;
color: var(--ink-700);
border-radius: 7px;
}
.seg button.on {
background: var(--surface);
color: var(--ink-900);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
/* Stepper inside a lamb row reuses Wave 2 .qe-stepper, but make the
number input look at-home in this layout. */
.lamb-row .qe-stepper { padding: 4px; }
.lamb-row .qe-stepper input.lamb-weight {
flex: 1; text-align: center;
border: none; background: none;
font-family: var(--font-serif);
font-size: 1.05rem; font-weight: 500;
color: var(--ink-900);
margin: 0 4px;
width: 100%;
}
.lamb-row .qe-stepper input.lamb-weight:focus { outline: none; }
/* Collapsible per-lamb notes */
.lamb-details {
margin-top: 8px; padding-top: 10px;
border-top: 1px solid var(--linen-100);
}
.lamb-details summary {
font-size: 0.78rem; color: var(--forest-700);
cursor: pointer; font-weight: 500;
padding: 2px 0;
}
.lamb-details textarea {
margin-top: 8px;
}
/* Footer */
.lambing-footer {
padding: 14px 22px;
display: flex; justify-content: flex-end; gap: 8px;
border-top: 1px solid var(--stone-200);
background: var(--surface);
flex-shrink: 0;
}
.lambing-footer .btn-primary {
font-family: inherit; font-weight: 600;
display: inline-flex; align-items: center; gap: 8px;
}
/* Migration banner (Wave 6g) */
.migration-banner {
background: var(--info-100);
border: 1px solid var(--info-700);
color: var(--info-700);
padding: 12px 16px;
border-radius: var(--radius-md);
display: flex; align-items: center; gap: 12px;
margin: 0 0 14px;
font-size: 0.88rem;
flex-wrap: wrap;
}
.migration-banner > div { flex: 1; min-width: 200px; }
.migration-banner .btn-text {
background: none; border: none; cursor: pointer;
color: var(--info-700); font-family: inherit; font-weight: 500;
text-decoration: underline; font-size: 0.82rem;
}
/* ─────────────────────────────────────────────────────────
Wave 7 — Pasture exposure timer
───────────────────────────────────────────────────────── */
.active-sessions {
margin: 0 0 24px;
padding: 18px 22px;
background: linear-gradient(180deg, var(--info-100) 0%, var(--surface) 100%);
border: 1px solid var(--info-100);
border-radius: var(--radius-lg);
}
.active-sessions-header {
display: flex; align-items: center; gap: 10px;
margin-bottom: 14px;
}
.active-sessions-header h3 {
font-family: var(--font-serif);
font-size: 1.05rem; font-weight: 500;
margin: 0;
display: inline-flex; align-items: center; gap: 8px;
}
.active-sessions-header .icon {
width: 18px; height: 18px;
color: var(--info-700);
}
.active-sessions-count {
font-size: 0.78rem;
color: var(--stone-500);
background: var(--surface);
border-radius: 999px;
padding: 2px 10px;
}
.active-sessions-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
}
.active-session-card {
background: var(--surface);
border: 1px solid var(--info-100);
border-radius: var(--radius-md);
padding: 14px 16px;
display: flex; flex-direction: column; gap: 10px;
}
.active-session-card .pasture-name {
font-family: var(--font-serif);
font-size: 1.05rem; font-weight: 500;
color: var(--ink-900);
}
.active-session-card .session-meta {
display: flex; flex-direction: column; gap: 2px;
font-size: 0.82rem;
color: var(--stone-500);
}
.active-session-card .session-meta strong {
color: var(--ink-900); font-weight: 600;
font-variant-numeric: tabular-nums;
}
.active-session-card .session-elapsed {
font-family: var(--font-serif);
font-size: 1.4rem; font-weight: 500;
color: var(--forest-700);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.active-session-card .end-session-btn {
width: 100%;
background: var(--warning-600);
color: white;
border: none;
border-radius: var(--radius-md);
padding: 10px 14px;
font-family: inherit; font-size: 0.9rem; font-weight: 600;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 44px;
}
.active-session-card .end-session-btn:hover {
background: var(--warning-700);
}
/* Per-pasture exposure summary inside the regular pasture card */
.pasture-exposure {
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed var(--stone-200);
display: flex; flex-direction: column; gap: 4px;
}
.exposure-row {
display: flex; justify-content: space-between; align-items: baseline;
font-size: 0.82rem;
}
.exposure-label { color: var(--stone-500); }
.exposure-value {
color: var(--ink-900);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* Activity-modal time-row hints */
.activity-time-row .form-hint {
font-size: 0.72rem;
color: var(--stone-500);
margin-top: 2px;
display: block;
}
@media (max-width: 600px) {
.active-sessions {
padding: 14px 16px;
border-radius: var(--radius-md);
}
.active-sessions-grid {
grid-template-columns: 1fr;
}
.active-session-card .end-session-btn {
min-height: 48px;
font-size: 0.95rem;
}
.active-session-card .session-elapsed {
font-size: 1.6rem;
}
/* Pastures stats bar: wrap cleanly with 5 stats */
#pastures-view .stats-bar {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
/* Card-level Start/End on mobile gets a bigger tap target too */
.pasture-card-actions .btn-warning,
.pasture-card-actions .btn-primary {
min-height: 44px;
}
}
/* ─────────────────────────────────────────────────────────
Wave 8 — Animals list management
───────────────────────────────────────────────────────── */
/* Density toggle inherits .seg.view-mode-toggle styling */
.seg.density-toggle {
display: inline-flex; gap: 2px;
background: var(--linen-100); border-radius: var(--radius-md);
padding: 3px;
}
.seg.density-toggle button {
border: none; background: none; cursor: pointer;
padding: 6px 10px; font-family: inherit;
color: var(--ink-700); border-radius: 6px;
display: inline-flex; align-items: center;
}
.seg.density-toggle button:hover:not(.on) { background: rgba(255,255,255,.5); }
.seg.density-toggle button.on {
background: var(--surface); color: var(--ink-900);
box-shadow: var(--shadow-sm);
}
.seg.density-toggle .icon { width: 14px; height: 14px; }
/* Compact density: 3× cards per row, no photos, condensed body */
.sheep-grid.compact {
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 10px;
}
.sheep-grid.compact .sheep-card-photo { display: none; }
.sheep-grid.compact .sheep-card-body { padding: 12px 14px; }
.sheep-grid.compact .sheep-card-actions { display: none; }
.sheep-grid.compact .sheep-card:hover .sheep-card-actions { display: flex; }
.sheep-grid.compact .sheep-info p:nth-child(n+3) { display: none; }
.sheep-grid.compact .sheep-card .sheep-select-checkbox {
/* Anchor to card top-left even without the photo */
background: var(--surface);
top: 8px; left: 8px;
}
/* Wave 8c — Filter chip rail */
.filter-chips {
display: flex; flex-wrap: wrap; gap: 6px;
align-items: center; flex: 1;
min-height: 36px;
}
.chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 6px 5px 12px;
background: var(--linen-100);
border: 1px solid var(--stone-200);
border-radius: 999px;
font-size: 0.82rem; font-weight: 500;
color: var(--ink-700);
cursor: default;
font-family: inherit;
line-height: 1.2;
}
.chip button {
background: none; border: none; cursor: pointer;
color: var(--stone-500); font-size: 1.05rem;
line-height: 1; padding: 0 4px;
border-radius: 50%;
}
.chip button:hover { color: var(--danger-600); background: var(--linen-50); }
.chip.add-filter,
.chip.clear-all {
background: transparent; border: 1px dashed var(--stone-300);
color: var(--stone-500); cursor: pointer;
padding: 5px 10px;
}
.chip.add-filter:hover,
.chip.clear-all:hover {
border-color: var(--forest-500); color: var(--forest-700);
background: var(--linen-50);
}
.chip.add-filter .icon { width: 12px; height: 12px; }
/* Status-flavored chips */
.chip.f-status-active { background: var(--linen-50); border-color: var(--success-700); color: var(--success-700); }
.chip.f-status-off-site { background: var(--linen-50); border-color: var(--info-700); color: var(--info-700); }
.chip.f-status-sold { background: var(--linen-100); border-color: var(--stone-300); color: var(--stone-500); }
.chip.f-status-deceased { background: var(--linen-100); border-color: var(--stone-300); color: var(--stone-500); }
.chip.f-sex-ewe { background: var(--linen-50); border-color: var(--forest-500); color: var(--forest-700); }
.chip.f-sex-ram { background: var(--linen-50); border-color: var(--warning-700); color: var(--warning-700); }
.chip.f-sex-lamb { background: var(--linen-50); border-color: var(--info-700); color: var(--info-700); }
/* Filter menu popover */
.filter-menu {
position: absolute; z-index: 50;
background: var(--surface);
border: 1px solid var(--stone-200);
border-radius: var(--radius-md);
box-shadow: 0 8px 24px rgba(0,0,0,.12);
padding: 14px;
min-width: 240px;
}
.filter-menu-section { margin-bottom: 14px; }
.filter-menu-section:last-child { margin-bottom: 0; }
.filter-menu-section h5 {
font-size: 0.72rem; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--stone-500);
margin: 0 0 6px;
}
.filter-menu-options { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-menu-options button {
background: var(--linen-50); border: 1px solid var(--stone-200);
border-radius: 999px; padding: 4px 10px;
font-size: 0.78rem; cursor: pointer; font-family: inherit;
color: var(--ink-700);
}
.filter-menu-options button:hover { border-color: var(--forest-500); }
.filter-menu-options button.active {
background: var(--forest-700); color: white; border-color: var(--forest-700);
}
.filter-menu-empty { color: var(--stone-500); font-size: 0.78rem; }
/* Wave 8d — status pill click-to-filter */
.status-pill-clickable { cursor: pointer; }
.status-pill-clickable:hover {
filter: brightness(0.92);
box-shadow: 0 0 0 2px var(--forest-500);
}
/* Wave 8e — Table checkbox column + selected-row affordance */
.flock-table td.checkbox-cell,
.flock-table th.checkbox-cell {
width: 36px;
text-align: center;
padding: 6px 4px;
}
.flock-table tbody tr.selected {
background: var(--linen-100);
}
.flock-table tbody tr.selected td:first-child {
box-shadow: inset 3px 0 0 var(--forest-500);
}
.flock-table .sheep-select-checkbox {
width: 18px; height: 18px;
accent-color: var(--forest-700, var(--primary));
cursor: pointer;
}
/* Wave 8f — Bulk toolbar 9-action menu (sticky + dropdown) */
.bulk-toolbar { position: sticky; top: 0; z-index: 30; }
.bulk-toolbar .selection-context {
font-size: 0.78rem; color: var(--linen-100);
margin-left: 6px; opacity: 0.85;
}
.bulk-menu-group { position: relative; }
.bulk-menu {
position: absolute; right: 0; top: calc(100% + 8px);
background: var(--surface); color: var(--ink-900);
border: 1px solid var(--stone-200);
border-radius: var(--radius-md);
box-shadow: 0 8px 24px rgba(0,0,0,.18);
min-width: 220px; padding: 6px;
z-index: 40;
}
.bulk-menu button {
display: block; width: 100%; text-align: left;
background: none; border: none;
padding: 8px 12px; cursor: pointer;
font-family: inherit; font-size: 0.88rem;
border-radius: var(--radius-sm);
color: var(--ink-900);
}
.bulk-menu button:hover:not(:disabled) { background: var(--linen-100); }
.bulk-menu button:disabled { color: var(--stone-300); cursor: not-allowed; }
.bulk-menu button.danger { color: var(--danger-700); }
.bulk-menu button.danger:hover { background: var(--linen-100); }
.bulk-menu hr {
border: none; border-top: 1px solid var(--stone-200);
margin: 4px 0;
}
/* Wave 8h — Bulk delete preview + warning banner */
.bulk-delete-preview {
list-style: none; padding: 10px 14px; margin: 8px 0;
max-height: 180px; overflow-y: auto;
background: var(--linen-50);
border: 1px solid var(--stone-200);
border-radius: var(--radius-md);
font-size: 0.84rem; color: var(--ink-700);
}
.bulk-delete-preview li { padding: 2px 0; }
.bulk-delete-preview li em { color: var(--stone-500); }
.warn {
display: flex; align-items: flex-start; gap: 8px;
background: var(--linen-100);
border: 1px solid var(--warning-700);
color: var(--warning-700);
padding: 10px 12px; border-radius: var(--radius-md);
font-size: 0.88rem;
margin-bottom: 10px;
}
.warn .icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
#bulk-delete-phrase {
background: var(--linen-100);
border: 1px solid var(--stone-200);
border-radius: var(--radius-sm);
padding: 2px 6px;
font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
font-size: 0.85rem;
letter-spacing: 0.04em;
}
#bulk-delete-confirm-input {
font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
}
/* Wave 8i — Mobile polish */
@media (max-width: 600px) {
.seg.density-toggle { display: none; } /* mobile is always tight */
.bulk-toolbar {
flex-direction: column;
align-items: stretch;
gap: 8px;
position: relative; /* sticky breaks inside scrollable shells */
}
.bulk-toolbar-left,
.bulk-toolbar-actions { width: 100%; }
.bulk-toolbar .btn { min-height: 44px; }
.bulk-menu {
right: auto; left: 0; width: 100%;
min-width: 0;
}
.bulk-menu button { padding: 12px 14px; min-height: 44px; }
.filter-chips { width: 100%; }
.filter-menu { left: 12px !important; right: 12px; min-width: 0; }
.flock-table th.checkbox-cell,
.flock-table td.checkbox-cell { width: 32px; }
.flock-table .sheep-select-checkbox { width: 22px; height: 22px; }
.sheep-grid.compact { grid-template-columns: 1fr; }
}
/* Visible Scan-receipt header button — kept compact on desktop, full-width-ish on mobile */
#financials-scan-receipt-header-btn { min-height: 36px; }
@media (max-width: 600px) {
#financials-scan-receipt-header-btn { min-height: 44px; }
}
/* Vendors table view (toggle on the Vendors page) */
.vendors-grid.vendors-table-mode {
display: block;
grid-template-columns: none;
gap: 0;
}
.vendors-table {
width: 100%;
border-collapse: collapse;
background: var(--surface);
border: 1px solid var(--stone-200);
border-radius: var(--radius-md);
overflow: hidden;
font-size: 0.88rem;
}
.vendors-table th,
.vendors-table td {
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid var(--stone-200);
}
.vendors-table thead th {
background: var(--linen-100);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--stone-500);
font-weight: 500;
}
.vendors-table tbody tr:last-child td { border-bottom: none; }
.vendors-table tbody tr:hover { background: var(--linen-50); }
.vendors-table tbody tr.preferred td:first-child {
box-shadow: inset 3px 0 0 var(--forest-500);
}
.vendors-table tbody tr.inactive { opacity: 0.6; }
.vendors-table .v-name strong { font-weight: 600; color: var(--ink-900); }
.vendors-table .vendor-badge { margin-left: 8px; font-size: 0.7rem; padding: 1px 7px; }
.vendors-table .v-rating { color: #d4a017; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.vendors-table .v-actions { white-space: nowrap; }
.vendors-table .v-actions .btn { margin-right: 4px; }
.vendors-table a { color: var(--forest-700); text-decoration: none; }
.vendors-table a:hover { text-decoration: underline; }
@media (max-width: 720px) {
/* Hide secondary columns on narrow screens — keep Name/Phone/Actions */
.vendors-table th:nth-child(2),
.vendors-table td:nth-child(2),
.vendors-table th:nth-child(3),
.vendors-table td:nth-child(3),
.vendors-table th:nth-child(5),
.vendors-table td:nth-child(5),
.vendors-table th:nth-child(6),
.vendors-table td:nth-child(6) { display: none; }
.vendors-table .v-actions .btn { min-height: 36px; }
}
/* References table view (toggle on the References page) */
.references-grid.references-table-mode {
display: block;
grid-template-columns: none;
gap: 0;
}
.references-table {
width: 100%;
border-collapse: collapse;
background: var(--surface);
border: 1px solid var(--stone-200);
border-radius: var(--radius-md);
overflow: hidden;
font-size: 0.88rem;
}
.references-table th,
.references-table td {
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid var(--stone-200);
vertical-align: top;
}
.references-table thead th {
background: var(--linen-100);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--stone-500);
font-weight: 500;
}
.references-table tbody tr:last-child td { border-bottom: none; }
.references-table tbody tr:hover { background: var(--linen-50); }
.references-table .r-title strong { color: var(--ink-900); font-weight: 600; }
.references-table .r-source { font-size: 0.76rem; color: var(--stone-500); margin-top: 2px; }
.references-table .r-desc { color: var(--stone-500); max-width: 360px; }
.references-table .r-actions { white-space: nowrap; }
.references-table .r-actions .btn { margin-right: 4px; }
.references-table a.btn { text-decoration: none; }
@media (max-width: 720px) {
/* Mobile: hide Description and Attached columns; keep Title / Category / Actions */
.references-table th:nth-child(3),
.references-table td:nth-child(3),
.references-table th:nth-child(4),
.references-table td:nth-child(4) { display: none; }
.references-table .r-actions .btn { min-height: 36px; }
}
/* Notes / Plans table views (toggle on the Knowledge Base sub-pages) */
.notes-grid.notes-table-mode,
.plans-grid.plans-table-mode {
display: block;
grid-template-columns: none;
gap: 0;
}
.notes-table,
.plans-table {
width: 100%;
border-collapse: collapse;
background: var(--surface);
border: 1px solid var(--stone-200);
border-radius: var(--radius-md);
overflow: hidden;
font-size: 0.88rem;
}
.notes-table th, .notes-table td,
.plans-table th, .plans-table td {
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid var(--stone-200);
vertical-align: top;
}
.notes-table thead th,
.plans-table thead th {
background: var(--linen-100);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--stone-500);
font-weight: 500;
}
.notes-table tbody tr:last-child td,
.plans-table tbody tr:last-child td { border-bottom: none; }
.notes-table tbody tr:hover,
.plans-table tbody tr:hover { background: var(--linen-50); }
.notes-table .n-title strong,
.plans-table .p-title strong { color: var(--ink-900); font-weight: 600; }
.notes-table .n-tags { font-size: 0.72rem; color: var(--stone-500); margin-top: 2px; }
.notes-table .n-preview,
.plans-table .p-desc { color: var(--stone-500); max-width: 320px; }
.notes-table .n-actions,
.plans-table .p-actions { white-space: nowrap; }
.notes-table .n-actions .btn,
.plans-table .p-actions .btn { margin-right: 4px; }
/* Plan-status pills (re-use plan-card status colors as small inline pill) */
.plans-table .plan-status-pill {
display: inline-block; font-size: 0.74rem;
padding: 2px 9px; border-radius: 999px;
background: var(--linen-100); color: var(--stone-500);
border: 1px solid var(--stone-200);
}
.plans-table .plan-status-pill.active { background: var(--linen-50); color: var(--success-700); border-color: var(--success-700); }
.plans-table .plan-status-pill.draft { background: var(--linen-100); color: var(--stone-500); }
.plans-table .plan-status-pill.completed { background: var(--linen-50); color: var(--info-700); border-color: var(--info-700); }
.plans-table .plan-status-pill.archived { background: var(--linen-100); color: var(--stone-500); opacity: 0.8; }
@media (max-width: 720px) {
/* Notes mobile: hide Preview, Created, Files cols → keep Title/Category/Actions */
.notes-table th:nth-child(3),
.notes-table td:nth-child(3),
.notes-table th:nth-child(4),
.notes-table td:nth-child(4),
.notes-table th:nth-child(5),
.notes-table td:nth-child(5) { display: none; }
/* Plans mobile: hide Description and Files → keep Title/Category/Status/Target/Actions */
.plans-table th:nth-child(5),
.plans-table td:nth-child(5),
.plans-table th:nth-child(6),
.plans-table td:nth-child(6) { display: none; }
.notes-table .n-actions .btn,
.plans-table .p-actions .btn { min-height: 36px; }
}
/* Pastures / Production table views */
.pasture-grid.pastures-table-mode,
.records-list.production-table-mode {
display: block;
grid-template-columns: none;
gap: 0;
}
.pastures-table,
.production-table {
width: 100%;
border-collapse: collapse;
background: var(--surface);
border: 1px solid var(--stone-200);
border-radius: var(--radius-md);
overflow: hidden;
font-size: 0.88rem;
}
.pastures-table th, .pastures-table td,
.production-table th, .production-table td {
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid var(--stone-200);
vertical-align: top;
}
.pastures-table th.num, .pastures-table td.num,
.production-table th.num, .production-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pastures-table thead th,
.production-table thead th {
background: var(--linen-100);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--stone-500);
font-weight: 500;
}
.pastures-table tbody tr:last-child td,
.production-table tbody tr:last-child td { border-bottom: none; }
.pastures-table tbody tr:hover,
.production-table tbody tr:hover { background: var(--linen-50); }
.pastures-table .pa-name strong,
.production-table .pr-name strong { color: var(--ink-900); font-weight: 600; }
.production-table .pr-batch { font-size: 0.74rem; color: var(--stone-500); margin-top: 2px; }
.pastures-table .pa-actions,
.production-table .pr-actions { white-space: nowrap; }
.pastures-table .pa-actions .btn,
.production-table .pr-actions .btn { margin-right: 4px; }
@media (max-width: 720px) {
/* Pastures mobile: hide Type, Forage, Last activity, 30-day exposure
→ keep Name / Status / Acres / Actions */
.pastures-table th:nth-child(4),
.pastures-table td:nth-child(4),
.pastures-table th:nth-child(5),
.pastures-table td:nth-child(5),
.pastures-table th:nth-child(6),
.pastures-table td:nth-child(6),
.pastures-table th:nth-child(7),
.pastures-table td:nth-child(7) { display: none; }
/* Production mobile: hide Started, Yield, Ready, Files
→ keep Product / Status / Milk / Actions */
.production-table th:nth-child(3),
.production-table td:nth-child(3),
.production-table th:nth-child(5),
.production-table td:nth-child(5),
.production-table th:nth-child(6),
.production-table td:nth-child(6),
.production-table th:nth-child(7),
.production-table td:nth-child(7) { display: none; }
.pastures-table .pa-actions .btn,
.production-table .pr-actions .btn { min-height: 36px; }
}