:root {
  --green:#2d6a4f; --green-light:#e8f5ee; --amber:#f4a261; --amber-light:#fff3e0;
  --red:#c0392b; --text:#1a1a1a; --text-secondary:#666; --border:#e0e0e0;
  --bg:#f7f7f5; --card:#ffffff; --radius:12px; --radius-sm:8px;
  --sidebar:360px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text)}

/* ── MOBILE layout (default) ── */
/* Use safe-area-inset so content clears the iPhone home indicator */
#app{display:flex;flex-direction:column;height:100dvh;max-width:480px;margin:0 auto;background:var(--card);position:relative;overflow:hidden;box-shadow:0 0 40px rgba(0,0,0,.12);
  padding-bottom:env(safe-area-inset-bottom,0px)}
/* Mobile: map is the primary view; sidebar slides in as an overlay */
#main-panel{display:none}
#map-panel{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;position:relative}
#overview-panel{display:flex!important}

/* Floating Jobs button (mobile only) */
.mob-jobs-btn{
  position:absolute;bottom:80px;left:12px;z-index:40;
  background:#1a3d2b;color:#fff;border:none;border-radius:20px;
  padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:7px;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.mob-jobs-badge{
  background:#f59e0b;color:#1a3d2b;border-radius:10px;
  padding:1px 6px;font-size:11px;font-weight:700;
}
/* GPS tracking button (mobile only) */
.mob-gps-btn{
  position:absolute;bottom:80px;right:12px;z-index:40;
  width:44px;height:44px;border-radius:50%;
  background:#fff;color:#1a3d2b;border:none;
  font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.mob-gps-btn.active{background:#97C459;}

/* Sidebar overlay on mobile */
#main-panel.mob-open{
  display:flex;position:fixed;inset:0;z-index:50;background:var(--card,#fff);
  flex-direction:column;overflow:hidden;
}
.mob-sidebar-close{
  display:flex;align-items:center;gap:8px;padding:10px 14px;
  background:var(--green,#2d6a4f);color:#fff;font-size:13px;font-weight:600;
  cursor:pointer;border:none;width:100%;text-align:left;
}

/* GPS locate button shown in overview topbar on desktop too */
#overview-gps-btn{display:none}

/* Active GPS state for mobile button */
.mob-gps-btn.active{background:#97C459;color:#1a3d2b;}

/* ── DESKTOP layout (≥900px) — restore sidebar, hide mobile-only controls ── */
@media(min-width:900px){
  #app{max-width:100%;flex-direction:row;height:100dvh;box-shadow:none;border-right:1px solid var(--border)}
  #main-panel{width:var(--sidebar);flex:none;border-right:1px solid var(--border);display:flex!important;flex-direction:column;overflow:hidden;position:static}
  #map-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}
  .mob-jobs-btn,.mob-gps-btn,.mob-sidebar-close{display:none!important}

  /* On desktop, overlays become inline panels inside #map-panel instead of full-screen */
  .overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:transparent;z-index:10;display:none;flex-direction:column}
  .overlay.open{display:flex}
  /* The map itself fills the right panel at all times */
  #map-container,#boundary-map-container{flex:1;min-height:0}
  /* Topbar inside overlay panels on desktop */
  .overlay .topbar{background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
  /* Sheet overlays stay centered over full page on desktop */
  .sheet-overlay{position:fixed}
}

/* ── Shared top bar ── */
/* Top padding includes the iPhone notch inset (0 elsewhere) so every top bar —
   main sidebar, map overview, and overlays — clears the notch in standalone PWA. */
.topbar{display:flex;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 10px;background:var(--card);border-bottom:1px solid var(--border);flex-shrink:0}
.topbar-title{font-size:17px;font-weight:600;flex:1}
.topbar-sub{font-size:12px;color:var(--text-secondary);margin-top:1px}
.icon-btn{width:34px;height:34px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card);color:var(--text-secondary);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.icon-btn:active,.icon-btn:hover{background:var(--bg)}

/* ── Tab bar ── */
.tab-bar{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--card)}
.tab-btn{flex:1;padding:11px 4px 9px;font-size:13px;font-weight:500;color:var(--text-secondary);border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab-btn.active{color:var(--green);border-bottom-color:var(--green)}
.tab-btn:hover:not(.active){color:var(--text);background:var(--bg)}
.tab-badge{display:inline-block;font-size:10px;background:var(--amber);color:white;border-radius:8px;padding:1px 5px;font-weight:600;margin-left:3px;vertical-align:middle}

/* ── Scroll area ── */
.tab-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.tab-pane{display:none}.tab-pane.active{display:block}
.section-header{padding:10px 16px 4px;background:var(--bg);border-bottom:1px solid var(--border)}
.section-label{font-size:10px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.6px}
.section-note{font-size:12px;color:var(--text-secondary);padding:8px 16px;border-bottom:1px solid var(--border);line-height:1.5}

/* ── Paddock rows ── */
.paddock-row{border-bottom:1px solid var(--border)}
.paddock-header{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;background:var(--card);user-select:none}
.paddock-header:active,.paddock-header:hover{background:var(--bg)}
.paddock-icon{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--green-light);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.paddock-title{font-size:15px;font-weight:600}
.paddock-sub{font-size:12px;color:var(--text-secondary);margin-top:1px}
.chevron{font-size:14px;color:var(--text-secondary);transition:transform .2s;flex-shrink:0}
.chevron.open{transform:rotate(90deg)}
.splits-area{background:var(--bg);border-top:1px solid var(--border);display:none}
.splits-area.open{display:block}
.split-row{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 28px;border-bottom:1px solid var(--border)}
.split-row:last-child{border-bottom:none}
.split-name{font-size:13px;font-weight:500;flex:1}
.split-sub{font-size:11px;color:var(--text-secondary)}
.add-split-row{display:flex;align-items:center;gap:8px;padding:10px 16px 10px 28px;color:var(--green);font-size:13px;font-weight:500;cursor:pointer}
.add-split-row:active,.add-split-row:hover{background:var(--green-light)}

/* ── Badges ── */
.badge{display:inline-block;font-size:10px;font-weight:600;padding:2px 7px;border-radius:20px}
.badge-green{background:var(--green-light);color:var(--green)}
.badge-gray{background:#f0f0f0;color:#888}
.badge-amber{background:var(--amber-light);color:#b5540a}
.split-menu-btn{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text-secondary);cursor:pointer;flex-shrink:0}
.split-menu-btn:active,.split-menu-btn:hover{background:var(--border)}

/* ── Jobs ── */
.job-group-label{padding:8px 16px 4px;background:var(--bg);border-bottom:1px solid var(--border);font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}
.job-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--card)}
.job-row:hover{background:var(--bg)}
.job-check{width:24px;height:24px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.job-check.checked{background:var(--green);border-color:var(--green);color:white;font-size:13px}
.job-name{font-size:14px;font-weight:500}
.job-sub{font-size:11px;color:var(--text-secondary);margin-top:2px}
.go-btn{background:var(--green);color:white;border:none;border-radius:var(--radius-sm);padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0}
.go-btn:active,.go-btn:hover{opacity:.85}
.jobs-empty{text-align:center;padding:48px 24px;color:var(--text-secondary)}
.jobs-empty-icon{font-size:40px;margin-bottom:12px}
.jobs-empty-text{font-size:14px;line-height:1.6}
.jobs-action-row{padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));display:flex;gap:8px;border-top:1px solid var(--border)}

/* ── History ── */
.history-row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--border)}
.hist-tick{width:26px;height:26px;border-radius:50%;background:var(--green-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;color:var(--green)}
.history-empty{text-align:center;padding:48px 24px;color:var(--text-secondary);font-size:14px}

/* ── Buttons ── */
.bottom-bar{padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);flex-shrink:0;background:var(--card);display:flex;gap:8px}
.btn{border-radius:var(--radius-sm);padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;border:none}
.btn:active,.btn:hover{opacity:.88}
.btn-primary{background:var(--green);color:white;flex:1}
.btn-secondary{background:var(--card);color:var(--text);border:1px solid var(--border)}

/* ── Overlays ── */
/* Mobile: fixed full-screen over everything */
.overlay{
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:var(--card); z-index:50;
  display:none; flex-direction:column;
}
.overlay.open{ display:flex; }

/* Desktop: overlays are moved into #map-panel by JS,
   so they fill the right panel rather than the full screen */
@media(min-width:900px){
  .overlay{
    position:absolute;
  }
}

/* ── Map containers ── */
#map-container{flex:1;position:relative;min-height:0}
#map{width:100%;height:100%}
#boundary-map-container{flex:1;position:relative;min-height:0}
#boundary-map{width:100%;height:100%}
.mapboxgl-ctrl-logo{display:none!important}
.map-info-bar{position:absolute;bottom:0;left:0;right:0;background:rgba(255,255,255,.93);backdrop-filter:blur(6px);padding:8px 14px;display:flex;align-items:center;justify-content:space-between;font-size:12px;border-top:1px solid var(--border);z-index:2;gap:8px;flex-wrap:wrap}
.map-info-stat{color:var(--text-secondary)}
.map-info-stat strong{color:var(--green)}

/* ── Map toolbar ── */
.map-toolbar{display:flex;gap:6px;padding:8px 12px;background:var(--card);border-top:1px solid var(--border);overflow-x:auto;flex-shrink:0}
.map-tool{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);font-size:10px;font-weight:500;color:var(--text-secondary);cursor:pointer;white-space:nowrap;min-width:52px;background:var(--card)}
.map-tool:hover{background:var(--bg)}
.map-tool.active{border-color:var(--green);color:var(--green);background:var(--green-light)}
.map-tool-icon{font-size:17px}

/* ── Navigate ── */
.nav-stats{display:flex;gap:8px;padding:10px 14px;flex-shrink:0}
.nav-stat{flex:1;background:var(--bg);border-radius:var(--radius-sm);padding:8px 10px}
.nav-stat-val{font-size:17px;font-weight:600}
.nav-stat-lbl{font-size:10px;color:var(--text-secondary);margin-top:1px}
.compass-wrap{padding:10px 16px 4px;text-align:center;flex-shrink:0}
.compass-ring{width:88px;height:88px;border-radius:50%;border:2px solid var(--border);position:relative;margin:0 auto 10px}
.compass-needle{position:absolute;top:50%;left:50%;width:4px;height:36px;margin-left:-2px;margin-top:-34px;background:var(--green);border-radius:2px 2px 0 0;transform-origin:bottom center;transition:transform 0.15s ease-out}
.compass-needle::after{content:'';position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);width:4px;height:18px;background:var(--border);border-radius:0 0 2px 2px}
.nav-distance{font-size:32px;font-weight:700;color:var(--text)}
.nav-direction{font-size:13px;color:var(--text-secondary);margin-top:2px}
.steps-card{margin:8px 14px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;flex-shrink:0}
.steps-header{background:var(--green);color:white;padding:9px 14px;font-size:13px;font-weight:600}
.step-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border)}
.step-row:last-child{border-bottom:none}
.step-num{width:26px;height:26px;border-radius:50%;background:var(--green-light);color:var(--green);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.step-num.done{background:var(--green);color:white}
.step-num.active{background:var(--amber);color:white}
.step-label{font-size:13px;font-weight:500}
.step-sub{font-size:11px;color:var(--text-secondary)}

/* ── Bottom sheets ── */
.sheet-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:100;display:none;align-items:flex-end;overflow:hidden}
.sheet-overlay.open{display:flex}
@media(min-width:900px){
  .sheet-overlay{position:fixed;align-items:center;justify-content:center}
  .sheet{border-radius:var(--radius);max-width:420px;width:100%;margin:0 16px}
}
.sheet{background:var(--card);border-radius:var(--radius) var(--radius) 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));width:100%}
.sheet-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 14px}
@media(min-width:900px){.sheet-handle{display:none}}
.sheet-title{font-size:16px;font-weight:600;margin-bottom:2px}
.sheet-sub{font-size:12px;color:var(--text-secondary);margin-bottom:14px}
.sheet-btn{width:100%;padding:12px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:10px;margin-bottom:8px;border:none;text-align:left}
.sheet-btn:last-child{margin-bottom:0}
.sheet-btn:hover{opacity:.9}
.sheet-btn-primary{background:var(--green);color:white}
.sheet-btn-secondary{background:var(--bg);color:var(--text);border:1px solid var(--border)!important}
.sheet-btn-danger{background:#fdecea;color:var(--red)}
.sheet-btn-amber{background:var(--amber-light);color:#b5540a}

/* ── Inputs ── */
.input-group{margin-bottom:12px}
.input-label{font-size:12px;font-weight:500;color:var(--text-secondary);margin-bottom:4px}
.input-field{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:14px;background:var(--bg);color:var(--text)}
.input-field:focus{outline:none;border-color:var(--green)}

/* ── Area chips ── */
.area-chips{display:flex;flex-wrap:wrap;gap:4px;padding:6px 14px 8px;border-top:1px solid var(--border);background:rgba(232,245,238,.5)}
.area-chip{font-size:11px;padding:3px 8px;border-radius:10px;background:var(--green-light);color:var(--green);font-weight:500}

/* ── Desktop: map panel placeholder when no overlay open ── */
#map-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-secondary);background:var(--bg)}
#map-placeholder h2{font-size:18px;font-weight:600;color:var(--text)}
#map-placeholder p{font-size:14px;max-width:300px;text-align:center;line-height:1.5}

/* ── Toast ── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1a1a1a;color:white;padding:8px 16px;border-radius:20px;font-size:13px;white-space:nowrap;z-index:200;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.show{opacity:1}

/* ── Mapbox marker dots ── */
.mb-start-dot,.mb-end-dot,.mb-pending-dot,.mb-gps-dot,.mb-boundary-dot{width:14px;height:14px;border:2px solid white;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:grab}
.mb-start-dot{background:var(--green)}
.mb-end-dot{background:#e74c3c}
.mb-pending-dot{background:var(--amber)}
.mb-gps-dot{background:#3a80d2}
.mb-boundary-dot{background:#8e44ad;width:12px;height:12px}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(58,128,210,.4)}50%{box-shadow:0 0 0 8px rgba(58,128,210,0)}}
.mb-gps-dot{animation:pulse 2s infinite}

/* ── Overview map panel ── */
#overview-panel{ background:var(--card); }
#overview-map{ width:100%; height:100%; }
.mb-paddock-label{
  background:rgba(45,106,79,0.88); color:white;
  font-size:14px; font-weight:700;
  padding:4px 12px; border-radius:20px;
  border:2px solid rgba(255,255,255,0.95);
  box-shadow:0 2px 10px rgba(0,0,0,0.45);
  white-space:nowrap; cursor:default;
  letter-spacing:0.2px;
}
/* Job pin on the overview map — paddock that has work to do */
.mb-job-pin{
  display:flex; align-items:center; gap:5px;
  background:#b45309; color:#fff;
  font-weight:700; padding:5px 11px; border-radius:18px;
  border:2px solid #fff; box-shadow:0 2px 12px rgba(0,0,0,0.5);
  white-space:nowrap; cursor:pointer;
}
.mb-job-pin-pad{ font-size:15px; }
.mb-job-pin-ico{ font-size:14px; }
.mb-split-label{
  background:rgba(244,162,97,0.92); color:white;
  font-size:12px; font-weight:600;
  padding:3px 9px; border-radius:12px;
  border:2px solid rgba(255,255,255,0.9);
  box-shadow:0 1px 5px rgba(0,0,0,0.3);
  white-space:nowrap; cursor:default;
}
/* Draggable fence endpoint in editor */
.mb-drag-dot{
  width:18px; height:18px;
  border:3px solid white; border-radius:50%;
  box-shadow:0 2px 8px rgba(0,0,0,0.5);
  cursor:grab;
}
.mb-drag-dot:active{ cursor:grabbing; transform:scale(1.2); }
.mb-drag-dot.start{ background:#2d6a4f; }
.mb-drag-dot.end{ background:#e74c3c; }

/* ── Active split row (desktop click to focus) ── */
.split-row-active{
  background: var(--green-light) !important;
  border-left: 3px solid var(--green);
  padding-left: 25px; /* compensate for border */
}
.split-row{ cursor:default; }
@media(min-width:900px){ .split-row{ cursor:pointer; } .split-row:hover{ background:var(--green-light); } }

/* ── Endpoint dots on overview / jobs map ── */
.mb-ov-start-dot{
  width:12px; height:12px;
  background:#2d6a4f; border:2.5px solid white;
  border-radius:50%;
  box-shadow:0 1px 5px rgba(0,0,0,0.45);
}
.mb-ov-end-dot{
  width:12px; height:12px;
  background:#e74c3c; border:2.5px solid white;
  border-radius:50%;
  box-shadow:0 1px 5px rgba(0,0,0,0.45);
}

/* ── Navigate map distance badge ── */
#nav-dist-float{
  position:absolute; bottom:12px; right:12px; z-index:10;
  background:rgba(255,255,255,0.94); backdrop-filter:blur(8px);
  border-radius:var(--radius); padding:10px 14px;
  box-shadow:0 2px 12px rgba(0,0,0,0.2);
  text-align:center; min-width:80px;
  border:1px solid var(--border);
}
#nav-dist-num{
  font-size:28px; font-weight:700; color:var(--text); line-height:1;
}
#nav-dist-unit{
  font-size:12px; color:var(--text-secondary); margin-top:2px;
}
/* Nav map target marker */
.mb-nav-target{
  width:22px; height:22px;
  background:var(--amber); border:3px solid white;
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(244,162,97,0.35), 0 2px 8px rgba(0,0,0,0.3);
}
/* Nav map user position marker */
.mb-nav-user{
  width:18px; height:18px;
  background:#3a80d2; border:3px solid white;
  border-radius:50%;
  box-shadow:0 0 0 5px rgba(58,128,210,0.25), 0 2px 8px rgba(0,0,0,0.25);
}
/* Accuracy circle rendered as pulsing ring */
@keyframes navpulse{
  0%,100%{box-shadow:0 0 0 0 rgba(58,128,210,0.35),0 2px 8px rgba(0,0,0,0.25)}
  50%{box-shadow:0 0 0 12px rgba(58,128,210,0),0 2px 8px rgba(0,0,0,0.25)}
}
.mb-nav-user{ animation:navpulse 2s infinite; }

/* ── Wizard ── */
.wizard-step-pill{
  background:var(--green-light); color:var(--green);
  font-size:12px; font-weight:600;
  padding:3px 10px; border-radius:20px;
  border:1px solid var(--green);
}
#wizard-boundary-map-container{
  flex:1; position:relative; min-height:0;
}
#wizard-boundary-map{ width:100%; height:100%; }

/* ── Add paddock row ── */
.add-paddock-row{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; color:var(--green);
  font-size:14px; font-weight:500; cursor:pointer;
  border-bottom:1px solid var(--border);
}
.add-paddock-row:hover{ background:var(--green-light); }

/* ── Streamlined split sheet primary actions ── */
#sheet-split .btn-primary{ background:var(--green); color:white; }
#sheet-split .btn{ background:var(--amber-light); color:#b5540a; border:1px solid var(--amber); border-radius:var(--radius-sm); padding:10px 16px; font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; }

/* ── Arrival circle on nav map ── */
.mb-arrival-ring{
  width:80px; height:80px;
  border:3px solid rgba(244,162,97,0.5);
  border-radius:50%;
  pointer-events:none;
  animation:arrivalPulse 2s ease-in-out infinite;
}
@keyframes arrivalPulse{
  0%,100%{ transform:scale(1); opacity:0.6; }
  50%{ transform:scale(1.12); opacity:0.3; }
}

/* ── UI polish ── */
/* Bigger tap targets on split rows (easier with gloves/cold hands) */
.split-row{ min-height:52px; }
.split-menu-btn{ width:36px; height:36px; } /* larger hit area for ⋮ */

/* Slightly larger step rows in nav for fat-finger friendliness */
.step-row{ padding:12px 14px; }

/* Make job rows taller on mobile */
.job-row{ min-height:60px; }

/* Add paddock row more prominent */
.add-paddock-row{ min-height:52px; font-size:15px; }
.add-split-row{ min-height:48px; }

/* Improve button feedback on touch */
.btn:active{ transform:scale(0.97); }
.go-btn:active{ transform:scale(0.97); }
.sheet-btn:active{ opacity:0.8; transform:scale(0.98); }

/* Notch inset is handled by each overlay's .topbar (above), so the overlay
   container itself must NOT also pad — that would double the inset. */
.overlay{
  padding-top:0;
}
@media(min-width:900px){
  /* Desktop: no safe area needed, reset bottom-bar padding */
  .bottom-bar{ padding-bottom:10px; }
  .sheet{ padding-bottom:16px; }
  .jobs-action-row{ padding-bottom:12px; }
}

/* Jobs filter bar */
.jobs-filter-bar { display:flex; align-items:center; justify-content:space-between; padding:8px 12px 4px; }
.jobs-progress-lbl { font-size:12px; color:var(--text-secondary,#64748b); font-weight:500; }
.filter-btn { border:1px solid var(--border,#e2e8f0); border-radius:16px; padding:3px 12px; font-size:12px; background:#fff; cursor:pointer; color:var(--text-secondary,#64748b); }
.filter-btn.active { background:var(--green,#2d6a4f); color:#fff; border-color:var(--green,#2d6a4f); }
.job-overdue-tag { font-size:10px; background:#fef3c7; color:#b45309; border-radius:4px; padding:1px 5px; margin-left:5px; font-weight:600; }

/* Job rows — new tick-to-complete style */
.job2-group { margin-bottom: 4px; }
.job2-group-hdr { font-size: 12px; font-weight: 700; color: var(--text-secondary,#64748b); padding: 10px 14px 4px; text-transform: uppercase; letter-spacing: .04em; }
.job2-row { display:flex; align-items:center; gap:12px; padding:13px 14px; background:var(--card,#fff); border-bottom:1px solid var(--border,#f1f5f9); cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; }
.job2-row:active { background:#f0fdf4; }
.job2-feed { background:#fffbeb; }
.job2-feed:active { background:#fef3c7; }
.job2-tick { width:28px; height:28px; border-radius:50%; border:2px solid var(--border,#d1d5db); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; font-weight:700; transition:all .15s; }
.job2-tick.checked { background:var(--green,#2d6a4f); border-color:var(--green,#2d6a4f); color:#fff; }
.job2-body { flex:1; min-width:0; }
.job2-title { font-size:14px; font-weight:600; color:var(--text-primary,#0f172a); }
.job2-sub   { font-size:12px; color:var(--text-secondary,#64748b); margin-top:2px; }

/* Wake lock button */
.wake-btn { position:absolute; top:12px; right:56px; z-index:40; width:36px; height:36px; border-radius:50%; background:rgba(26,61,43,.7); border:none; color:rgba(255,255,255,.7); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.wake-btn.active { background:rgba(151,196,89,.9); color:#1a3d2b; }

/* Cover tab */
.cover-row { display:block; padding:12px 14px; border-bottom:1px solid var(--border,#f1f5f9); background:#fff; }
.cover-row-head { display:flex; align-items:baseline; gap:8px; margin-bottom:8px; }
.cover-pad-name { font-size:15px; font-weight:600; color:var(--text-primary,#0f172a); }
.cover-pad-sub { font-size:12px; color:var(--text-secondary,#64748b); }
.cover-pick-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cover-pick { border:1px solid var(--border,#d7ddd0); background:#fff; color:var(--green,#2d6a4f); border-radius:18px; padding:8px 14px; font-size:14px; font-weight:600; cursor:pointer; }
.cover-pick:active { background:var(--green,#2d6a4f); color:#fff; }
.cover-input { width:74px; border:1px solid var(--border,#e2e8f0); border-radius:6px; padding:8px; font-size:14px; text-align:right; }
.cover-save-btn { background:var(--green,#2d6a4f); color:#fff; border:none; border-radius:6px; width:36px; height:36px; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; }

/* RD37 branded topbar (Fieldwork) */
.rd-topbar { background: var(--rd-header, #1a3d2b); border-bottom: none; gap: 10px; align-items: center; }
.rd-topbar .topbar-title { font-family: var(--rd-font-head, 'DM Sans'), sans-serif; }

/* Switcher + user chip on the dark Fieldwork topbar */
.rd-topbar .fs-btn { background: rgba(255,255,255,.14); color:#fff; max-width:100%; }
.rd-topbar .fs-btn:hover { background: rgba(255,255,255,.24); }
.rd-topbar .fs-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rd-topbar .rd37-user-name { color:#fff; }
.rd-topbar .rd37-user-out { background:rgba(255,255,255,.16); color:#fff; }
@media(max-width:480px){
  .rd-topbar .rd37-user-name { display:none; }  /* save space on phone — keep just Sign out */
}