/* ============================================================ work tracker */
.wk-shell { display:grid; gap:14px; }
.wk-eyebrow { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--accent); }
.wk-head h2 { margin:2px 0 4px; font-size:26px; color: var(--text-primary); }
.wk-head p { margin:0; color: var(--text-secondary); font-size:13.5px; }
.wk-muted { color: var(--text-secondary); font-size:12.5px; }
.wk-warn { color: var(--danger) !important; font-weight:700; }
.wk-ok { color: var(--success, #16a34a); font-weight:700; }
.wk-danger { color: var(--danger) !important; }
.wk-h { margin:6px 0 0; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color: var(--text-secondary); }

.wk-tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); overflow-x:auto; }
.wk-tabs a { padding:10px 16px; font-weight:700; font-size:14px; color: var(--text-secondary); text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; }
.wk-tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }

.wk-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.wk-toolbar input[type="search"] { flex:1 1 220px; min-width:0; }
.wk-toolbar input, .wk-toolbar select, .wk-for input, .wk-for select {
    padding:8px 11px; border-radius:11px; border:1px solid var(--border); background: var(--bg-raised); color: var(--text-primary); font:inherit; font-size:13px;
}
.wk-seg { display:inline-flex; padding:3px; border-radius:12px; background: var(--bg-hover, rgba(0,0,0,.05)); flex-wrap:wrap; }
.wk-seg button { border:0; background:transparent; padding:7px 12px; border-radius:9px; font:inherit; font-size:13px; font-weight:700; color: var(--text-secondary); cursor:pointer; }
.wk-seg button.active { background: var(--bg-raised); color: var(--accent); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.wk-seg.small button { padding:5px 10px; font-size:12.5px; }
.wk-datenav { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.wk-datenav strong { min-width:150px; text-align:center; font-size:14px; color: var(--text-primary); }
.wk-nav, .wk-today { border:1px solid var(--border); background: var(--bg-raised); color: var(--text-primary); border-radius:10px; padding:6px 11px; cursor:pointer; font:inherit; font-size:14px; }
.wk-for { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color: var(--text-secondary); }
.wk-actions { display:flex; flex-wrap:wrap; gap:8px; }
.wk-btn-alt { background: var(--text-secondary) !important; }

.wk-banner { padding:12px 16px; border-radius:14px; border:1px solid var(--accent); background: var(--accent-soft); display:grid; gap:2px; font-size:13px; color: var(--text-primary); }
.wk-banner.warn { border-color: var(--danger); background: var(--danger-soft, rgba(220,38,38,.08)); }

.wk-daysum { display:flex; flex-wrap:wrap; gap:14px; font-size:13px; color: var(--text-secondary); }
.wk-list { display:grid; gap:10px; }
.wk-item { display:grid; grid-template-columns:70px minmax(0, 1fr); gap:12px; padding:14px 16px; border-radius:16px; background: var(--bg-raised); border:1px solid var(--border); border-left:4px solid var(--accent); }
.wk-item.wk-kind-task { border-left-color: var(--text-secondary); }
.wk-item.overdue { border-color: var(--danger); border-left-color: var(--danger); }
.wk-item-time { font-weight:800; font-size:14px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.wk-item-main { display:grid; gap:6px; min-width:0; }
.wk-item-top { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.wk-item h4 { margin:0; font-size:15px; color: var(--text-primary); overflow-wrap:anywhere; }
.wk-item-meta { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px; color: var(--text-secondary); }
.wk-item-meta small { color: var(--text-secondary); }
.wk-item-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:4px; }
.wk-kind { font-size:11.5px; font-weight:800; color: var(--text-secondary); }
.wk-cat { font-size:11.5px; padding:2px 8px; border-radius:999px; border:1px solid var(--border); color: var(--text-secondary); }
.wk-chip { font-size:11.5px; font-weight:800; padding:2px 9px; border-radius:999px; }
.wk-plan { background: var(--accent-soft); color: var(--accent); }
.wk-done { background: rgba(22,163,74,.13); color:#15803d; }
.wk-miss { background: rgba(220,38,38,.12); color:#b91c1c; }
.wk-move { background: rgba(245,158,11,.16); color:#b45309; }
.wk-appr { font-size:11px; padding:2px 8px; border-radius:999px; background: rgba(220,38,38,.1); color:#b91c1c; font-weight:700; }
.wk-appr-approved { background: rgba(22,163,74,.13); color:#15803d; }
.wk-appr-rejected { background: rgba(220,38,38,.18); color:#991b1b; }
.wk-note { margin:0; font-size:12.5px; color: var(--text-secondary); }
.wk-outcome { display:grid; gap:4px; padding:10px 12px; border-radius:12px; background: var(--bg-hover, rgba(0,0,0,.04)); }
.wk-outcome p { margin:0; font-size:13px; color: var(--text-primary); white-space:pre-wrap; }
.wk-outcome p span, .wk-detail p span { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color: var(--text-secondary); font-weight:700; }

.wk-empty { display:grid; gap:4px; justify-items:center; padding:36px 16px; text-align:center; border:1px dashed var(--border); border-radius:16px; color: var(--text-secondary); }
.wk-empty strong { color: var(--text-primary); }

.wk-table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:14px; background: var(--bg-raised); }
.wk-table td { font-variant-numeric: tabular-nums; vertical-align:top; }
.wk-table tbody tr { cursor:pointer; }
.wk-table tbody tr:hover { background: var(--bg-hover); }
.wk-table tr.is-today { background: var(--accent-soft); }
.wk-table tr.is-sunday td:first-child { color: var(--danger); }
.wk-table tr.overdue td { color: var(--danger); }
.wk-date-cell { white-space:nowrap; font-weight:700; }
.wk-chips-cell { min-width:260px; }
.wk-mini { display:inline-block; margin:2px 4px 2px 0; padding:2px 8px; border-radius:8px; font-size:11.5px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }
.wk-report { min-width:1200px; }
.wk-log td { white-space:nowrap; }

.wk-summary { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.wk-stat { padding:13px 15px; border-radius:15px; background: var(--bg-raised); border:1px solid var(--border); display:grid; gap:2px; }
.wk-stat.warn { border-color: var(--danger); }
.wk-stat span { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color: var(--text-secondary); }
.wk-stat strong { font-size:24px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.wk-stat small { font-size:11.5px; color: var(--text-secondary); }

.wk-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:12px; }
.wk-card { display:grid; gap:10px; padding:15px; border-radius:18px; background: var(--bg-raised); border:1px solid var(--border); cursor:pointer; transition: border-color .15s; }
.wk-card:hover, .wk-card:focus-visible { border-color: var(--accent); outline:none; }
.wk-card header { display:flex; gap:10px; align-items:center; min-width:0; }
.wk-card-id { display:grid; min-width:0; flex:1; }
.wk-card-id strong { font-size:14.5px; color: var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wk-card-id span { font-size:12px; color: var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wk-state { font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.wk-state-ok { background: rgba(22,163,74,.13); color:#15803d; }
.wk-state-off { background: var(--bg-hover, rgba(0,0,0,.06)); color: var(--text-secondary); }
.wk-state-warn { background: rgba(245,158,11,.16); color:#b45309; }
.wk-state-bad { background: rgba(220,38,38,.13); color:#b91c1c; }
.wk-card-today { display:flex; flex-wrap:wrap; gap:6px 12px; font-size:12.5px; color: var(--text-secondary); }
.wk-badge { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:2px 7px; border-radius:6px; background: var(--accent-soft); color: var(--accent); }
.wk-badge.warn { background: rgba(245,158,11,.16); color:#b45309; }
.wk-farmer-grid { display:grid; grid-template-columns:repeat(5, 1fr); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.wk-farmer-grid div { display:grid; gap:1px; padding:7px 4px; text-align:center; border-right:1px solid var(--border); }
.wk-farmer-grid div:last-child { border-right:0; }
.wk-farmer-grid span { font-size:10px; text-transform:uppercase; letter-spacing:.04em; color: var(--text-secondary); }
.wk-farmer-grid b { font-size:17px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.wk-card-split { font-size:12px; color: var(--text-secondary); }
.wk-card-map { height:170px; border-radius:12px; overflow:hidden; border:1px solid var(--border); }
.wk-map-empty { height:100%; display:grid; place-items:center; font-size:12px; color: var(--text-secondary); background: var(--bg-hover, rgba(0,0,0,.04)); }
.wk-pin-label { font-size:11px; font-weight:700; padding:1px 6px; border-radius:6px; }

.wk-avatar { width:42px; height:42px; border-radius:12px; object-fit:cover; flex-shrink:0; }
.wk-avatar.lg { width:72px; height:72px; border-radius:20px; font-size:24px; }
.wk-avatar-i { display:grid; place-items:center; font-weight:800; background: var(--accent-soft); color: var(--accent); }

.wk-back { font-size:13px; font-weight:700; color: var(--accent); text-decoration:none; }
.wk-hero { display:flex; flex-wrap:wrap; gap:14px; align-items:center; padding:18px; border-radius:20px; background: var(--bg-raised); border:1px solid var(--border); }
.wk-hero-id { flex:1 1 220px; min-width:0; }
.wk-hero-id h2 { margin:0; font-size:24px; color: var(--text-primary); }
.wk-hero-id p { margin:2px 0 0; color: var(--text-secondary); font-size:13px; }
.wk-hero-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.wk-toggle { display:flex; gap:8px; align-items:center; padding:8px 12px; border-radius:12px; border:1px solid var(--border); font-size:13px; font-weight:700; color: var(--text-primary); cursor:pointer; }

.wk-dash-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; align-items:start; }
.wk-span { grid-column:1 / -1; }
@media (max-width: 900px) { .wk-dash-grid { grid-template-columns:minmax(0, 1fr); } }
.wk-panel { padding:16px; border-radius:18px; background: var(--bg-raised); border:1px solid var(--border); display:grid; gap:10px; min-width:0; }
.wk-panel h3 { margin:0; font-size:14.5px; display:flex; align-items:center; gap:8px; color: var(--text-primary); }
.wk-count { font-size:11.5px; padding:1px 8px; border-radius:999px; background: var(--accent-soft); color: var(--accent); }
.wk-bigmap { height:380px; border-radius:14px; overflow:hidden; border:1px solid var(--border); }
.wk-quiet { list-style:none; margin:0; padding:0; display:grid; gap:4px; max-height:260px; overflow:auto; }
.wk-quiet li { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; padding:7px 10px; border-radius:10px; border:1px solid var(--border); font-size:13px; }
.wk-quiet small { color: var(--text-secondary); }
.wk-quiet span { margin-left:auto; font-size:12px; color: var(--danger); }
.wk-mini-btn { padding:3px 9px; border-radius:8px; border:1px solid #16a34a; background:transparent; color:#15803d; font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.wk-mini-btn.no { border-color: var(--danger); color: var(--danger); }

.wk-chart { width:100%; height:auto; display:block; }
.wk-grid { stroke: var(--border); stroke-width:1; }
.wk-axis { fill: var(--text-secondary); font-size:10px; }
.wk-val { fill: var(--text-primary); font-size:10px; font-weight:700; }
.wk-bar-a { fill: var(--accent); background: var(--accent); }
.wk-bar-b { fill: #94a3b8; background: #94a3b8; }
.wk-legend { display:flex; gap:14px; font-size:12px; color: var(--text-secondary); }
.wk-legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.wk-hbars { display:grid; gap:7px; }
.wk-hbar { display:grid; grid-template-columns:minmax(90px, 150px) 1fr 34px; gap:8px; align-items:center; font-size:12.5px; color: var(--text-primary); }
.wk-hbar-track { height:10px; border-radius:6px; background: var(--bg-hover, rgba(0,0,0,.06)); overflow:hidden; }
.wk-hbar-track i { display:block; height:100%; background: var(--accent); border-radius:6px; }
.wk-hbar b { text-align:right; font-variant-numeric: tabular-nums; }
.wk-settings .wk-row { margin-bottom:6px; }

/* dialogs and forms */
.wk-modal { position:fixed; inset:0; z-index:10040; display:grid; place-items:center; padding:16px; background: rgba(15,23,42,.5); overflow:auto; }
.wk-dialog { width:min(560px, 100%); max-height:92vh; display:grid; grid-template-rows:auto 1fr; border-radius:20px; background: var(--bg-raised); color: var(--text-primary); box-shadow:0 30px 80px rgba(0,0,0,.35); overflow:hidden; }
.wk-dialog.wide { width:min(720px, 100%); }
.wk-dialog-head { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--border); }
.wk-dialog-head h3 { margin:0; font-size:17px; overflow-wrap:anywhere; }
.wk-x { border:0; background:transparent; font-size:24px; line-height:1; color: var(--text-secondary); cursor:pointer; }
.wk-dialog-body { overflow:auto; padding:14px 18px 18px; }
.wk-form { display:grid; gap:10px; }
.wk-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.wk-form label, .wk-settings label { display:grid; gap:4px; font-size:12.5px; font-weight:700; color: var(--text-secondary); }
.wk-form label b { color: var(--danger); }
.wk-form label small { font-weight:400; font-size:11px; }
.wk-form input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), .wk-form select, .wk-form textarea, .wk-settings input {
    width:100%; box-sizing:border-box; padding:9px 11px; border-radius:10px; border:1px solid var(--border);
    background: var(--bg-surface, var(--bg-raised)); color: var(--text-primary); font:inherit; font-size:14px; font-weight:400;
}
.wk-form-foot { display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }
.wk-label { font-size:12.5px; font-weight:700; color: var(--text-secondary); }
.wk-result { display:flex; gap:8px; flex-wrap:wrap; }
.wk-radio { display:flex !important; grid-template-columns:none; align-items:center; gap:8px; padding:9px 14px; border-radius:12px; border:1px solid var(--border); cursor:pointer; color: var(--text-primary) !important; }
.wk-radio:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.wk-checkin { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:10px 12px; border-radius:12px; border:1px dashed var(--border); }
.wk-farmer-block { display:grid; gap:8px; padding:12px; border-radius:14px; border:1px solid var(--border); }
.wk-farmer-pick { display:grid; gap:6px; }
.wk-farmer-pick input { width:100%; box-sizing:border-box; padding:9px 11px; border-radius:10px; border:1px solid var(--border); background: var(--bg-surface, var(--bg-raised)); color: var(--text-primary); font:inherit; }
.wk-results { display:grid; gap:4px; max-height:200px; overflow:auto; }
.wk-results button { text-align:left; padding:8px 10px; border-radius:10px; border:1px solid var(--border); background: var(--bg-raised); color: var(--text-primary); font:inherit; font-size:13px; cursor:pointer; }
.wk-results button:hover { border-color: var(--accent); }
.wk-results small, .wk-picked small { color: var(--text-secondary); }
.wk-picked { display:inline-flex; gap:8px; align-items:center; padding:7px 10px; border-radius:10px; background: var(--accent-soft); font-size:13.5px; font-weight:700; color: var(--text-primary); }
.wk-picked button { border:0; background:transparent; font-size:16px; cursor:pointer; color: var(--text-secondary); }
.wk-newfarmer { display:grid; gap:8px; }
.wk-ponds { display:grid; gap:6px; }
.wk-pond { display:grid; grid-template-columns:24px 1fr 30px; gap:6px; align-items:center; }
.wk-pond span { display:grid; place-items:center; width:24px; height:24px; border-radius:8px; background: var(--accent-soft); color: var(--accent); font-size:11px; font-weight:800; }
.wk-pond button { width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:transparent; color: var(--danger); cursor:pointer; }
.wk-add-line { justify-self:start; padding:6px 12px; border-radius:10px; border:1px dashed var(--accent); background:transparent; color: var(--accent); font:inherit; font-weight:700; cursor:pointer; }
.wk-detail { display:grid; gap:10px; }
.wk-detail p { margin:0; font-size:14px; white-space:pre-wrap; }
.wk-detail-photo { max-width:100%; border-radius:12px; }

@media (max-width: 560px) {
    .wk-item { grid-template-columns:minmax(0, 1fr); }
    .wk-farmer-grid b { font-size:15px; }
    .wk-datenav strong { min-width:0; }
}

.calendar-mywork-link { display:grid; gap:2px; margin-top:20px; padding:14px 16px; border-radius:14px; border:1px dashed var(--accent); background: var(--accent-soft); text-decoration:none; color: var(--text-primary); font-size:13px; }
.calendar-mywork-link strong { color: var(--accent); }
.staff-mandatory-toggle { display:flex; gap:10px; align-items:flex-start; margin:4px 0 12px; padding:12px 14px; border-radius:12px; border:1px dashed var(--accent); cursor:pointer; }
.staff-mandatory-toggle strong { display:block; font-size:13px; color: var(--text-primary); }
.staff-mandatory-toggle small { font-size:12px; color: var(--text-secondary); line-height:1.5; }

/* ------------------------------------------------ proof of visit, CRM, offline */
.wk-banner.offline { border-color:#64748b; background: rgba(100,116,139,.12); }
.wk-banner.sync { border-color:#b45309; background: rgba(245,158,11,.12); }
.wk-banner span { display:block; }
.wk-item.awaiting { border-color: var(--danger); border-left-color: var(--danger); background: rgba(220,38,38,.04); }
.wk-late { border-color:#b45309 !important; color:#b45309 !important; }
.wk-late-dot { margin-left:6px; font-size:10.5px; font-weight:800; color:#b45309; text-transform:uppercase; }
.wk-exception { display:grid; gap:8px; padding:12px 14px; border-radius:14px; border:1px solid var(--danger); background: rgba(220,38,38,.06); }
.wk-exception strong { color: var(--danger); }
.wk-exception p { margin:0; font-size:12.5px; color: var(--text-secondary); }
.wk-inline { display:flex !important; align-items:center; gap:8px; color: var(--text-primary) !important; }
.wk-tab-badge[hidden] { display:none; }
.wk-tab-badge { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; margin-left:4px; border-radius:999px; background: var(--danger); color:#fff; font-size:11px; }
.wk-badge.bad { background: rgba(220,38,38,.13); color:#b91c1c; }

.wk-pipeline { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); border:1px solid var(--border); border-radius:14px; overflow:hidden; background: var(--bg-raised); }
.wk-pipeline div { display:grid; gap:2px; padding:10px 12px; border-right:1px solid var(--border); position:relative; }
.wk-pipeline div:last-child { border-right:0; }
.wk-pipeline span { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color: var(--text-secondary); }
.wk-pipeline b { font-size:20px; color: var(--text-primary); font-variant-numeric: tabular-nums; }

.wk-appr-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:12px; }
.wk-appr-card { display:grid; gap:8px; padding:15px; border-radius:16px; background: var(--bg-raised); border:1px solid var(--border); min-width:0; }
.wk-appr-card.is-exception { border-color: var(--danger); }
.wk-appr-card header { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.wk-appr-card header strong { display:block; color: var(--text-primary); }
.wk-appr-card header span { font-size:12px; color: var(--text-secondary); }
.wk-appr-card h4 { margin:0; font-size:14.5px; color: var(--text-primary); }
.wk-exception-summary { padding:10px 12px; border-radius:12px; background: rgba(220,38,38,.07); font-size:13px; color: var(--text-primary); }
.wk-exception-summary p, .wk-appr-text { margin:6px 0 0; font-size:13px; color: var(--text-primary); white-space:pre-wrap; }
.wk-exception-summary span, .wk-appr-text span { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color: var(--text-secondary); font-weight:700; }
.wk-appr-map { height:200px; border-radius:12px; overflow:hidden; border:1px solid var(--border); }
.wk-appr-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.wk-appr-actions input { flex:1 1 160px; min-width:0; padding:8px 10px; border-radius:10px; border:1px solid var(--border); background: var(--bg-surface, var(--bg-raised)); color: var(--text-primary); font:inherit; }

.wk-dept-list, .wk-mand-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:6px; }
.wk-mand-list { max-height:360px; overflow:auto; }
.wk-dept, .wk-mand { display:flex; gap:10px; align-items:center; padding:9px 12px; border-radius:11px; border:1px solid var(--border); cursor:pointer; font-size:13.5px; color: var(--text-primary); }
.wk-dept:has(input:checked), .wk-mand:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.wk-mand strong { display:block; font-size:13.5px; }
.wk-mand small { font-size:11.5px; color: var(--text-secondary); }
.wk-search { width:100%; box-sizing:border-box; padding:8px 11px; border-radius:10px; border:1px solid var(--border); background: var(--bg-raised); color: var(--text-primary); font:inherit; }

.wk-follow-bad { border-left-color: var(--danger); }
.wk-follow-warn { border-left-color:#f59e0b; }
.wk-follow-ok { border-left-color:#16a34a; }

.farm-stage { font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px; background: var(--accent-soft); color: var(--accent); white-space:nowrap; }
.farm-stage[data-stage="Customer"] { background: rgba(22,163,74,.13); color:#15803d; }
.farm-stage[data-stage="Inactive"] { background: var(--bg-hover, rgba(0,0,0,.06)); color: var(--text-secondary); }
.farm-timeline { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.farm-timeline li { position:relative; padding:10px 12px 10px 16px; border-radius:12px; border:1px solid var(--border); border-left:3px solid var(--accent); }
.farm-timeline li.is-exception { border-left-color: var(--danger); }
.farm-timeline header { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font-size:12.5px; color: var(--text-secondary); }
.farm-timeline header b { color: var(--text-primary); }
.farm-timeline p { margin:6px 0 0; font-size:13.5px; white-space:pre-wrap; color: var(--text-primary); }
.farm-timeline p span { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color: var(--text-secondary); font-weight:700; }

/* Counts, not red marks: a card only speaks up when something is waiting. */
.wk-state-warn { background: rgba(245,158,11,.16); color:#b45309; }
.wk-state-bad { background: rgba(245,158,11,.16); color:#b45309; }
.wk-card header { flex-wrap:wrap; }
.wk-item.overdue { border-color:#f59e0b; border-left-color:#f59e0b; }
.wk-item.awaiting { border-color:#f59e0b; border-left-color:#f59e0b; background:transparent; }
.wk-pending-tag { grid-column:1 / -1; justify-self:start; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#b45309; }
.wk-appr { background: rgba(245,158,11,.16); color:#b45309; }
.wk-appr-rejected { background: rgba(220,38,38,.14); color:#b91c1c; }

/* ------------------------------------------------------------ report table */
.wk-report-wrap { max-height:min(70vh, 700px); overflow:auto; }
.wk-report { min-width:1500px; border-collapse:separate; border-spacing:0; }
.wk-report thead th { position:sticky; top:0; z-index:3; background: var(--bg-raised); cursor:pointer; white-space:nowrap; box-shadow:0 1px 0 var(--border); }
.wk-report thead tr.wk-filter-row th { top:38px; z-index:3; padding:4px 6px; cursor:auto; }
.wk-report thead th:first-child, .wk-report tbody td:first-child, .wk-report tfoot td:first-child {
    position:sticky; left:0; z-index:2; background: var(--bg-raised); box-shadow:1px 0 0 var(--border);
}
.wk-report thead th:first-child { z-index:4; }
.wk-report tbody td:first-child { font-weight:700; }
.wk-report .wk-sort { margin-left:6px; font-size:10px; color: var(--text-secondary); }
.wk-report th.is-sorted { color: var(--accent); }
.wk-filter-row input, .wk-filter-row select {
    width:100%; box-sizing:border-box; padding:5px 7px; border-radius:8px; border:1px solid var(--border);
    background: var(--bg-surface, var(--bg-raised)); color: var(--text-primary); font:inherit; font-size:12px; font-weight:400;
}
.wk-report tfoot td { position:sticky; bottom:0; background: var(--bg-raised); font-weight:800; box-shadow:0 -1px 0 var(--border); font-variant-numeric: tabular-nums; }
.wk-attention { color:#b45309; font-weight:700; }

/* ==========================================================================
   My Work

   One table for the day, the week and the month, with everything recorded
   against an item behind the row it belongs to. No symbols in the table: a
   row is read, not decoded, so the type and the verification are words.
   ========================================================================== */

/* ------------------------------------------------------------- filters */
.wk-filters { display:flex; flex-wrap:wrap; gap:12px 14px; align-items:end;
    padding:14px 16px; border:1px solid var(--border); border-radius:14px; background: var(--bg-raised); }
.wk-filters input[type="search"] { flex:1 1 280px; min-width:0; }
.wk-filters label { display:grid; gap:5px; font-size:10.5px; font-weight:800; text-transform:uppercase;
    letter-spacing:.06em; color: var(--text-secondary); min-width:0; }
.wk-filters select { min-width:0; max-width:240px; }
.wk-filters .wk-seg { align-self:end; }

/* --------------------------------------------------------------- stats */
.wk-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(124px, 1fr)); gap:12px; }
.wk-stats .wk-stat { padding:12px 15px; border-radius:14px; gap:3px; }
.wk-stats .wk-stat strong { font-size:22px; line-height:1.1; }
.wk-stats .wk-stat span { font-size:10.5px; letter-spacing:.06em; }
.wk-stat-open { border-color:#f0c26b; }
.wk-stat-open strong { color:#b45309; }
.wk-stat-late { border-color:#eba3a3; }
.wk-stat-late strong { color: var(--danger); }

/* --------------------------------------------------------------- table */
.wk-worktable { min-width:820px; table-layout:fixed; width:100%; }

/* The shared .hrms-table is built for a wide scrolling report: nowrap on
   every cell and width:max-content. Here that made the work title run over
   the name in the next column. */
.wk-table-wrap .wk-worktable th {
    padding:11px 12px; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
    color: var(--text-secondary); background: var(--bg-sunken, rgba(15,23,42,.028));
    border-bottom:1px solid var(--border); white-space:nowrap;
}
.wk-table-wrap .wk-worktable td {
    padding:12px; vertical-align:top; font-size:13px; line-height:1.5;
    white-space:normal; overflow-wrap:anywhere; font-variant-numeric: tabular-nums;
    border-bottom:1px solid var(--border-soft);
}
/* Nested content must not inherit the table's nowrap from a later sheet. */
.wk-table-wrap .wk-worktable .wk-detail,
.wk-table-wrap .wk-worktable .wk-group-head,
.wk-table-wrap .wk-worktable .wk-rownotes { white-space:normal; }
.wk-dash { color: var(--text-secondary); opacity:.6; }

/* ----------------------------------------------------------------- row */
.wk-wrow { cursor:pointer; transition: background .12s ease; }
.wk-wrow:hover { background: var(--bg-hover, rgba(15,23,42,.028)); }
.wk-wrow:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.wk-wrow.is-open { background: var(--accent-soft); }
.wk-wrow.is-open td { border-bottom-color:transparent; }
.wk-wrow.is-overdue td:first-child { box-shadow: inset 3px 0 0 var(--danger); }

/* A chevron drawn from a rotated border, so there is no character to render. */
.wk-c-toggle { width:34px; text-align:center; }
.wk-caret { display:inline-block; width:7px; height:7px; margin-top:4px;
    border-right:1.8px solid var(--text-secondary); border-bottom:1.8px solid var(--text-secondary);
    transform: rotate(-45deg); transition: transform .15s ease, border-color .15s ease; }
.wk-wrow:hover .wk-caret { border-color: var(--accent); }
.wk-wrow.is-open .wk-caret { transform: rotate(45deg); border-color: var(--accent); }

.wk-c-date { width:8.5%; min-width:78px; font-weight:700; color: var(--text-primary); }
.wk-c-date small { display:block; font-weight:600; font-size:11px; color: var(--text-secondary); margin-top:1px; }
.wk-c-time { width:7.5%; min-width:64px; font-weight:700; }
.wk-c-kind { width:8%; min-width:72px; }
.wk-c-what { width:26%; }
.wk-what-title { display:block; font-weight:700; font-size:13.5px; color: var(--text-primary); }
.wk-c-what small { display:block; margin-top:2px; color: var(--text-secondary); font-size:11.5px; }
.wk-c-who { width:16%; }
.wk-who-name { font-weight:600; color: var(--text-primary); }
.wk-c-who small { display:block; margin-top:1px; color: var(--text-secondary); font-size:11px; }
.wk-c-area { width:11%; color: var(--text-secondary); }
.wk-c-status { width:13%; min-width:104px; }
.wk-c-do { width:9%; min-width:84px; text-align:right; }
.wk-sm { padding:6px 12px; font-size:12px; white-space:nowrap; }

/* A quiet word for the type, not a coloured badge competing with the status. */
.wk-kindtag { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.04em;
    text-transform:uppercase; padding:2px 8px; border-radius:6px;
    background: var(--bg-hover, rgba(15,23,42,.05)); color: var(--text-secondary); }
.wk-kindtag-field { background: rgba(59,130,246,.11); color:#1d4ed8; }

/* The second line of the status cell: what used to be a column of its own. */
.wk-rownotes { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.wk-tag { font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:6px;
    background: var(--bg-hover, rgba(15,23,42,.05)); color: var(--text-secondary); white-space:nowrap; }
.wk-tag-done { background: rgba(22,163,74,.12); color:#15803d; }
.wk-tag-plan { background: rgba(59,130,246,.12); color:#1d4ed8; }
.wk-tag-wait { background: rgba(245,158,11,.15); color:#b45309; }
.wk-tag-miss { background: rgba(220,38,38,.11); color:#b91c1c; }

.wk-tablenote { margin:10px 2px 0; font-size:12.5px; color: var(--text-secondary); }

/* ------------------------------------------------------- group heading */
.wk-group td { padding:11px 12px; background: var(--bg-sunken, rgba(15,23,42,.038));
    border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.wk-group.is-today td { background: var(--accent-soft); }
.wk-group-head { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; }
.wk-group-head strong { font-size:13.5px; color: var(--text-primary); letter-spacing:.01em; }
.wk-group-sub { font-size:12px; color: var(--text-secondary); }
.wk-group-tally { font-size:12px; color: var(--text-secondary); margin-left:auto; white-space:nowrap; }
.wk-empty-day td { padding:10px 12px 10px 46px; color: var(--text-secondary); font-size:12.5px; }

/* ------------------------------------------------------------- details */
.wk-detail-row td { padding:0 12px 16px 46px; background: var(--accent-soft); }
.wk-detail { display:grid; gap:14px; }
.wk-dwarn { margin:0; padding:9px 12px; border-radius:10px; font-size:13px;
    background: rgba(220,38,38,.09); color:#b91c1c; }

/* One panel, one grid. Headings span it, so the sections read in order and
   nothing is left stranded beside a short neighbour. */
.wk-dgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
    gap:14px 24px; margin:0; padding:16px 18px;
    border:1px solid var(--border); border-radius:14px; background: var(--bg-raised); }
.wk-dhead { grid-column:1 / -1; margin:6px 0 0; padding-top:10px;
    font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
    color: var(--accent); border-top:1px solid var(--border-soft); }
.wk-dhead:first-child { margin-top:0; padding-top:0; border-top:0; }
.wk-dnone { margin:0; font-size:13px; color: var(--text-secondary); }

.wk-field { min-width:0; }
.wk-field.is-wide { grid-column:1 / -1; }
.wk-field dt { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
    color: var(--text-secondary); margin-bottom:3px; }
.wk-field dd { margin:0; font-size:13px; line-height:1.6; color: var(--text-primary); overflow-wrap:anywhere; }
.wk-field dd a { color: var(--accent); font-weight:600; }
.wk-coord { display:block; font-variant-numeric: tabular-nums; letter-spacing:.01em; }
.wk-maplink { display:inline-block; margin-top:3px; font-size:12px; white-space:nowrap; }

.wk-photo { display:block; margin-top:12px; max-width:220px; border-radius:11px; overflow:hidden;
    border:1px solid var(--border); background: var(--bg-sunken); }
.wk-photo img { display:block; width:100%; height:auto; }
.wk-photo-missing { display:none; padding:12px; font-size:12.5px; color: var(--text-secondary); }

.wk-dactions { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }

/* For screen readers only: a column whose heading would otherwise be blank. */
.wk-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------------------------------------------------------------- phone
   The same table becomes one readable block per piece of work: a field agent
   standing at a pond should not have to scroll sideways to read their plan. */
@media (max-width: 760px) {
    .wk-filters { padding:12px; }
    .wk-filters select { max-width:100%; }
    .wk-filters label { flex:1 1 140px; }
    .wk-stats { grid-template-columns:repeat(auto-fit, minmax(98px, 1fr)); }

    .wk-table-wrap { overflow-x:visible; }
    .wk-worktable { min-width:0; width:100%; table-layout:auto; }
    .wk-worktable thead { display:none; }
    .wk-worktable tbody, .wk-worktable tr, .wk-worktable td { display:block; width:auto; }

    .wk-wrow { position:relative; padding:12px 13px 12px 40px; border-bottom:1px solid var(--border); }
    .wk-table-wrap .wk-worktable .wk-wrow td { border:0; padding:1px 0; }
    .wk-wrow.is-overdue { box-shadow: inset 3px 0 0 var(--danger); }
    .wk-wrow.is-overdue td:first-child { box-shadow:none; }

    .wk-worktable .wk-c-toggle { position:absolute; left:12px; top:15px; width:auto; padding:0; }
    .wk-worktable .wk-c-date, .wk-worktable .wk-c-time, .wk-worktable .wk-c-kind {
        display:inline-block; margin-right:10px; font-size:12.5px; }
    .wk-worktable .wk-c-date small { display:inline; margin-left:4px; }
    .wk-c-what { margin:3px 0 5px; }

    .wk-worktable .wk-c-who::before, .wk-worktable .wk-c-area::before {
        content:attr(data-label) ": "; font-size:10.5px; font-weight:800; text-transform:uppercase;
        letter-spacing:.04em; color: var(--text-secondary); }
    .wk-worktable .wk-c-who:empty, .wk-worktable .wk-c-area:empty { display:none; }
    .wk-worktable .wk-c-status { margin-top:5px; }
    .wk-worktable .wk-c-do { text-align:left; margin-top:9px; width:auto; }
    .wk-worktable .wk-c-do:empty { margin:0; }

    .wk-group td { padding:10px 13px; }
    .wk-group-tally { margin-left:0; white-space:normal; }
    .wk-detail-row td { padding:0 13px 14px; }
    .wk-empty-day td { padding:10px 13px; }
    .wk-dgrid { grid-template-columns:1fr 1fr; padding:14px; gap:12px 16px; }
}
