/* Final Sunny theme authority. Loaded after the functional application styles. */ :root { --paper:#FAF7F1; --surface:#FFFFFF; --surface-2:#F4F0E8; --surface-3:#EBE5D9; --line:#E7E0D3; --line-strong:#D6CCB8; --ink:#241F17; --ink-2:#5B5346; --ink-3:#726957; --brand:#1E4D2B; --brand-strong:#16351E; --brand-tint:#E7F0E7; --brand-tint-2:#D6E6D6; --accent:#9A5B00; --status-go:#277338; --status-go-bg:#E6F2E9; --status-soon:#1C6B9C; --status-soon-bg:#E4EFF6; --status-done:#6B6156; --status-done-bg:#EEE9E0; --status-stop:#BC322B; --status-stop-bg:#F9E8E7; --ui-canvas:var(--paper); --ui-surface:var(--surface); --ui-surface-muted:var(--surface-2); --ui-text:var(--ink); --ui-text-muted:var(--ink-2); --ui-primary:var(--brand); --ui-accent:var(--accent); --ui-border:var(--line-strong); --ui-danger:var(--status-stop); --ui-warning:var(--accent); --ui-focus:#2D75A7; --ui-radius-sm:8px; --ui-radius-md:12px; --ui-target:2.75rem; --forest-950:var(--brand-strong); --forest-900:var(--brand-strong); --forest-800:var(--brand); --forest-700:var(--brand); --forest-600:#356444; --leaf-500:#9DCE72; --leaf-100:var(--brand-tint); --cream-50:var(--paper); --cream-100:var(--surface-2); --cream-200:var(--line); --ink-900:var(--ink); --ink-700:var(--ink-2); --ink-500:var(--ink-3); --amber-600:var(--accent); --amber-100:#FFF0D4; --red-700:var(--status-stop); --red-100:var(--status-stop-bg); --blue-700:var(--status-soon); --blue-100:var(--status-soon-bg); --ink-on-brand:#F4F7F1; --ink-on-brand-2:#B4BFB2; --accent-tint:#FBF0DA; --st-go:var(--status-go); --st-go-bg:var(--status-go-bg); --st-soon:var(--status-soon); --st-soon-bg:var(--status-soon-bg); --st-done:var(--status-done); --st-done-bg:var(--status-done-bg); --st-stop:var(--status-stop); --st-stop-bg:var(--status-stop-bg); --fs-11:.6875rem; --fs-12:.75rem; --fs-13:.8125rem; --fs-14:.875rem; --fs-16:1rem; --fs-18:1.125rem; --fs-22:1.375rem; --fs-28:1.75rem; --fw-r:400; --fw-m:500; --fw-sb:600; --fw-b:700; --lh-display:1.2; --lh-title:1.3; --lh-body:1.5; --lh-table:1.45; --ls-display:-.02em; --ls-title:-.01em; --ls-caps:.06em; --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif; --font-mono:ui-monospace,"Cascadia Mono","SFMono-Regular",Menlo,Consolas,monospace; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --r-xs:5px; --r-sm:8px; --r-md:12px; --r-lg:14px; --r-input:10px; --r-pill:999px; --sh-1:0 1px 2px rgba(36,31,23,.04); --sh-2:0 1px 2px rgba(36,31,23,.05),0 4px 12px -4px rgba(36,31,23,.10); --sh-3:0 2px 4px rgba(36,31,23,.05),0 12px 28px -8px rgba(36,31,23,.16); --ring:0 0 0 2px var(--surface),0 0 0 4px var(--brand); --ring-error:0 0 0 2px var(--surface),0 0 0 4px var(--st-stop); --ring-inverse:0 0 0 2px var(--brand-strong),0 0 0 4px rgba(255,255,255,.7); --dur-fast:120ms; --dur:180ms; --dur-slow:280ms; --ease:cubic-bezier(.2,.6,.2,1); --z-nav:100; --z-sticky:200; --z-dropdown:300; --z-popover:400; --z-toast:500; --z-modal:600; --scrim:rgba(36,31,23,.32); --ctl:32px; --row:40px; --box:18px; --chip-h:26px; --tap-field:44px; --fs-base:var(--fs-14); --fs-title:var(--fs-18); --fs-colhead:var(--fs-11); --gutter:var(--s4); --shadow-sm:0 1px 2px rgb(36 31 23 / 4%),0 7px 20px rgb(36 31 23 / 7%); --shadow-lg:0 24px 70px rgb(22 53 30 / 20%); --radius:16px; --radius-sm:10px; color:var(--ink); background:var(--paper); font-family:var(--font); } [data-density="worker"],.is-worker,.is-landing { --ctl:48px; --row:56px; --box:22px; --chip-h:32px; --tap-field:60px; --fs-base:var(--fs-16); --fs-title:var(--fs-22); --fs-colhead:var(--fs-12); --gutter:var(--s5); } /* Enterprise palette, dormant until [data-theme="enterprise"] is set on . Only color, radius, and shadow tint differ from Sunny Farm above -- no layout, spacing, or component structure changes. Nothing in this app sets the attribute yet, so this block has no effect on default rendering. */ [data-theme="enterprise"] { --status-go:#0F7A3D; --status-go-bg:#E4F4EA; --status-soon:#0A6E93; --status-soon-bg:#E0F1F9; --status-done:#5A6472; --status-done-bg:#EBEEF3; --status-stop:#C5342E; --status-stop-bg:#FBE8E7; --st-go:var(--status-go); --st-go-bg:var(--status-go-bg); --st-soon:var(--status-soon); --st-soon-bg:var(--status-soon-bg); --st-done:var(--status-done); --st-done-bg:var(--status-done-bg); --st-stop:var(--status-stop); --st-stop-bg:var(--status-stop-bg); --brand:#3F5296; --brand-strong:#2A3560; --accent:#B5138C; --forest-950:var(--brand-strong); --forest-900:var(--brand-strong); --forest-800:var(--brand); --forest-700:var(--brand); --red-700:var(--status-stop); --red-100:var(--status-stop-bg); --blue-700:var(--status-soon); --blue-100:var(--status-soon-bg); --amber-600:var(--accent); --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:12px; --r-input:8px; --sh-1:0 1px 2px rgba(20,26,45,.06); --sh-2:0 1px 2px rgba(20,26,45,.07),0 4px 12px -4px rgba(20,26,45,.14); --sh-3:0 2px 4px rgba(20,26,45,.07),0 12px 28px -8px rgba(20,26,45,.22); --shadow-sm:0 1px 2px rgb(20 26 45 / 6%),0 7px 20px rgb(20 26 45 / 9%); --shadow-lg:0 24px 70px rgb(20 26 45 / 24%); --ring:0 0 0 2px var(--surface),0 0 0 4px var(--brand); --ring-error:0 0 0 2px var(--surface),0 0 0 4px var(--st-stop); --ring-inverse:0 0 0 2px var(--brand-strong),0 0 0 4px rgba(255,255,255,.7); } html,body { background:var(--paper); color:var(--ink); } body { background-image:none; } .app-shell { display:block; min-height:100vh; } .workspace { min-width:0; } .sidebar,.topbar,.prealpha-note { display:none !important; } /* The hero surface is --mobile-surface (white) at every width, so its foregrounds have to come from the same token set as the title beneath them. These were left at the old dark-green-bar whites: the eyebrow rendered white-on-white and was invisible at >=720px. */ .manager-hero .brand strong { color:var(--mobile-text); font-size:16px; } .manager-hero .brand span { color:var(--mobile-muted); font-size:11px; } .manager-hero .page-heading p,.operations-context p { margin:0 0 3px; color:var(--mobile-muted); font-size:10px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; } .manager-hero .button,.manager-hero .language-toggle,.manager-hero .sync-status { min-height:40px; color:var(--mobile-text); border:1px solid var(--mobile-line); background:var(--mobile-surface-2); box-shadow:none; } .manager-hero .button:hover,.manager-hero .language-toggle:hover,.manager-hero .sync-status:hover { background:rgb(255 255 255 / 15%); } .manager-hero .button-primary { color:var(--mobile-green-on); border-color:var(--mobile-green); background:var(--mobile-green); } .manager-hero .global-search input { color:var(--ink); } .manager-shell-nav { width:min(1120px,100%); margin:14px auto 0; display:flex; align-items:center; gap:8px; overflow-x:auto; scrollbar-width:none; } .manager-shell-nav::-webkit-scrollbar { display:none; } .manager-shell-nav .nav-item { flex:1 0 max-content; width:auto; min-height:44px; padding:0 22px; display:inline-flex; justify-content:center; gap:7px; color:rgb(255 255 255 / 65%); border:1px solid rgb(255 255 255 / 17%); border-radius:999px; background:rgb(255 255 255 / 7%); box-shadow:none; font-size:13px; font-weight:700; text-align:center; white-space:nowrap; } .manager-shell-nav .nav-item:hover { color:#fff; background:rgb(255 255 255 / 14%); } .manager-shell-nav .nav-item.is-active { color:var(--brand-strong); border-color:var(--paper); background:var(--paper); box-shadow:none; } .manager-shell-nav .nav-badge { min-width:20px; padding:2px 6px; color:var(--brand-strong); background:#fff; } .manager-shell-nav .nav-item.is-active .nav-badge { color:#fff; background:var(--brand-strong); } #main-content,.operations-shell { width:min(1120px,calc(100% - 40px)); margin:0 auto; padding:34px 0 56px; } .view-stack { gap:22px; } .section-heading { align-items:end; gap:18px; } .section-heading h2 { color:var(--ink); font-size:clamp(24px,3vw,36px); letter-spacing:-.035em; } .section-heading p,.panel-header p { color:var(--ink-3); } .eyebrow { color:var(--ink-3); font-size:10px; letter-spacing:.09em; } .panel,.kpi,.review-item,.filter-strip,.map-board,.official-map-panel,.location-card,.empty-state { border-color:var(--line); border-radius:14px; background:var(--surface); box-shadow:0 1px 2px rgb(36 31 23 / 4%),0 8px 26px rgb(36 31 23 / 5%); } .panel-header { min-height:72px; padding:18px 20px; border-color:var(--line); background:var(--surface); } .panel-header h2,.panel-header h3 { color:var(--ink); } .panel-body { padding:20px; } .kpi-grid { gap:14px; } .kpi { min-height:145px; padding:20px; } .kpi span,.kpi small { color:var(--ink-3); } .kpi strong { color:var(--ink); font-size:clamp(28px,3vw,40px); } .button,.icon-button { min-height:44px; border-radius:10px; font-weight:700; } .button { padding:9px 15px; font-size:12px; } .button-primary { color:#fff; background:var(--brand); box-shadow:none; } .button-primary:hover { background:var(--brand-strong); } .button-secondary { color:var(--ink); border:1px solid var(--line-strong); background:var(--surface); } .button-ghost { color:var(--brand); background:transparent; } .button-danger { color:#fff; background:var(--status-stop); } .button-small { min-height:36px; padding:7px 11px; } input,select,textarea,.portal-login input,.portal-login select,.portal-form-grid input,.portal-form-grid select,.portal-form-grid textarea,.admin-stack input { color:var(--ink); border-color:var(--line-strong); border-radius:9px; background:var(--surface); } label { color:var(--ink-2); } .data-table th,.role-permission-matrix th { color:var(--ink-3); background:var(--surface-2); } .data-table th,.data-table td { padding:13px 15px; border-color:var(--line); } .data-table tbody tr:hover { background:#FCFAF5; } .badge { border-radius:999px; } .badge-green,.worker-status { color:var(--status-go); background:var(--status-go-bg); } .badge-blue { color:var(--status-soon); background:var(--status-soon-bg); } .badge-red { color:var(--status-stop); background:var(--status-stop-bg); } .badge-gray { color:var(--status-done); background:var(--status-done-bg); } .farm-os-portal { color:var(--ink); background:var(--paper); } .operations-hero { position:relative; } .operations-shell { max-width:none; } .operations-shell>header { display:none; } .farm-os-portal.is-embedded-operations { position:static; inset:auto; z-index:auto; min-height:0; overflow:visible; background:transparent; } .farm-os-portal.is-embedded-operations>.operations-hero { display:none; } .farm-os-portal.is-embedded-operations .operations-shell { width:min(1120px,calc(100% - 40px)); margin:0 auto; padding:34px 0 56px; } .operations-subnav,.operations-shell>nav.operations-subnav { width:100%; margin:0 0 22px; padding:5px; display:flex; gap:3px; overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); } .operations-subnav button,.operations-shell>nav.operations-subnav button { flex:0 0 auto; min-height:36px; padding:7px 12px; color:var(--ink-3); border:0; border-radius:8px; background:transparent; font-size:11px; font-weight:750; } .operations-subnav button.is-active,.operations-shell>nav.operations-subnav button.is-active { color:var(--brand-strong); border:0; background:var(--surface); box-shadow:0 1px 4px rgb(36 31 23 / 8%); } .task-board-stack { gap:18px; } .task-breadcrumb { display:flex; gap:10px; align-items:center; color:var(--brand); font-size:12px; } .task-breadcrumb b { color:var(--line-strong); } .task-breadcrumb strong { color:var(--ink-2); } .manager-attention { grid-template-columns:minmax(150px,1.2fr) repeat(4,minmax(120px,1fr)); gap:0; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:0 1px 2px rgb(36 31 23 / 4%); } .manager-attention>header { padding:15px 18px; display:flex; align-items:center; gap:9px; color:var(--ink-3); background:var(--surface-2); text-transform:uppercase; letter-spacing:.06em; } .manager-attention>header span { min-width:23px; height:23px; padding:0 6px; display:grid; place-items:center; color:#fff; border-radius:999px; background:var(--accent); font-size:11px; } .manager-attention button { min-height:62px; padding:12px 15px; display:flex; align-items:center; gap:9px; border:0; border-left:1px solid var(--line); border-radius:0; background:var(--surface); } .manager-attention button:hover { background:#FCFAF5; } .manager-attention button strong { min-width:24px; height:24px; display:grid; place-items:center; color:var(--brand); border-radius:999px; background:var(--brand-tint); font-size:12px; } .manager-attention button span { color:var(--ink-2); font-size:11px; font-weight:700; } .task-projection-controls { padding:0; align-items:center; border:0; background:transparent; } .task-projection-controls>div { order:3; margin-left:auto; padding:4px; border:1px solid var(--line); border-radius:999px; background:var(--surface-2); } .task-projection-controls button { min-height:34px; padding:0 14px; color:var(--ink-2); border:0; border-radius:999px; background:transparent; } .task-projection-controls button.is-active { color:var(--brand-strong); background:var(--surface); box-shadow:0 1px 3px rgb(36 31 23 / 8%); } .task-projection-controls label { display:inline-flex; align-items:center; gap:7px; color:var(--ink-3); font-size:10px; font-weight:750; } .task-projection-controls select,.task-projection-controls input { min-height:38px; border:1px solid var(--line-strong); border-radius:9px; background:var(--surface); } .task-search-field { min-width:250px; } .task-search-field input { width:100%; } .assignment-drawer { border-color:var(--line); border-radius:12px; box-shadow:none; } .assignment-drawer>summary { min-height:54px; padding:12px 16px; background:var(--surface); } .assignment-drawer>summary strong { color:var(--brand); } .task-board-heading h2 { color:var(--ink); font-size:24px; } .task-board-heading p { color:var(--ink-3); } .task-board-column { padding:9px; border-color:var(--line); border-radius:12px; background:var(--surface-2); } .task-board-card { border-color:var(--line); border-left-color:var(--brand); border-radius:10px; box-shadow:none; } .task-list-projection { gap:0; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--surface); } .task-projection-row { min-height:62px; padding:10px 16px; grid-template-columns:24px 132px minmax(0,1fr) auto; gap:12px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:var(--surface); } .task-projection-row:last-child { border-bottom:0; } .task-projection-row time { color:var(--ink-3); font-size:11px; } .task-projection-row strong { color:var(--ink); font-size:13px; } .task-projection-row span { color:var(--ink-3); font-size:10px; } .task-projection-row>.badge { padding:7px 11px; color:var(--status-soon); background:var(--status-soon-bg); } .task-day-projection>section { padding:0; overflow:hidden; border-color:var(--line); border-radius:14px; } .task-day-projection>section>header { padding:12px 16px; color:var(--ink-2); background:var(--surface-2); } .task-ring-cell { width:20px; display:grid; place-items:center; } .task-status-ring { display:block; overflow:visible; color:var(--st-soon); } .task-status-ring.is-go { color:var(--st-go); } .task-status-ring.is-soon { color:var(--st-soon); } .task-status-ring.is-done { color:var(--st-done); } .task-status-ring.is-stop { color:var(--st-stop); } .status-lozenge { min-height:24px; padding:3px 9px; display:inline-flex; align-items:center; gap:6px; justify-self:end; color:var(--ink-2)!important; border-radius:var(--r-pill); background:var(--surface-2); font-size:var(--fs-11)!important; font-weight:var(--fw-sb); white-space:nowrap; } .status-lozenge i { width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:currentColor; } .status-lozenge.is-go { color:var(--st-go)!important; background:var(--st-go-bg); } .status-lozenge.is-soon { color:var(--st-soon)!important; background:var(--st-soon-bg); } .status-lozenge.is-done { color:var(--st-done)!important; background:var(--st-done-bg); } .status-lozenge.is-stop { color:var(--st-stop)!important; background:var(--st-stop-bg); } .task-filter-summary { min-height:32px; margin-top:-8px; display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--ink-3); font-size:var(--fs-11); } .task-filter-summary>[data-task-filter-chips] { display:flex; flex-wrap:wrap; gap:6px; } .task-filter-chip { min-height:26px; padding:3px 5px 3px 9px; display:inline-flex; align-items:center; gap:5px; color:var(--accent); border:1px solid #E9D7B7; border-radius:var(--r-pill); background:var(--accent-tint); font-size:var(--fs-11); font-weight:var(--fw-sb); } .task-filter-chip button { width:20px; height:20px; padding:0; display:grid; place-items:center; color:inherit; border:0; border-radius:50%; background:transparent; cursor:pointer; } .task-filter-chip button:hover { background:rgb(154 91 0 / 10%); } .task-board-stack[data-current-task-view="list"] .task-board-heading,.task-board-stack[data-current-task-view="day"] .task-board-heading { display:none; } .team-plan-view { gap:8px; } .team-plan-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:6px; } .team-plan-toolbar .button { min-height:36px; padding-inline:11px; font-size:var(--fs-11); } .team-plan-add { gap:6px; } .team-plan-add b { font-size:18px; line-height:1; } .team-plan-zoom { margin:0; } .team-plan-zoom button { min-height:32px; padding-inline:10px; font-size:var(--fs-11); } .team-plan-area { min-height:36px; padding:0 9px; display:inline-flex; align-items:center; color:var(--ink-3); border:1px solid var(--line-strong); border-radius:var(--r-input); background:var(--surface); font-size:var(--fs-11); font-weight:var(--fw-sb); } .team-plan-area select { min-height:34px; padding:0 22px 0 0; border:0; background:transparent; font-weight:var(--fw-sb); } .team-plan-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } .team-plan-kpis article { min-height:68px; padding:10px 14px; display:grid; align-content:center; gap:1px; overflow:hidden; border:0; border-radius:var(--r-sm); background:var(--st-soon); } .team-plan-kpis article.is-forecast { background:var(--st-go); } .team-plan-kpis article.is-warning { background:var(--st-done); } .team-plan-kpis article.is-warning.has-warning { background:var(--st-stop); } .team-plan-kpis span { color:#fff; opacity:.86; font-size:10px; font-weight:var(--fw-b); letter-spacing:var(--ls-caps); text-transform:uppercase; } .team-plan-kpis strong,.team-plan-kpis .has-warning strong { color:#fff; font-size:var(--fs-28); line-height:1; } .team-plan-kpis strong small { margin-left:3px; color:inherit; font-size:10px; font-weight:var(--fw-b); text-transform:uppercase; } .team-plan-legend { min-height:28px; display:flex; align-items:center; flex-wrap:wrap; gap:5px; color:var(--ink-2); font-size:10px; font-weight:var(--fw-sb); } .team-plan-legend>span { min-height:24px; padding:3px 7px; display:inline-flex; align-items:center; gap:5px; border-radius:var(--r-pill); background:var(--surface-2); white-space:nowrap; } .team-plan-legend .status-geometry { width:10px; height:10px; border-width:0; box-shadow:none; } .status-geometry { width:16px; height:16px; display:inline-block; border:2px solid var(--st-soon); border-radius:50%; } .status-geometry.is-growing { border-color:var(--st-go); background:conic-gradient(var(--st-go) 0 50%,transparent 50%); } .status-geometry.is-closed { border-color:var(--st-done); background:var(--st-done); box-shadow:inset 0 0 0 3px var(--paper); } .status-geometry.is-failed { position:relative; border-color:var(--st-stop); background:var(--st-stop); } .status-geometry.is-failed::after { content:"!"; position:absolute; inset:-3px 0 0; color:#fff; font-size:10px; font-style:normal; font-weight:800; text-align:center; } /* Type-to-filter combobox: a text input plus a filtered popover list layered over a visually-hidden (not display:none, so it stays part of the form and native validation)