/* Work Plan (work-plan.js), shared by index.html and mobile.html. Uses each page's theme tokens (--menu-bg, --glass-*,
   --text*, --turquoise, --accent*, --w*), so light and dark both work. */

/* ---- the Map tab button ---- */
.wp-btn-map{ display:inline-flex; align-items:center; gap:6px; }
.wp-btn-map .wp-ico{ width:15px; height:15px; color:var(--turquoise); }
/* phone: a glass pill on the map, top left (under the Projects pill when a client has one) */
.wp-fab{
  position:absolute; left:14px; top:calc(var(--safe-top, 0px) + 70px); z-index:36;
  display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 12px; border-radius:999px;
  font:inherit; font-size:12px; font-weight:600; color:var(--text); cursor:pointer;
  background:var(--glass-bg-strong); border:1px solid var(--glass-border); box-shadow:0 4px 14px rgba(3,9,20,0.3);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
}
.wp-fab::after{ content:''; position:absolute; left:50%; top:50%; width:max(100%,44px); height:44px; transform:translate(-50%,-50%); }
.wp-fab .wp-ico{ width:15px; height:15px; color:var(--turquoise); }
.wp-fab:focus-visible{ outline:2px solid var(--turquoise); outline-offset:2px; }
.app:has(#newProjectBtn:not([style*="none"])) .wp-fab{ top:calc(var(--safe-top, 0px) + 114px); }
.app.off-map .wp-fab, .app.tc-reviewing .wp-fab{ display:none !important; }
/* Work Plan off (10/30): the button is a copy of Ticket Management's orange "Review projects" */
/* (the orange tint sits on the button's own solid surface: over the satellite map a see-through tint is unreadable) */
.wp-btn-map.wp-review, .wp-fab.wp-review{ background:linear-gradient(rgba(240,120,40,0.18), rgba(240,120,40,0.18)), var(--surface); border-color:rgba(240,120,40,0.55); color:#F7A066; font-weight:600; }
.wp-btn-map.wp-review:hover, .wp-fab.wp-review:hover{ background:linear-gradient(rgba(240,120,40,0.26), rgba(240,120,40,0.26)), var(--surface); border-color:rgba(240,120,40,0.8); }
:root[data-theme="light"] .wp-btn-map.wp-review, :root[data-theme="light"] .wp-fab.wp-review{ background:linear-gradient(rgba(230,110,30,0.14), rgba(230,110,30,0.14)), var(--surface); border-color:rgba(170,75,10,0.42); color:#9A4310; }

/* ---- the window ---- */
.wp-overlay{ position:fixed; inset:0; z-index:2500; display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(3,9,20,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.wp-overlay[hidden]{ display:none; }
:root[data-theme="light"] .wp-overlay{ background:rgba(20,50,90,.28); }
.wp-modal{ width:min(860px, 100%); max-height:min(92vh, 980px); display:flex; flex-direction:column; overflow:hidden;
  border-radius:18px; background:var(--menu-bg); color:var(--text); border:1px solid var(--glass-border);
  box-shadow:0 24px 70px rgba(0,0,0,.45); font-size:13px; animation:wpIn .16s ease; }
@keyframes wpIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .wp-modal{ animation:none; } }
.wp-modal:focus{ outline:none; }
.wp-overlay .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.wp-head{ display:flex; align-items:center; gap:12px; padding:14px 16px 12px; border-bottom:1px solid var(--glass-border); }
.wp-head-l{ display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
.wp-head-l > div{ min-width:0; }
.wp-head-ico{ width:36px; height:36px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:10px;
  background:color-mix(in srgb, var(--turquoise) 16%, transparent); color:var(--turquoise); }
.wp-head-ico .wp-ico{ width:20px; height:20px; }
.wp-h{ font-size:16px; font-weight:700; }
.wp-sub{ font-size:12px; color:var(--text-muted); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wp-tabs{ display:flex; gap:2px; padding:3px; border-radius:10px; background:var(--w50); border:1px solid var(--glass-border); flex:none; }
.wp-tabs button{ font:inherit; font-size:12.5px; font-weight:600; color:var(--text-muted); background:none; border:0; border-radius:8px; padding:6px 12px; min-height:32px; cursor:pointer; }
.wp-tabs button.on{ background:var(--accent-fill); color:#fff; }
.wp-tabs button:focus-visible, .wp-x:focus-visible{ outline:2px solid var(--turquoise); outline-offset:1px; }
.wp-x{ width:36px; height:36px; flex:none; border:0; border-radius:10px; background:var(--w50); color:var(--text); font-size:22px; line-height:1; cursor:pointer; }

.wp-body{ flex:1; overflow-y:auto; padding:14px 16px 18px; -webkit-overflow-scrolling:touch; }
.wp-foot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; padding:10px 16px 12px; border-top:1px solid var(--glass-border); }
.wp-foot:empty{ display:none; }
.wp-msg{ flex:1; min-width:160px; font-size:12px; color:var(--text-muted); }
.wp-msg.is-ok{ color:var(--clear); } .wp-msg.is-bad{ color:var(--open); } .wp-msg.is-busy{ color:var(--text); }
.wp-msg.is-busy::before{ content:''; display:inline-block; width:11px; height:11px; margin-right:7px; vertical-align:-1px; border-radius:50%;
  border:2px solid var(--turquoise); border-right-color:transparent; animation:wpSpin .8s linear infinite; }
@keyframes wpSpin{ to{ transform:rotate(360deg); } }
.wp-btns{ display:flex; gap:8px; }
.wp-btn{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:13px; font-weight:600; min-height:38px; padding:0 14px; border-radius:10px; cursor:pointer;
  color:var(--text); background:var(--w50); border:1px solid var(--glass-border); }
.wp-btn:hover{ border-color:var(--turquoise); }
.wp-btn:focus-visible{ outline:2px solid var(--turquoise); outline-offset:2px; }
.wp-btn:disabled{ opacity:.55; cursor:default; }
.wp-btn.wp-primary{ background:var(--accent-fill); border-color:var(--accent-fill); color:#fff; }
.wp-btn .wp-ico{ width:15px; height:15px; }

.wp-empty{ color:var(--text-muted); margin:8px 0; }
.wp-empty-big{ text-align:center; padding:36px 12px; color:var(--text-muted); }
.wp-empty-big .wp-ico{ width:40px; height:40px; color:var(--turquoise); margin-bottom:6px; }
.wp-empty-big p{ margin:4px 0; } .wp-empty-big b{ color:var(--text); }

/* ---- sections ---- */
.wp-sec{ margin-top:18px; }
.wp-sec:first-child{ margin-top:0; }
.wp-sec h4{ display:flex; align-items:center; gap:7px; margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.wp-sec h4 .wp-ico{ width:14px; height:14px; color:var(--turquoise); }
.wp-n{ display:inline-flex; min-width:18px; height:18px; padding:0 5px; align-items:center; justify-content:center; border-radius:99px; background:var(--w80); color:var(--text); font-size:10.5px; letter-spacing:0; }
.wp-src{ font-size:11px; color:var(--text-muted); margin:6px 0 0; }
.wp-intro{ margin:0 0 14px; color:var(--text-muted); font-size:12.5px; max-width:70ch; }
.wp-intro i, .wp-f i{ color:var(--open); font-style:normal; }
.wp-none{ margin:0 0 8px; color:var(--text-muted); font-size:12.5px; }

/* ---- Edit info ---- */
.wp-entry{ border:1px solid var(--glass-border); border-radius:12px; padding:10px 12px 12px; margin-bottom:8px; background:var(--w50); }
.wp-entry-h{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.wp-entry-h b{ font-family:'IBM Plex Mono', monospace; font-size:13px; }
.wp-entry-h > span:not(.wp-entry-tools){ font-size:11.5px; color:var(--text-muted); }
.wp-entry-tools{ margin-left:auto; display:flex; gap:4px; }
.wp-mini{ width:30px; height:30px; border-radius:8px; border:1px solid var(--glass-border); background:none; color:var(--text-muted); font-size:15px; line-height:1; cursor:pointer; }
.wp-mini:hover{ color:var(--text); border-color:var(--turquoise); }
.wp-mini:focus-visible{ outline:2px solid var(--turquoise); outline-offset:1px; }
.wp-grid{ display:grid; gap:8px 10px; grid-template-columns:repeat(2, minmax(0,1fr)); }
.wp-grid-current{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.wp-grid-current .wp-f:nth-child(1){ grid-column:1 / 2; }
.wp-grid-current .wp-f:nth-child(2){ grid-column:2 / 4; }
.wp-grid-next{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.wp-grid-on_hold{ grid-template-columns:1fr; }
.wp-f{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.wp-f > span{ font-size:11.5px; font-weight:600; color:var(--text-muted); }
.wp-f input, .wp-f .dp-btn, .wp-f select, .wp-add{
  font:inherit; font-size:13px; color:var(--text); background:var(--menu-bg); border:1px solid var(--glass-border);
  border-radius:9px; padding:8px 10px; min-height:38px; width:100%; box-sizing:border-box; color-scheme:dark;
}
:root[data-theme="light"] .wp-f input, :root[data-theme="light"] .wp-f .dp-btn, :root[data-theme="light"] .wp-f select, :root[data-theme="light"] .wp-add{ color-scheme:light; background:#fff; }
.wp-f input:focus, .wp-f .dp-btn:focus-visible, .wp-f select:focus, .wp-add:focus{ outline:2px solid var(--turquoise); outline-offset:0; border-color:transparent; }
.wp-f input.wp-bad, .wp-f .dp-btn.wp-bad{ border-color:var(--open); box-shadow:0 0 0 1px var(--open); }
.wp-f input:disabled, .wp-f .dp-btn:disabled, .wp-f select:disabled{ opacity:.7; }
.wp-f-inline{ flex-direction:row; align-items:center; gap:10px; }
.wp-f-inline select{ width:auto; }
.wp-add{ cursor:pointer; color:var(--turquoise); font-weight:600; border-style:dashed; background:transparent !important; }
.wp-add option{ color:initial; }

/* ---- Plan ---- */
.wp-hist{ border:1px solid var(--glass-border); border-radius:14px; padding:10px 12px; background:var(--w50); }
.wp-hist-day + .wp-hist-day{ margin-top:6px; }
.wp-hist-dh{ font-size:11.5px; font-weight:700; color:var(--text); margin:2px 0 4px; }
.wp-hist-row{ display:flex; align-items:stretch; gap:6px; margin-bottom:4px; }
.wp-hist-open{ flex:1; min-width:0; display:flex; align-items:center; gap:10px; text-align:left; font:inherit; font-size:12px; color:var(--text-muted);
  background:none; border:1px solid var(--glass-border); border-radius:9px; padding:6px 10px; min-height:36px; cursor:pointer; }
.wp-hist-open b{ color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; flex:none; min-width:62px; }
.wp-hist-open span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wp-hist-open i{ margin-left:auto; flex:none; font-style:normal; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--turquoise); }
.wp-hist-open:hover{ border-color:var(--turquoise); }
.wp-hist-row.on .wp-hist-open{ border-color:var(--turquoise); background:color-mix(in srgb, var(--turquoise) 12%, transparent); }
.wp-hist-pdf{ flex:none; font:inherit; font-size:11px; font-weight:700; color:var(--turquoise); background:none; border:1px solid var(--glass-border); border-radius:9px; padding:0 10px; min-height:36px; cursor:pointer; }
.wp-hist-pdf:hover{ border-color:var(--turquoise); }
.wp-hist-open:focus-visible, .wp-hist-pdf:focus-visible, .wp-hist-more:focus-visible, .wp-back-latest:focus-visible{ outline:2px solid var(--turquoise); outline-offset:1px; }
.wp-hist-more{ font:inherit; font-size:11.5px; font-weight:600; color:var(--turquoise); background:none; border:0; padding:4px 0; cursor:pointer; }
.wp-hist + .wp-tiles, .wp-old + .wp-tiles{ margin-top:14px; }
.wp-old{ margin-top:12px; padding:8px 12px; border-radius:10px; font-size:12px; background:color-mix(in srgb, var(--warn) 16%, transparent); border:1px solid color-mix(in srgb, var(--warn) 45%, transparent); }
.wp-back-latest{ font:inherit; font-size:12px; font-weight:700; color:var(--turquoise); background:none; border:0; padding:0 0 0 4px; cursor:pointer; text-decoration:underline; }
.wp-tiles{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
.wp-tile{ border:1px solid var(--glass-border); border-radius:12px; padding:10px 12px; background:var(--w50); min-width:0; }
.wp-tile-l{ font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); }
.wp-tile-v{ font-size:19px; font-weight:700; margin-top:3px; font-variant-numeric:tabular-nums; }
.wp-tile-v small{ font-size:11px; font-weight:500; color:var(--text-muted); }
.wp-tile-s{ font-size:11px; color:var(--text-muted); margin-top:2px; }

.wp-agent{ border:1px solid color-mix(in srgb, var(--turquoise) 40%, transparent); border-radius:14px; padding:12px 14px;
  background:color-mix(in srgb, var(--turquoise) 7%, transparent); }
.wp-agent h4{ color:var(--turquoise); }
.wp-md h5{ margin:12px 0 4px; font-size:13px; font-weight:700; color:var(--text); }
.wp-md h5:first-child{ margin-top:0; }
.wp-md ul{ margin:0; padding-left:18px; }
.wp-md li{ margin:3px 0; line-height:1.45; }
.wp-md p{ margin:4px 0; line-height:1.45; }

.wp-wx{ display:grid; grid-template-columns:repeat(14, minmax(50px, 1fr)); gap:4px; overflow-x:auto; padding-bottom:2px; }
.wp-wx-d{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 2px; border-radius:9px; background:var(--w50); border:1px solid var(--glass-border); font-size:11px; text-align:center; }
.wp-wx-d b{ font-size:10.5px; font-weight:700; white-space:nowrap; }
.wp-wx-d em{ font-style:normal; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.wp-wx-d em small{ color:var(--text-muted); font-weight:500; font-size:10px; }
.wp-wx-rain{ color:var(--text-muted); font-size:10.5px; font-variant-numeric:tabular-nums; }
.wp-wx-d i{ font-style:normal; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:0 5px; border-radius:99px; }
.wp-wx-lost{ background:color-mix(in srgb, #5E9ED6 22%, transparent); border-color:color-mix(in srgb, #5E9ED6 60%, transparent); }
.wp-wx-lost i{ background:#3B6FA8; color:#fff; }
.wp-wx-slow{ border-style:dashed; border-color:color-mix(in srgb, #5E9ED6 55%, transparent); }
.wp-wx-slow i{ color:var(--text-muted); border:1px solid var(--glass-border); }
.wp-wx-we{ opacity:.6; }

.wp-gantt{ display:flex; flex-direction:column; gap:6px; }
.wp-g-row{ display:grid; grid-template-columns:minmax(80px, 150px) 1fr; gap:8px; align-items:center; }
.wp-g-name{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wp-g-axis{ position:relative; height:16px; font-size:10px; color:var(--text-muted); }
.wp-g-axis span{ position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; }
.wp-g-track{ position:relative; height:20px; border-radius:6px; background:var(--w50); }
.wp-g-tick{ position:absolute; top:0; bottom:0; width:1px; background:var(--w80); }
.wp-g-bar{ position:absolute; top:3px; bottom:3px; border-radius:5px; overflow:hidden; background:color-mix(in srgb, var(--accent) 30%, transparent); border:1px solid var(--accent); box-sizing:border-box; }
.wp-g-bar > i{ display:block; height:100%; background:var(--accent); }
.wp-g-late{ background:color-mix(in srgb, var(--warn) 28%, transparent); border-color:var(--warn); }
.wp-g-late > i{ background:var(--warn); }
.wp-g-next{ background:transparent; border-style:dashed; border-color:var(--text-muted); }
.wp-g-done{ background:var(--w100); border-color:var(--w100); }
.wp-g-done > i{ background:var(--text-muted); opacity:.45; }
.wp-g-exp{ position:absolute; top:-2px; bottom:-2px; width:2px; margin-left:-1px; background:var(--text); border-radius:2px; }
.wp-g-today{ position:absolute; top:-4px; bottom:-4px; width:2px; margin-left:-1px; background:var(--turquoise); border-radius:2px; }
.wp-g-key{ display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:4px; font-size:11px; color:var(--text-muted); }
.wp-g-key span{ display:inline-flex; align-items:center; gap:5px; }
.wp-g-key span::before{ content:''; width:14px; height:8px; border-radius:3px; box-sizing:border-box; }
.wp-g-k-now::before{ background:var(--accent); } .wp-g-k-late::before{ background:var(--warn); }
.wp-g-k-next::before{ border:1px dashed var(--text-muted); }
.wp-g-k-exp::before{ width:2px !important; height:12px !important; background:var(--text); }
.wp-g-k-today::before{ width:2px !important; height:12px !important; background:var(--turquoise); }

.wp-card{ border:1px solid var(--glass-border); border-radius:12px; padding:10px 12px; margin-bottom:8px; background:var(--w50); }
.wp-card-h{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wp-card-h b{ font-size:13.5px; }
.wp-tag{ font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:99px; background:var(--w80); color:var(--text-muted); }
.wp-tag-ok{ background:color-mix(in srgb, var(--clear) 20%, transparent); color:var(--text); }
.wp-tag-late{ background:color-mix(in srgb, var(--warn) 24%, transparent); color:var(--text); }
.wp-tag-done{ background:var(--w100); color:var(--text); }
.wp-route{ font-size:12px; color:var(--text-muted); margin-top:3px; }
.wp-bar{ position:relative; height:8px; border-radius:99px; background:var(--w80); margin:9px 0 5px; }
.wp-bar > i{ display:block; height:100%; border-radius:99px; background:var(--turquoise); }
.wp-bar > em{ position:absolute; top:-3px; bottom:-3px; width:2px; margin-left:-1px; background:var(--text); border-radius:2px; }
.wp-meta{ font-size:12px; color:var(--text-muted); margin-top:3px; }
.wp-meta b{ color:var(--text); }
.wp-warn{ color:var(--text); }
.wp-warn::before{ content:'!'; display:inline-flex; width:14px; height:14px; margin-right:6px; align-items:center; justify-content:center; border-radius:50%;
  background:var(--warn); color:#1B1203; font-size:10px; font-weight:800; vertical-align:1px; }
.wp-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.wp-chips:empty{ display:none; }
.wp-chips span{ font-size:11px; padding:2px 8px; border-radius:99px; border:1px solid var(--glass-border); color:var(--text-muted); }
.wp-chips b{ color:var(--text); font-weight:600; }
.wp-soil{ font-size:12px; margin-top:7px; color:var(--text-muted); }
.wp-soil > b{ color:var(--text); }
.wp-det{ margin-top:6px; font-size:12px; }
.wp-det summary{ cursor:pointer; color:var(--turquoise); font-weight:600; font-size:11.5px; width:max-content; max-width:100%; }
.wp-det summary:focus-visible{ outline:2px solid var(--turquoise); outline-offset:2px; border-radius:4px; }
.wp-det ul{ margin:5px 0 0; padding-left:18px; color:var(--text-muted); }
.wp-det li{ margin:2px 0; } .wp-det li b{ font-family:'IBM Plex Mono', monospace; font-weight:500; color:var(--text); }

.wp-busy .wp-body{ opacity:.6; pointer-events:none; }

/* ---- phones ---- */
@media (max-width:640px){
  .wp-overlay{ padding:0; align-items:stretch; }
  .wp-modal{ width:100%; max-height:none; height:100%; border-radius:0; border:0;
    padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px); }
  .wp-head{ flex-wrap:wrap; padding:10px 12px; }
  .wp-tabs{ order:3; width:100%; }
  .wp-tabs button{ flex:1; min-height:38px; }
  .wp-x{ width:44px; height:44px; }
  .wp-body{ padding:12px 12px 16px; }
  .wp-tiles{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .wp-grid, .wp-grid-current, .wp-grid-next{ grid-template-columns:1fr 1fr; }
  .wp-grid-on_hold{ grid-template-columns:1fr; }
  .wp-grid-current .wp-f:nth-child(1), .wp-grid-current .wp-f:nth-child(2),
  .wp-grid-next .wp-f:nth-child(1), .wp-grid-next .wp-f:nth-child(2){ grid-column:1 / -1; }
  .wp-f input, .wp-f .dp-btn, .wp-f select, .wp-add{ font-size:16px; min-height:44px; } /* 16px: no iOS zoom on focus */
  .wp-foot{ padding:10px 12px; }
  .wp-btns{ width:100%; } .wp-btn{ flex:1; justify-content:center; min-height:44px; padding:0 8px; }
  .wp-hist-open, .wp-hist-pdf{ min-height:44px; }
  .wp-mini{ width:40px; height:40px; }
  .wp-g-row{ grid-template-columns:72px 1fr; }
  .wp-g-axis span:nth-child(even){ display:none; } /* week labels collide at phone width */
}