/* Cane Planner — Public site themes. * * Four palettes (estate / harvest / charcoal / midnight) that mirror * the desktop Tauri app's flat design language. Estate is the * default (matches the desktop's teal Estate theme); the other * three let operators pick a look that suits their environment * (bright mill office, outdoor gate terminal, dark war-room, etc). * * The layout pulls colors exclusively from these tokens so a * data-theme swap on re-skins every public page without * recompiling or reloading. */ /* ── Base tokens (shared across themes) ────────────────────────── */ :root { --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --pill: 9999px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow: 0 4px 16px rgba(0, 0, 0, 0.06); --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ── Estate (default, light teal — matches desktop) ────────────── */ :root, :root[data-theme='estate'] { --bg: #f5f5f4; --bg-soft: #fafaf9; --surface: #ffffff; --surface-hover: #f5f5f4; --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.14); --text: #1c1917; --text-muted: #57534e; --text-dim: #a8a29e; --accent: #0d9488; --accent-hover: #0f766e; --accent-soft: #f0fdfa; --accent-glow: rgba(13, 148, 136, 0.18); --warning: #d97706; --success: #059669; --danger: #dc2626; --nav-bg: rgba(255, 255, 255, 0.85); --nav-border: rgba(0, 0, 0, 0.08); --nav-blur: saturate(1.4) blur(14px); } /* ── Harvest (light warm amber) ────────────────────────────────── */ :root[data-theme='harvest'] { --bg: #fefcf8; --bg-soft: #fef7ed; --surface: #ffffff; --surface-hover: #fdf4e3; --border: rgba(120, 53, 15, 0.10); --border-strong: rgba(120, 53, 15, 0.16); --text: #1c1917; --text-muted: #78350f; --text-dim: #b45309; --accent: #d97706; --accent-hover: #b45309; --accent-soft: #fef3c7; --accent-glow: rgba(217, 119, 6, 0.22); --warning: #ca8a04; --success: #059669; --danger: #dc2626; --nav-bg: rgba(254, 252, 248, 0.88); --nav-border: rgba(120, 53, 15, 0.1); --nav-blur: saturate(1.3) blur(14px); } /* ── Charcoal (dark neutral — matches desktop sidebar) ─────────── */ :root[data-theme='charcoal'] { --bg: #1c1917; --bg-soft: #292524; --surface: #292524; --surface-hover: #3a3633; --border: rgba(250, 250, 249, 0.08); --border-strong: rgba(250, 250, 249, 0.14); --text: #fafaf9; --text-muted: #a8a29e; --text-dim: #78716c; --accent: #14b8a6; --accent-hover: #5eead4; --accent-soft: rgba(20, 184, 166, 0.12); --accent-glow: rgba(20, 184, 166, 0.22); --warning: #f59e0b; --success: #10b981; --danger: #ef4444; --nav-bg: rgba(28, 25, 23, 0.85); --nav-border: rgba(250, 250, 249, 0.08); --nav-blur: saturate(1.3) blur(16px); } /* ── Sunrise (light warm coral) ────────────────────────────────── */ :root[data-theme='sunrise'] { --bg: #fdf6f2; --bg-soft: #fef3ec; --surface: #ffffff; --surface-hover: #fde4d3; --border: rgba(234, 88, 12, 0.12); --border-strong: rgba(234, 88, 12, 0.20); --text: #1c1917; --text-muted: #78350f; --text-dim: #c2410c; --accent: #f97316; --accent-hover: #ea580c; --accent-soft: #fff7ed; --accent-glow: rgba(249, 115, 22, 0.22); --warning: #d97706; --success: #059669; --danger: #dc2626; --nav-bg: rgba(253, 246, 242, 0.88); --nav-border: rgba(234, 88, 12, 0.10); --nav-blur: saturate(1.3) blur(14px); } /* ── Sand (light warm neutral with terracotta accent) ──────────── */ :root[data-theme='sand'] { --bg: #faf5ed; --bg-soft: #fbf5e9; --surface: #ffffff; --surface-hover: #f0e6cf; --border: rgba(0, 0, 0, 0.06); --border-strong: rgba(0, 0, 0, 0.12); --text: #1c1917; --text-muted: #57534e; --text-dim: #a8a29e; --accent: #b45309; --accent-hover: #92400e; --accent-soft: #fef3c7; --accent-glow: rgba(180, 83, 9, 0.22); --warning: #ca8a04; --success: #059669; --danger: #dc2626; --nav-bg: rgba(250, 245, 237, 0.88); --nav-border: rgba(0, 0, 0, 0.06); --nav-blur: saturate(1.3) blur(14px); } /* ── Aurora (dark violet — the new mixed-theme addition) ───────── */ :root[data-theme='aurora'] { --bg: #0f0817; --bg-soft: #171022; --surface: #22172f; --surface-hover: #32254a; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --text: #faf5ff; --text-muted: #c4b5fd; --text-dim: #8b5cf6; --accent: #a855f7; --accent-hover: #9333ea; --accent-soft: rgba(168, 85, 247, 0.14); --accent-glow: rgba(168, 85, 247, 0.28); --warning: #fbbf24; --success: #34d399; --danger: #f87171; --nav-bg: rgba(15, 8, 23, 0.85); --nav-border: rgba(255, 255, 255, 0.08); --nav-blur: saturate(1.4) blur(20px); } /* ── Midnight (deep navy with emerald accent) ──────────────────── */ :root[data-theme='midnight'] { --bg: #0a0e13; --bg-soft: #0f1419; --surface: #141b23; --surface-hover: #1a232d; --border: rgba(232, 236, 241, 0.08); --border-strong: rgba(232, 236, 241, 0.14); --text: #e8ecf1; --text-muted: #8899aa; --text-dim: #5a6b7c; --accent: #10b981; --accent-hover: #34d399; --accent-soft: rgba(16, 185, 129, 0.12); --accent-glow: rgba(16, 185, 129, 0.25); --warning: #f59e0b; --success: #10b981; --danger: #ef4444; --nav-bg: rgba(10, 14, 19, 0.85); --nav-border: rgba(232, 236, 241, 0.08); --nav-blur: saturate(1.4) blur(20px); } /* ── Primitives: reset, typography, primary/secondary buttons ──── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } .page-content { flex: 1; } a { text-decoration: none; color: inherit; } .section-label { font-size: 11px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-mono); margin-bottom: 1rem; } .section-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.75rem; color: var(--text); } .section-desc { font-size: 1rem; color: var(--text-muted); max-width: 520px; line-height: 1.6; margin-bottom: 3rem; } .btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; padding: 0.75rem 1.5rem; border-radius: var(--pill); text-decoration: none; font-size: 0.875rem; font-weight: 600; border: 1px solid var(--accent); cursor: pointer; transition: background 0.15s var(--ease), border-color 0.15s var(--ease); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-secondary { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--text); padding: 0.75rem 1.5rem; border-radius: var(--pill); border: 1px solid var(--border-strong); text-decoration: none; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background 0.15s var(--ease), border-color 0.15s var(--ease); } .btn-secondary:hover { background: var(--surface-hover); border-color: var(--accent); color: var(--text); } /* ── Nav ───────────────────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; /* Default: transparent over the hero image; the .nav--scrolled modifier is applied by the layout's scroll listener and re-introduces the theme's nav_bg + blur + border. */ background: transparent; border-bottom: 1px solid transparent; transition: background 0.2s var(--ease), border-color 0.2s var(--ease), backdrop-filter 0.2s var(--ease); } .nav.nav--scrolled { background: var(--nav-bg); backdrop-filter: var(--nav-blur); -webkit-backdrop-filter: var(--nav-blur); border-bottom-color: var(--nav-border); } /* Over the hero image the nav text + brand need to be white for contrast. .nav--over-hero is applied to the nav when the page hasn't scrolled past the hero; removed once the nav turns solid so theme colors take over. */ .nav--over-hero .nav-brand, .nav--over-hero .nav-links a:not(.nav-cta) { color: #ffffff; } .nav--over-hero .nav-brand svg { color: #ffffff; } .nav--over-hero .nav-links a:not(.nav-cta):hover { color: rgba(255, 255, 255, 0.75); } .nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 2rem; height: 64px; display: flex; align-items: center; justify-content: space-between; } .nav-brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em; } .nav-brand svg { width: 22px; height: 22px; color: var(--accent); } .nav-links { display: flex; align-items: center; gap: 0; } .nav-links a { color: var(--text-muted); font-size: 0.8125rem; font-weight: 500; padding: 0.5rem 1rem; transition: color 0.15s var(--ease); letter-spacing: 0.01em; } .nav-links a:hover { color: var(--text); } .nav-cta { background: var(--accent) !important; color: #fff !important; padding: 0.5rem 1.125rem !important; border-radius: var(--pill); margin-left: 0.5rem !important; transition: background 0.15s var(--ease) !important; } .nav-cta:hover { background: var(--accent-hover) !important; } /* ── Theme picker (nav control) ────────────────────────────────── */ .theme-picker { display: inline-flex; align-items: center; gap: 4px; margin-right: 0.5rem; padding: 4px; border-radius: var(--pill); background: var(--bg-soft); border: 1px solid var(--border); } .theme-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border-strong); cursor: pointer; padding: 0; transition: transform 0.15s var(--ease); } .theme-swatch:hover { transform: scale(1.12); } .theme-swatch.active { outline: 2px solid var(--accent); outline-offset: 1px; } .theme-swatch.estate { background: #0d9488; } .theme-swatch.harvest { background: #d97706; } .theme-swatch.sunrise { background: #f97316; } .theme-swatch.sand { background: #b45309; } .theme-swatch.charcoal { background: #1c1917; border-color: rgba(255, 255, 255, 0.25); } .theme-swatch.midnight { background: #0a0e13; border-color: rgba(232, 236, 241, 0.3); } .theme-swatch.aurora { background: #0f0817; border-color: rgba(168, 85, 247, 0.45); } /* ── Footer ────────────────────────────────────────────────────── */ .footer { border-top: 1px solid var(--border); padding: 3rem 2rem; max-width: 1200px; margin: 0 auto; width: 100%; } .footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 3rem; } .footer-col h4 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 1rem; font-family: var(--font-mono); } .footer-col a { display: block; color: var(--text-muted); font-size: 0.8125rem; padding: 0.25rem 0; transition: color 0.15s var(--ease); } .footer-col a:hover { color: var(--text); } .footer-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--text-dim); } .footer-brand { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); } .footer-brand svg { width: 18px; height: 18px; color: var(--accent); } /* ── Nav hamburger (mobile) ────────────────────────────────────── */ .nav-hamburger { display: none; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0.5rem; } .nav-hamburger svg { width: 22px; height: 22px; } /* ── Download app row (App Store / Play / macOS / Windows) ─────── */ .download-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .download-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0.5rem 0.875rem; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--pill); color: #ffffff; font-size: 0.75rem; font-weight: 600; text-decoration: none; transition: background 0.15s var(--ease), border-color 0.15s var(--ease); } .download-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--accent); } .download-btn svg { width: 14px; height: 14px; flex-shrink: 0; } .download-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.5); font-family: var(--font-mono); margin-right: 4px; } /* ── Thank-you pill eyebrow ────────────────────────────────────── */ .notice-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); background: var(--accent-soft); padding: 0.375rem 0.875rem; border-radius: var(--pill); border: 1px solid rgba(255, 255, 255, 0.1); } .notice-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* ── Small inline employee-IT tip line ─────────────────────────── */ .staff-tip { font-size: 11px; color: rgba(255, 255, 255, 0.55); line-height: 1.55; } .staff-tip strong { color: rgba(255, 255, 255, 0.82); font-weight: 600; } /* ── Portal shell (2-col sidebar + content) ───────────────────── */ /* Used by the farmer/cell-leader portal. Mirrors the desktop Tauri app's layout tokens so web + desktop feel like siblings. */ :root { --sidebar-width: 248px; --sidebar-bg: #1c1917; --sidebar-text: #fafaf9; --sidebar-muted: rgba(250, 250, 249, 0.55); --sidebar-hover: rgba(255, 255, 255, 0.08); --sidebar-active: rgba(255, 255, 255, 0.14); --sidebar-border: rgba(255, 255, 255, 0.08); } .portal { min-height: 100vh; display: grid; grid-template-columns: 48px 208px 1fr; background: var(--surface); } /* ── Column 1: Rail (narrow icon column, dark) ── */ .portal-rail { background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; align-items: center; border-right: 1px solid var(--sidebar-border); position: sticky; top: 0; height: 100vh; } .rail-logo { height: 52px; width: 100%; display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; } .rail-logo svg { width: 20px; height: 20px; } .rail-items { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1px; overflow-y: auto; padding: 4px 0; } .rail-btn { position: relative; width: 32px; height: 32px; margin: 0 auto; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--sidebar-muted); background: none; border: none; border-radius: 6px; cursor: pointer; text-decoration: none; transition: color 0.12s var(--ease), background 0.12s var(--ease); } .rail-btn svg { width: 16px; height: 16px; } .rail-btn:hover { color: var(--sidebar-text); background: var(--sidebar-hover); } .rail-btn.active { color: var(--accent); background: var(--sidebar-active); } .rail-btn.active::before { content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; background: var(--accent); border-radius: 0 3px 3px 0; } .rail-bottom { width: 100%; padding: 10px 0 14px; display: flex; justify-content: center; border-top: 1px solid var(--sidebar-border); flex-shrink: 0; } .rail-btn-logout { color: var(--sidebar-muted); } .rail-btn-logout:hover { color: #fca5a5; background: rgba(252, 165, 165, 0.08); } /* ── Column 2: Panel (wider sub-nav) ── */ .portal-panel { background: var(--bg-soft); color: var(--text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .panel-head { min-height: 52px; padding: 0 14px; display: flex; flex-direction: column; justify-content: center; flex-shrink: 0; } .panel-title { font-size: 10px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--font-mono); } .panel-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 1px; } .panel-item { display: block; padding: 6px 10px; font-size: 11px; font-weight: 500; color: var(--text-muted); text-decoration: none; border-radius: 6px; transition: background 0.12s var(--ease), color 0.12s var(--ease); } .panel-item:hover { background: var(--surface-hover); color: var(--text); } .panel-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } /* Sandbox indicator — sits at the very top of the panel so test users always know they're not on live data. */ .panel-sandbox { margin: 12px 12px 0; padding: 8px 10px; display: flex; align-items: center; gap: 8px; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.35); border-radius: 8px; color: #92400e; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-mono); flex-shrink: 0; } .panel-sandbox::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; flex-shrink: 0; animation: pulse-dot 2s ease-in-out infinite; } .panel-sandbox-body { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; } .panel-sandbox-body small { font-size: 9px; font-weight: 500; text-transform: none; letter-spacing: 0; color: rgba(146, 64, 14, 0.7); font-family: var(--font-sans); } .panel-themes { padding: 8px 14px 10px; display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; } .panel-themes-label { font-size: 8px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-mono); } .panel-themes .theme-picker { margin-right: 0; padding: 2px; gap: 2px; } .panel-themes .theme-swatch { width: 14px; height: 14px; } .panel-foot { padding: 8px 14px 10px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .foot-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 10px; flex-shrink: 0; } .foot-info { flex: 1; min-width: 0; } .foot-name { color: var(--text); font-weight: 600; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .foot-role { color: var(--text-muted); font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-mono); } .portal-main { min-width: 0; padding: 20px 24px 28px; background: var(--surface); color: var(--text); } .portal-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } .portal-header h1 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); margin-bottom: 2px; } .portal-subtitle { font-size: 11px; color: var(--text-muted); } /* Cards + grid primitives for portal pages. Borderless by default * so a page with 4-5 cards doesn't read as 4-5 bright-outlined boxes. * The desktop admin app uses the same pattern — one outer shell, no * inner borders — and the user specifically flagged the web as * border-heavy relative to that. Card separation comes from the * surface/background contrast + generous padding + the soft shadow. */ .portal-card { background: var(--surface); border-radius: 10px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .portal-card + .portal-card { margin-top: 12px; } .portal-card-title { font-size: 9px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-mono); margin-bottom: 10px; } .kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; } @media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .kpi-grid { grid-template-columns: 1fr; } } .kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; } .kpi-label { font-size: 9px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-mono); margin-bottom: 4px; } .kpi-value { font-size: 1.125rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; line-height: 1.15; } .kpi-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; } .portal-table { width: 100%; border-collapse: collapse; font-size: 11px; } .portal-table th { background: var(--bg-soft); padding: 7px 12px; text-align: left; font-weight: 600; color: var(--text-dim); text-transform: uppercase; font-size: 9px; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); white-space: nowrap; } .portal-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--text); } .portal-table tr:last-child td { border-bottom: none; } .portal-table tr.clickable { cursor: pointer; } .portal-table tr.clickable:hover td { background: var(--bg-soft); } .portal-table td.r, .portal-table th.r { text-align: right; font-variant-numeric: tabular-nums; } .portal-empty { text-align: center; padding: 36px 20px; color: var(--text-muted); font-size: 11px; } /* Compact form fields used inside portal cards (gate pass create, chain request, etc.). Two-column grid: label + input. */ .form-grid { display: grid; grid-template-columns: 130px 1fr; gap: 10px 14px; align-items: center; } @media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; gap: 4px 0; } } .form-label { font-size: 11px; font-weight: 600; color: var(--text-muted); } .form-input { width: 100%; padding: 7px 10px; font-size: 12px; font-family: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px; outline: none; transition: border-color 0.12s var(--ease); } .form-input:focus { border-color: var(--accent); } select.form-input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 28px; } /* Gate pass detail grid — 2-up on wide screens, stacks on narrow. */ .gate-pass-grid { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: 12px; } .gate-pass-grid .portal-card { margin: 0; } @media (max-width: 900px) { .gate-pass-grid { grid-template-columns: 1fr; } } /* Chain movement forms — three side-by-side action cards for borrow / return / report-lost. Each card has an icon + title + one-liner hint, a two-column field block, and a full-width submit. Cards stack on narrow screens. */ .chain-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 4px; } @media (max-width: 900px) { .chain-form-grid { grid-template-columns: 1fr; } } .chain-form { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 12px; } .chain-form.borrow { border-color: var(--accent); background: var(--accent-soft); } .chain-form.return { } .chain-form.lost { border-color: rgba(220, 38, 38, 0.25); background: rgba(220, 38, 38, 0.04); } .chain-form-head { display: flex; align-items: center; gap: 10px; } .chain-form-icon { width: 28px; height: 28px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; } .chain-form-icon svg { width: 14px; height: 14px; } .chain-form.lost .chain-form-icon { color: #dc2626; border-color: rgba(220, 38, 38, 0.3); } .chain-form-title { font-size: 12px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .chain-form-hint { font-size: 10px; color: var(--text-muted); margin-top: 1px; } .chain-form-fields { display: flex; flex-direction: column; gap: 8px; } .chain-form-field { display: flex; flex-direction: column; gap: 4px; } .chain-form-field .form-label { font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-mono); } .chain-form-submit { width: 100%; justify-content: center; margin-top: 2px; } .chain-form-submit.danger { border-color: #dc2626 !important; color: #dc2626 !important; background: transparent !important; } .chain-form-submit.danger:hover { background: rgba(220, 38, 38, 0.08) !important; } /* UAT banner — sits at the very top of the portal main column when a live certification run is active for the farmer's mill. Distinct blue/indigo styling so it is visually separate from the amber "SANDBOX" pill on the sidebar (which marks test accounts, a different concept). Real allocations + real gate passes flow underneath; the banner is the social cue that the chain is being verified end-to-end. */ .uat-banner { display: flex; align-items: center; gap: 20px; margin: 0 0 20px; padding: 18px 22px; background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%); border-radius: 12px; color: #fff; box-shadow: 0 4px 16px rgba(79, 70, 229, 0.25); } .uat-banner-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .uat-banner-tag { font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, 0.85); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-mono); } .uat-banner-alloc { display: flex; align-items: baseline; gap: 8px; font-size: 20px; color: #fff; font-weight: 700; } .uat-alloc-num { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 22px; } .uat-alloc-sep { color: rgba(255, 255, 255, 0.5); font-weight: 400; } .uat-alloc-label { color: rgba(255, 255, 255, 0.85); font-size: 12px; font-weight: 500; margin-left: 6px; } .uat-banner-note { font-size: 11px; color: rgba(255, 255, 255, 0.75); line-height: 1.5; } .uat-banner-cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; background: #fff; color: #4f46e5; border-radius: 8px; font-size: 13px; font-weight: 700; text-decoration: none; transition: transform 0.12s, box-shadow 0.12s; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); } .uat-banner-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); } @media (max-width: 640px) { .uat-banner { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; } .uat-banner-cta { justify-content: center; } } /* Farmer-agent "acting as" banner. Shown on every farmer-portal screen when the session carries an acting_as_id so the agent never loses track of whose account they're operating under. Solid amber gradient — distinct from the indigo UAT banner. */ .acting-banner { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; padding: 14px 18px; background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); border-radius: 10px; color: #fff; box-shadow: 0 2px 10px rgba(217, 119, 6, 0.2); font-size: 12px; } .acting-banner-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .acting-banner-tag { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.9); font-family: var(--font-mono); } .acting-banner-name { font-size: 16px; font-weight: 700; color: #fff; } .acting-banner-note { font-size: 11px; color: rgba(255, 255, 255, 0.88); margin-top: 2px; } .acting-banner-actions { display: flex; gap: 12px; flex-shrink: 0; align-items: center; } .acting-banner-link { color: #fff; font-size: 12px; font-weight: 600; text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; } .acting-banner-link:hover { opacity: 0.85; } .acting-banner-release { color: #fff; } @media (max-width: 720px) { .acting-banner { flex-direction: column; align-items: stretch; } .acting-banner-actions { justify-content: flex-end; } } /* Test delivery notice — shown above the form when the farmer's allocation is a UAT / System Test sandbox row. Tinted indigo background + icon so it reads as "this is test flow, different rules". */ .test-delivery-notice { display: flex; align-items: center; gap: 10px; margin: 14px 0 14px; padding: 10px 14px; background: #4f46e5; border-radius: 8px; color: #fff; } .test-delivery-icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: #fff; } .test-delivery-icon svg { width: 16px; height: 16px; } .test-delivery-body { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .test-delivery-tag { font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, 0.95); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-mono); flex-shrink: 0; } .test-delivery-text { font-size: 11px; color: rgba(255, 255, 255, 0.85); line-height: 1.45; } /* Vehicle search dropdown on the gate pass create form. */ .vehicle-search-wrap { position: relative; } .vehicle-search-dropdown { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 40; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; max-height: 260px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } .vehicle-search-item { display: block; width: 100%; text-align: left; padding: 9px 12px; background: transparent; border: none; border-bottom: 1px solid var(--border); color: var(--text); cursor: pointer; font: inherit; } .vehicle-search-item:last-child { border-bottom: none; } .vehicle-search-item:hover { background: var(--surface-2, rgba(0,0,0,0.03)); } .vehicle-search-item .vehicle-reg { font-size: 13px; font-weight: 700; color: var(--text); font-family: var(--font-mono); } .vehicle-search-item .vehicle-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; } /* Inline bundle-ticket inputs on the gate pass create form. Sits below the "Bundles to send" number input in the same card and renders one row per bundle as the farmer changes the count. */ .bundle-tickets-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .bundle-tickets-label { font-size: 11px; font-weight: 600; color: var(--text); letter-spacing: 0.02em; text-transform: uppercase; } .bundle-tickets-hint { font-size: 10px; color: var(--text-muted); margin: 2px 0 10px; line-height: 1.45; } .bundle-tickets-grid { display: flex; flex-direction: column; gap: 6px; } .bundle-ticket-row { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 10px; } .bundle-ticket-label { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* Gate pass row badges — UAT / Test / Project chips that sit next to the QR code in the list view. Kept tiny so they don't fight the mono QR code for attention. */ .gp-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-mono); vertical-align: middle; } .gp-badge-test { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; } .gp-badge-demo { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; } /* "Example gate pass" card — sticky tutorial entry at the top of the farmer's gate pass list. Always shown so a farmer who's never issued a pass has something to tap to understand the detail view. */ .example-pass-card { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 14px 16px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(79, 70, 229, 0.04)); border: 1px dashed rgba(99, 102, 241, 0.45); border-radius: 12px; color: var(--text); transition: border-color 0.12s, background 0.12s; } .example-pass-card:hover { border-color: #6366f1; background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(79, 70, 229, 0.08)); } .example-pass-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: rgba(99, 102, 241, 0.18); color: #4f46e5; display: flex; align-items: center; justify-content: center; } .example-pass-body { flex: 1; min-width: 0; } .example-pass-tag { font-size: 10px; font-weight: 700; color: #4f46e5; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-mono); margin-bottom: 3px; } .example-pass-title { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .example-pass-sub { font-size: 11px; color: var(--text-muted); line-height: 1.5; margin-top: 3px; } .example-pass-chev { flex-shrink: 0; color: var(--text-muted); } /* Bundles validation error state. */ .form-input.input-error { border-color: #dc2626; background: rgba(220, 38, 38, 0.04); } .bundles-error { margin-top: 6px; font-size: 11px; color: #dc2626; font-weight: 600; } /* Peer group cards — grid of compact cards, one per mill group, styled to match the Mill Group Quota card (KPIs + progress bar). The farmer's own group gets an accent background + thicker border so it pops out of the grid at a glance. */ .peer-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 4px; } /* Peer cards — subtle soft-background tiles in a grid. The previous * "card-per-row with coloured border-states" produced 6-7 competing * rectangles per page on HVE-sized mills; the desktop admin * dashboards use a borderless-tile treatment which the user * preferred. Own-group still gets accent-soft so it reads as "you", * and ahead/behind now surface through the footer status colour * rather than border tints. */ .peer-group-card { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; border-radius: 8px; background: var(--bg-soft); } .peer-group-card.mine { background: var(--accent-soft); } .peer-group-head { display: flex; align-items: center; gap: 8px; } .peer-group-name { font-size: 13px; font-weight: 700; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .peer-group-badge { font-size: 9px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 6px; background: var(--accent-soft); border-radius: 999px; flex-shrink: 0; } .peer-group-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px; } .peer-group-stat .kpi-label { font-size: 9px; margin-bottom: 2px; } .peer-group-stat .kpi-value { font-size: 12px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } /* Reuse the shared quota-progress bar + marker defined above — no new rules, just a behind/ahead variant on the fill. */ .quota-progress-bar.behind { background: #dc2626; } .quota-progress-bar.ahead { background: #16a34a; } .peer-group-footer { font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; } .peer-group-status { display: inline-block; } /* Mill group quota progress bar — shows delivered vs expected for the active season. The filled portion tracks actual progress; a vertical marker shows the pro-rata "expected by today" line so the farmer can see at a glance whether the group is ahead or behind the curve. */ .quota-progress { position: relative; height: 8px; background: color-mix(in srgb, var(--text) 8%, transparent); border-radius: 999px; margin-top: 6px; overflow: visible; } .quota-progress-bar { position: absolute; top: 0; left: 0; bottom: 0; background: var(--accent); border-radius: 999px; max-width: 100%; transition: width 0.4s var(--ease); } .quota-progress-marker { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); transform: translateX(-1px); } /* Farmer Assist conversation thread — chat-style alternating bubbles. "mine" bubbles align right with accent fill; "theirs" align left with neutral fill. Lightweight enough to render without any JS. */ .assist-thread { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 8px; } .assist-message { max-width: 78%; padding: 10px 14px; border-radius: 10px; font-size: 12px; line-height: 1.5; border: 1px solid var(--border); } .assist-message.mine { align-self: flex-end; background: var(--accent-soft); border-color: var(--accent); } .assist-message.theirs { align-self: flex-start; background: var(--bg-soft); } .assist-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-mono); } .assist-author { font-weight: 700; color: var(--text); } .assist-role { color: var(--accent); } .assist-time { margin-left: auto; } .assist-body { color: var(--text); white-space: pre-wrap; } /* Reassurance card shown when the 14-day strip is empty for the farmer's cell but the outgrower group still has an upcoming harvest window. Stops the blank strip from reading as "I've been forgotten". Soft tint rather than alarm colours — the point is to calm, not alert. */ .schedule-reassure { padding: 14px 16px; background: color-mix(in srgb, var(--accent) 6%, transparent); margin-bottom: 12px; } .schedule-reassure-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .schedule-reassure-body { font-size: 12px; color: var(--text-muted); line-height: 1.55; } .schedule-reassure-list { list-style: none; padding: 6px 0 4px; margin: 0; display: flex; flex-direction: column; gap: 4px; } .schedule-reassure-list li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); } .schedule-reassure-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .schedule-reassure-dot.dot-burn { background: #ea580c; } .schedule-reassure-dot.dot-deliver { background: #0284c7; } /* 30-day calendar grid — 7 columns × 5 rows. Starts on the Monday of the week containing today so today lands in its natural weekday column. Past days in that first week + padding in the last week render as dimmed `.outside` cells so the grid stays rectangular. Dots + tonnage numbers inside each cell are the at-a-glance signal; hover shows the full label. */ .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 8px; } .calendar-dow { font-size: 9px; font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: 4px 6px 2px; } .cal-day { min-height: 74px; padding: 6px 7px; background: var(--bg-soft); border-radius: 6px; display: flex; flex-direction: column; gap: 2px; } .cal-day.outside { background: transparent; opacity: 0.35; } .cal-day.today { background: color-mix(in srgb, var(--accent) 14%, var(--bg-soft)); outline: 1.5px solid var(--accent); outline-offset: -1px; } .cal-day.has-alloc { background: color-mix(in srgb, var(--accent) 8%, var(--bg-soft)); } .cal-day-num { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1; } .cal-day-sub { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-mono); margin-top: 1px; } .cal-dots { display: flex; gap: 3px; margin-top: 4px; min-height: 6px; } .cal-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .cal-dot-projected { opacity: 0.5; } .cal-tonnage { margin-top: auto; font-size: 10px; font-weight: 700; color: var(--text); font-family: var(--font-mono); } .cal-tonnage.cal-projected, .cal-projected { color: var(--text-muted); font-weight: 600; font-style: italic; } .cal-alloc-badge { margin-top: auto; font-size: 10px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); } @media (max-width: 720px) { .cal-day { min-height: 58px; padding: 4px 5px; } .cal-day-num { font-size: 12px; } .cal-tonnage, .cal-alloc-badge { font-size: 9px; } } /* Schedule 14-day strip — horizontally scrollable row of day cards used by the farmer Schedule page. Today's card is highlighted, empty days dim out so the eye lands on real allocations. */ .schedule-strip { display: grid; grid-template-columns: repeat(14, minmax(86px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 4px; } @media (max-width: 1100px) { .schedule-strip { grid-template-columns: repeat(7, minmax(96px, 1fr)); } } .schedule-day { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 10px 8px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 100px; } .schedule-day.empty { opacity: 0.55; } .schedule-day.today { background: var(--accent-soft); border-color: var(--accent); } .schedule-day .day-of-week { font-size: 9px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-mono); } .schedule-day .day-of-month { font-size: 1.25rem; font-weight: 700; color: var(--text); line-height: 1.1; margin-top: 1px; } .schedule-day .day-month { font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; } .schedule-day .day-tonnage { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; } .schedule-day .day-bundles { font-size: 9px; color: var(--text-muted); margin-top: 1px; } .schedule-day .day-delivered { font-size: 9px; color: var(--success, #16a34a); margin-top: 3px; font-weight: 600; } .schedule-day .day-empty { margin-top: 12px; font-size: 13px; color: var(--text-dim); } .schedule-day.today .day-of-week, .schedule-day.today .day-month { color: var(--accent); } /* ── Schedule v2: cell-scoped burn + deliver + allocation overlay ── */ .schedule-day .day-header { display: flex; flex-direction: column; align-items: center; gap: 1px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--border); } .schedule-day .day-body { display: flex; flex-direction: column; gap: 3px; min-height: 48px; } .schedule-day.has-activity { border-color: var(--accent-soft); } .schedule-day.has-alloc { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft) inset; } .day-row { display: flex; align-items: center; gap: 4px; font-size: 10px; } .day-row-label { color: var(--text-muted); flex: 0 0 auto; } .day-row-val { margin-left: auto; font-weight: 700; color: var(--text); } .day-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .dot-burn { background: #ea580c; } .dot-deliver { background: #0ea5e9; } .dot-alloc { background: var(--accent); } .day-burn .day-row-val { color: #ea580c; } .day-deliver .day-row-val { color: #0ea5e9; } .day-alloc .day-row-val { color: var(--accent); } .day-delivered-line { font-size: 9px; color: var(--success, #16a34a); padding-left: 9px; } .day-delivered-line .day-row-val { color: var(--success, #16a34a); } /* Projected (group-plan) rows — softer than confirmed cell data so farmers understand "~X t" is an estimate, not a personal commitment. Dashed divider + muted text; the dot keeps its colour so the row is still readable at a glance. */ .day-row.day-projected { opacity: 0.82; font-style: italic; } .day-row.day-projected .day-row-label, .day-row.day-projected .day-row-val { color: var(--text-muted); } .schedule-projected-hint { margin-top: 10px; font-size: 10px; color: var(--text-muted); line-height: 1.5; } .day-projected-tag { font-family: var(--font-mono); font-size: 9px; padding: 1px 5px; border-radius: 4px; background: var(--bg-soft); color: var(--text); font-weight: 600; font-style: normal; } /* Legend above the strip */ .schedule-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; font-size: 10px; color: var(--text-muted); } .legend-item { display: inline-flex; align-items: center; gap: 6px; } .legend-swatch { width: 10px; height: 10px; border-radius: 50%; } .legend-burn { background: #ea580c; } .legend-deliver { background: #0ea5e9; } .legend-alloc { background: var(--accent); } /* Cell context banner above the KPI grid */ .cell-context { padding: 12px 16px; margin-bottom: 12px; } .cell-context-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .cell-context-label { font-size: 9px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; } .cell-context-value { font-size: 14px; font-weight: 700; color: var(--text); margin-top: 2px; display: inline-flex; align-items: center; gap: 6px; } /* Solid-colour KPI cards — saturated fills (not pale tints) so the * burn/deliver and allocation/delivered pairs read as a bold group * at a glance. White text throughout for contrast; label + sub slightly * muted via alpha so the value dominates. */ .kpi-card.kpi-burn { background: #ea580c; border-color: #ea580c; color: #fff; } .kpi-card.kpi-burn .kpi-label, .kpi-card.kpi-burn .kpi-sub { color: rgba(255,255,255,0.85); } .kpi-card.kpi-burn .kpi-value { color: #fff; } .kpi-card.kpi-deliver { background: #0284c7; border-color: #0284c7; color: #fff; } .kpi-card.kpi-deliver .kpi-label, .kpi-card.kpi-deliver .kpi-sub { color: rgba(255,255,255,0.85); } .kpi-card.kpi-deliver .kpi-value { color: #fff; } .kpi-card.kpi-alloc { background: #16a34a; border-color: #16a34a; color: #fff; } .kpi-card.kpi-alloc .kpi-label, .kpi-card.kpi-alloc .kpi-sub { color: rgba(255,255,255,0.85); } .kpi-card.kpi-alloc .kpi-value { color: #fff; } .kpi-card.kpi-delivered { background: #059669; border-color: #059669; color: #fff; } .kpi-card.kpi-delivered .kpi-label, .kpi-card.kpi-delivered .kpi-sub { color: rgba(255,255,255,0.85); } .kpi-card.kpi-delivered .kpi-value { color: #fff; } /* Solid notice banner — replaces the "thin left border on white card" * pattern used on tutorial / callout banners across the farmer portal. */ .portal-notice { background: #6366f1; border: 1px solid #4f46e5; border-radius: 10px; padding: 14px 18px; margin-bottom: 14px; color: #fff; font-size: 12px; line-height: 1.55; } .portal-notice strong { color: #fff; } /* Farmer web portal — notifications page tabs + list. Deliberately * close to the desktop bell treatment so the two experiences read the * same at a glance: coloured category dot, title + body + time, mark- * read affordance on unread rows. */ .notif-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 12px; } .notif-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-decoration: none; border-radius: 9999px; background: var(--bg-soft); } .notif-tab:hover { color: var(--text); background: var(--surface-hover); } .notif-tab.active { background: var(--accent); color: #fff; } .notif-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 9999px; background: rgba(0,0,0,0.08); font-size: 10px; font-weight: 700; } .notif-tab.active .notif-tab-count { background: rgba(255,255,255,0.25); color: #fff; } .notif-list { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border-radius: 10px; overflow: hidden; } /* Rows render as a single list with row-dividers — one outer card, * not N cards with N borders. Matches the desktop bell dropdown's * look, which the user prefers to the previous "boxed row per row" * treatment with a bright left stripe. */ .notif-row { display: flex; gap: 12px; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--border); } .notif-row:last-child { border-bottom: none; } /* Unread state: subtle tinted background instead of a thick accent * strip — signals without screaming. */ .notif-row.notif-unread { background: var(--accent-soft); } .notif-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; } .notif-dot-announcements { background: var(--accent); } .notif-dot-approvals { background: #0284c7; } .notif-dot-deliveries { background: #16a34a; } .notif-dot-alerts { background: #ea580c; } .notif-body { flex: 1; min-width: 0; } .notif-title { font-size: 13px; font-weight: 600; color: var(--text); } .notif-row.notif-unread .notif-title { font-weight: 700; } .notif-sub { font-size: 11px; color: var(--text-muted); line-height: 1.5; margin-top: 2px; } .notif-meta { display: flex; gap: 10px; font-size: 10px; color: var(--text-dim); margin-top: 4px; } .notif-category { text-transform: uppercase; letter-spacing: 0.3px; font-weight: 700; } .notif-read-btn { align-self: flex-start; padding: 4px 10px; font-size: 10px; font-weight: 600; color: var(--accent); background: transparent; border: 1px solid var(--border); border-radius: 9999px; cursor: pointer; } .notif-read-btn:hover { background: var(--accent-soft); border-color: var(--accent); } /* Bell icon in the farmer portal rail. Sits between Farmer Assist * and the spacer before the logout button. Badge mirrors the desktop * bell — small red dot when there's anything unread. */ .rail-btn-bell { position: relative; } .rail-bell-badge { position: absolute; top: 6px; right: 10px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--danger); color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; } /* ── Farmer home hero — scope A redesign ──────────────────────── * Three big cards (Today / This Week / Season So Far) that replace * the old 4+4+3 KPI stack. Each card has one dominant number, one * context line, one meta line. Grid collapses to single-column at * 720 px so mobile reads top-to-bottom without any horizontal noise. */ .hero-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; } @media (max-width: 720px) { .hero-grid { grid-template-columns: 1fr; } } .hero-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; min-height: 128px; } .hero-label { font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-muted); } .hero-value { font-size: 32px; font-weight: 700; color: var(--text); line-height: 1.1; margin-top: 4px; } .hero-unit { font-size: 14px; font-weight: 600; color: var(--text-muted); margin-left: 2px; } .hero-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; } .hero-meta { font-size: 11px; color: var(--text-dim); margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); } /* Hero cards — pale tinted fills only, no coloured top-strip. The * desktop dashboards don't use accent rails and the user preferred * that cleaner look; tint alone is enough to tell the three apart * without the rainbow-stripe effect the top borders were adding. */ .hero-today { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); } .hero-week { background: color-mix(in srgb, #0284c7 6%, var(--surface)); } .hero-season { background: color-mix(in srgb, #16a34a 6%, var(--surface)); } .hero-today .hero-value { color: var(--accent); } .hero-week .hero-value { color: #0284c7; } .hero-season .hero-value { color: #16a34a; } /* Season progress card — full-width bar + dates + season-context * strip absorbing the old Fields / Estimated tonnage stats. */ .season-progress-card { padding: 16px 20px; margin-bottom: 14px; } .season-progress-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; } .season-progress-title { font-size: 12px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 0.4px; } .season-progress-meta { font-size: 11px; color: var(--text-muted); } .season-progress-dates { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); margin-top: 6px; } .season-context { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); } .season-context span::before { content: "•"; margin-right: 6px; color: var(--text-dim); } .season-context span:first-child::before { content: ""; margin: 0; } /* Compact chip row inside peer cards — tighter than the own-group * version so the peer grid still fits multiple cards per row. */ .peer-now-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .peer-now-chip { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 9999px; } .peer-now-week { background: color-mix(in srgb, #0284c7 14%, transparent); color: #0369a1; } .peer-now-burn { background: color-mix(in srgb, #ea580c 14%, transparent); color: #b4470b; } .peer-now-deliver { background: color-mix(in srgb, #059669 14%, transparent); color: #047857; } /* Awaiting-cell empty state */ .awaiting-cell { padding: 28px 24px; text-align: center; } .awaiting-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 8px; } .awaiting-cell p { font-size: 13px; color: var(--text-muted); max-width: 520px; margin: 0 auto; } /* Utility pill used in cell context */ .pill { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 999px; letter-spacing: 0.2px; } .pill-info { background: color-mix(in srgb, #0ea5e9 15%, transparent); color: #0369a1; } /* Placeholder card — shared "skeleton + coming soon" pattern used by every farmer-portal page that hasn't been wired to real data yet. */ .placeholder-card { text-align: center; padding: 40px 24px; } .placeholder-icon { width: 36px; height: 36px; margin: 0 auto 12px; display: block; color: var(--accent); } .placeholder-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; } .placeholder-body { font-size: 11px; color: var(--text-muted); max-width: 360px; margin: 0 auto; line-height: 1.55; } /* Compact button overrides inside the portal content area. The public .btn-primary/.btn-secondary pills are sized for the marketing site; portals run tighter. Scoped so marketing stays untouched. */ .portal-main .btn-primary, .portal-main .btn-secondary { padding: 6px 12px; font-size: 11px; border-radius: 6px; gap: 6px; } .portal-main .btn-primary svg, .portal-main .btn-secondary svg { width: 12px; height: 12px; } /* Compact any inline-styled dl/dt/dd typography inside portal cards. */ .portal-card dl { font-size: 11px !important; gap: 6px 16px !important; } .portal-card dt { font-size: 11px; } .portal-card dd { font-size: 11px; } @media (max-width: 860px) { .portal { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; } .portal-rail { position: static; height: auto; width: 100%; flex-direction: row; align-items: center; border-right: none; border-bottom: 1px solid var(--sidebar-border); } .rail-logo { width: 56px; height: 48px; flex-shrink: 0; } .rail-items { flex: 1; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding-top: 0; } .rail-btn { width: auto; padding: 12px 16px; } .rail-btn.active::before { top: auto; left: 8px; right: 8px; bottom: 0; width: auto; height: 2px; border-radius: 2px 2px 0 0; } .rail-bottom { width: auto; border-top: none; border-left: 1px solid var(--sidebar-border); padding: 0; } .portal-panel { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border); } .panel-head { min-height: auto; padding: 10px 16px 4px; } .panel-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 0 8px 10px; } .panel-item { white-space: nowrap; padding: 8px 14px; border-left: none; border-bottom: 2px solid transparent; } .panel-item.active { border-left: none; border-bottom-color: var(--accent); } .panel-foot { display: none; } .portal-main { padding: 18px 16px 32px; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @media (max-width: 900px) { .footer-inner { flex-direction: column; gap: 2rem; } } @media (max-width: 640px) { .nav-links { display: none; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: var(--nav-bg); backdrop-filter: var(--nav-blur); border-bottom: 1px solid var(--nav-border); padding: 0.5rem 0; } .nav-links.open { display: flex; } .nav-links a { padding: 0.75rem 2rem; } .nav-cta { margin: 0.5rem 2rem !important; text-align: center; display: block !important; } .nav-hamburger { display: block; } .theme-picker { display: none; } }