:root{
  --orange:#ff5a00;
  --orange2:#ff6b00;
  --green:#11a46a;
  --green-soft:#dcf7ec;
  --green-soft2:#e7faf2;
  --navy:#0d2132;
  --text:#101d2b;
  --muted:#5d718c;
  --line:#dfe7ec;
  --blue:#0f67cf;
  --blue-soft:#eaf4ff;
  --red:#ef2429;
  --bg:#ffffff;
  --shadow:0 10px 24px rgba(12,33,50,.07);
}

*{box-sizing:border-box}
html,body{
  margin:0;
  min-height:100%;
  background:#e7edf1;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
svg{display:block}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

.app-shell{
  width:min(100%,430px);
  min-height:100vh;
  margin:0 auto;
  background:#fff;
  position:relative;
  overflow:hidden;
  padding-bottom:94px;
}

.statusbar{
  height:32px;
  padding:8px 20px 0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  background:#fff;
  position:relative;
  z-index:5;
}
.statusbar strong{font-size:14px;letter-spacing:-.02em}
.system-icons{display:flex;align-items:center;gap:7px;color:#0f1720}
.signal{height:12px;display:flex;gap:1px;align-items:flex-end}
.signal i{display:block;width:3px;background:#111;border-radius:1px}
.signal i:nth-child(1){height:4px}.signal i:nth-child(2){height:6px}.signal i:nth-child(3){height:8px}.signal i:nth-child(4){height:10px}
.wifi{font-size:15px;transform:rotate(-16deg)}
.battery{width:20px;height:10px;border:1.5px solid #111;border-radius:2px;position:relative;padding:1px}
.battery:after{content:"";position:absolute;right:-3px;top:2px;width:2px;height:5px;background:#111;border-radius:0 1px 1px 0}
.battery i{display:block;width:13px;height:5px;background:#111;border-radius:1px}

.app-header{
  height:63px;
  padding:2px 18px 8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.brand{display:flex;align-items:center;gap:9px}
.asani-logo{width:45px;height:40px;position:relative}
.asani-logo:before,.asani-logo:after{
  content:"";position:absolute;bottom:0;width:16px;height:39px;
  background:linear-gradient(180deg,#ff6c00,#ff4f00);
  border-radius:4px 4px 2px 2px;
}
.asani-logo:before{left:8px;transform:skew(-23deg)}
.asani-logo:after{right:6px;transform:skew(23deg)}
.asani-logo span{
  position:absolute;left:17px;bottom:0;width:13px;height:9px;background:#fff;z-index:2;
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.brand>b{font-size:28px;letter-spacing:-.05em}
.avatar{
  width:43px;height:43px;border:0;border-radius:50%;
  background:#edf2f6;color:#27425c;
  font-size:13px;font-weight:800;
}

.main{padding:0 14px 18px}

.site-card{
  width:100%;
  min-height:72px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:11px;
  display:grid;
  grid-template-columns:36px 1fr 20px;
  gap:8px;
  align-items:center;
  padding:10px 11px;
  text-align:left;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.icon-box{width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.icon-box.location{background:#fff0e7;color:var(--orange)}
.icon-box svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
.site-info b,.site-info small{display:block}
.site-info b{font-size:15px;line-height:1.2;letter-spacing:-.01em}
.site-info small{font-size:11px;color:#5a718d;margin-top:3px}
.chevron{width:20px;height:20px;fill:none;stroke:#163b66;stroke-width:2.5}

.checked-card{
  margin-top:10px;
  min-height:219px;
  border-radius:13px;
  background:linear-gradient(145deg,#e3faef,#d9f5ea);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:23px 14px 19px;
}
.checked-circle{
  width:66px;height:66px;border-radius:50%;
  background:var(--green);color:#fff;
  display:grid;place-items:center;
  margin-bottom:11px;
}
.checked-circle svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2.5}
.checked-card h1{font-size:25px;line-height:1;margin:0;letter-spacing:-.045em}
.checked-card p{font-size:14px;color:#4d7c6d;margin:8px 0 1px}
.checked-card strong{font-size:25px;line-height:1.1;letter-spacing:-.03em;margin-top:1px}
.checked-card small{font-size:13px;color:#5f8478;margin-top:2px}

.checkout{
  margin-top:10px;
  width:100%;
  min-height:94px;
  border:0;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(95deg,var(--orange),var(--orange2));
  display:grid;
  grid-template-columns:54px 1fr 34px;
  gap:10px;
  align-items:center;
  padding:11px 15px;
  text-align:left;
  box-shadow:0 8px 18px rgba(255,90,0,.14);
}
.checkout-icon{
  width:50px;height:50px;border:3px solid rgba(255,255,255,.95);
  border-radius:9px;display:grid;place-items:center
}
.checkout-icon svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:2}
.checkout-copy b,.checkout-copy small{display:block}
.checkout-copy b{font-size:24px;letter-spacing:-.03em;line-height:1.05}
.checkout-copy small{font-size:13px;margin-top:2px;opacity:.95}
.checkout-arrow{font-size:31px;text-align:right}

.action-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}
.action-tile{
  min-height:135px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  text-align:center;
  padding:16px 9px 12px;
}
.tile-icon{width:38px;height:38px;margin:0 auto 9px;fill:none;stroke-width:2}
.tile-icon.cup{stroke:#37556f}
.tile-icon.alert{width:42px;height:42px;fill:#ef2429;stroke:#fff;stroke-width:1.5}
.action-tile b,.action-tile small{display:block}
.action-tile b{font-size:18px;line-height:1.05;letter-spacing:-.02em}
.action-tile small{font-size:12px;color:#5d718c;margin-top:3px}

.plan-card{
  width:100%;
  min-height:92px;
  margin-top:10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  display:grid;
  grid-template-columns:45px 1fr 20px;
  gap:9px;
  align-items:center;
  padding:11px 12px;
  text-align:left;
}
.plan-icon{
  width:44px;height:44px;border-radius:50%;
  background:var(--blue-soft);color:var(--blue);
  display:grid;place-items:center;
}
.plan-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2}
.plan-copy b,.plan-copy small{display:block}
.plan-copy b{font-size:16px}
.plan-copy small{font-size:12px;color:#5d7190;margin-top:2px}

.sync-card{
  margin-top:10px;
  min-height:65px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:10px 11px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:9px;
}
.sync-left{display:flex;align-items:center;gap:9px;min-width:0}
.sync-icon{
  width:36px;height:36px;min-width:36px;border-radius:50%;
  background:var(--green-soft2);color:var(--green);display:grid;place-items:center
}
.sync-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.sync-left b,.sync-left small{display:block}
.sync-left b{font-size:11px}
.sync-left small{font-size:8.5px;color:#71828d;margin-top:2px}
.sync-card button{
  border:0;background:#eef4f7;color:#2b495c;
  border-radius:8px;height:31px;padding:0 10px;
  font-size:9px;font-weight:800;
}
.sync-card.pending{background:#fff9ed;border-color:#f0dcae}
.sync-card.pending .sync-icon{background:#fff1d5;color:#ae6b00}
.sync-card.offline{background:#f6f8f9}
.sync-card.offline .sync-icon{background:#edf1f3;color:#60737e}

.bottom-nav{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);
  width:min(100%,430px);
  min-height:82px;
  background:#fff;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:8px 8px calc(7px + env(safe-area-inset-bottom));
  z-index:30;
}
.bottom-nav button{
  border:0;background:#fff;color:#5d718c;
  display:grid;place-items:center;align-content:center;gap:4px;
  border-radius:9px;
}
.bottom-nav button.active{color:var(--orange)}
.bottom-nav svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2}
.bottom-nav b{font-size:12px}

.offline-banner{
  position:fixed;
  z-index:45;
  left:50%;
  top:6px;
  transform:translateX(-50%) translateY(-120%);
  width:min(410px,calc(100% - 20px));
  min-height:54px;
  padding:9px 10px;
  border-radius:12px;
  background:#112a38;
  color:#fff;
  display:grid;
  grid-template-columns:30px 1fr auto;
  gap:8px;
  align-items:center;
  box-shadow:0 10px 26px rgba(0,0,0,.16);
  transition:.2s;
}
.offline-banner.open{transform:translateX(-50%) translateY(0)}
.offline-banner>svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2}
.offline-banner b,.offline-banner span{display:block}
.offline-banner b{font-size:11px}
.offline-banner div span{font-size:8px;opacity:.82;margin-top:1px;line-height:1.3}
.pending-pill{
  background:#fff;color:#112a38;
  padding:5px 7px;border-radius:999px;
  font-size:8px;font-weight:800;white-space:nowrap
}

.backdrop{
  position:fixed;inset:0;background:rgba(13,28,40,.43);
  display:none;z-index:60;
}
.backdrop.open{display:block}
.sheet{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%) translateY(100%);
  width:min(100%,430px);background:#fff;z-index:70;
  border-radius:22px 22px 0 0;
  padding:12px 16px 25px;
  max-height:82vh;overflow:auto;transition:.22s;
}
.sheet.open{transform:translateX(-50%) translateY(0)}
.sheet-handle{width:46px;height:5px;border-radius:999px;background:#cbd6db;margin:0 auto 12px}
.sheet-close{
  position:absolute;right:14px;top:11px;width:36px;height:36px;
  border:0;border-radius:10px;background:#eef2f5;font-size:19px
}
.sheet h2{font-size:23px;margin:6px 0}
.sheet p{font-size:12px;color:#687a87;line-height:1.5}
.sheet-row{
  display:flex;justify-content:space-between;gap:12px;
  padding:13px 0;border-bottom:1px solid #e4ebef;font-size:12px
}
.sheet-row b{text-align:right}
.sheet-action{
  width:100%;height:50px;border:0;border-radius:11px;
  background:var(--orange);color:#fff;font-weight:900;margin-top:14px
}
.offline-toggle{
  width:100%;height:48px;border:1px solid #dfe7ec;border-radius:10px;
  background:#fff;color:#213c4c;font-weight:800;margin-top:10px
}

.confirm{
  position:fixed;inset:0;background:rgba(14,29,42,.48);
  z-index:90;display:none;align-items:center;justify-content:center;padding:18px
}
.confirm.open{display:flex}
.confirm-card{
  width:min(350px,92vw);background:#fff;border-radius:18px;
  padding:22px;text-align:center
}
.confirm-icon{
  width:52px;height:52px;border-radius:50%;background:#e2f7ed;color:var(--green);
  display:grid;place-items:center;margin:0 auto 10px
}
.confirm-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.5}
.confirm-card h2{font-size:21px;margin:0 0 6px}
.confirm-card p{font-size:12px;color:#687a87;margin:0 0 16px}
.confirm-card .primary,.confirm-card .secondary{
  width:100%;height:48px;border-radius:10px;font-weight:900
}
.confirm-card .primary{border:0;background:var(--orange);color:#fff}
.confirm-card .secondary{border:1px solid #dfe7ec;background:#fff;margin-top:8px}

.toast{
  position:fixed;left:50%;bottom:95px;transform:translate(-50%,14px);
  opacity:0;background:#102632;color:#fff;
  padding:10px 13px;border-radius:10px;font-size:11px;font-weight:800;
  z-index:110;transition:.18s;max-width:calc(100% - 28px);text-align:center
}
.toast.show{opacity:1;transform:translate(-50%,0)}

.syncing .sync-icon svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media(min-width:700px){
  body{padding:20px 0}
  .app-shell{
    min-height:calc(100vh - 40px);
    border-radius:30px;
    box-shadow:0 24px 70px rgba(0,0,0,.16)
  }
  .bottom-nav{bottom:20px;border-radius:0 0 30px 30px}
}


/* =========================================================
   ASANI DARK MODE
   Same layout / same actions / dark field-friendly palette
   ========================================================= */

html[data-theme="dark"]{
  color-scheme:dark;
  --green-soft:#123b2d;
  --green-soft2:#153429;
  --navy:#e8f0f5;
  --text:#f2f6f8;
  --muted:#9fb0bb;
  --line:#2d3e48;
  --blue:#61a8ff;
  --blue-soft:#142d46;
  --bg:#111b22;
  --shadow:0 10px 26px rgba(0,0,0,.32);
}

html[data-theme="dark"] body{
  background:#091117;
  color:var(--text);
}

html[data-theme="dark"] .app-shell{
  background:#111b22;
}

html[data-theme="dark"] .statusbar,
html[data-theme="dark"] .app-header{
  background:#111b22;
  color:#f4f7f9;
}

html[data-theme="dark"] .system-icons{
  color:#eef5f8;
}
html[data-theme="dark"] .signal i,
html[data-theme="dark"] .battery i,
html[data-theme="dark"] .battery:after{
  background:#eef5f8;
}
html[data-theme="dark"] .battery{
  border-color:#eef5f8;
}

html[data-theme="dark"] .asani-logo span{
  background:#111b22;
}

html[data-theme="dark"] .avatar{
  background:#263844;
  color:#d9e6ee;
}

/* Main cards */
html[data-theme="dark"] .site-card,
html[data-theme="dark"] .action-tile,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .sync-card{
  background:#18242c;
  border-color:#30424d;
  color:#f3f7f9;
  box-shadow:none;
}

html[data-theme="dark"] .site-info small,
html[data-theme="dark"] .action-tile small,
html[data-theme="dark"] .plan-copy small,
html[data-theme="dark"] .sync-left small{
  color:#9eb0bc;
}

html[data-theme="dark"] .chevron{
  stroke:#b8cee0;
}

/* Active site */
html[data-theme="dark"] .icon-box.location{
  background:#3a2419;
  color:#ff7a2a;
}

/* Checked-in card stays strongly green, but comfortable in dark mode */
html[data-theme="dark"] .checked-card{
  background:linear-gradient(145deg,#113b2c,#163f32);
  border:1px solid #245641;
}
html[data-theme="dark"] .checked-card h1,
html[data-theme="dark"] .checked-card strong{
  color:#effbf5;
}
html[data-theme="dark"] .checked-card p,
html[data-theme="dark"] .checked-card small{
  color:#9ed3b9;
}
html[data-theme="dark"] .checked-circle{
  background:#15b678;
  box-shadow:0 0 0 5px rgba(21,182,120,.12);
}

/* Orange primary action stays vivid */
html[data-theme="dark"] .checkout{
  background:linear-gradient(95deg,#ff5900,#ff6f13);
  box-shadow:0 10px 24px rgba(255,90,0,.18);
}

/* Tiles */
html[data-theme="dark"] .tile-icon.cup{
  stroke:#bdd0dd;
}
html[data-theme="dark"] .action-tile:active,
html[data-theme="dark"] .site-card:active,
html[data-theme="dark"] .plan-card:active{
  background:#1e2c35;
}

/* Plan icon */
html[data-theme="dark"] .plan-icon{
  background:#163655;
  color:#73b5ff;
}

/* Sync card */
html[data-theme="dark"] .sync-card button{
  background:#263944;
  color:#d7e4ec;
}
html[data-theme="dark"] .sync-card.pending{
  background:#302718;
  border-color:#59451e;
}
html[data-theme="dark"] .sync-card.pending .sync-icon{
  background:#493716;
  color:#ffc45a;
}
html[data-theme="dark"] .sync-card.offline{
  background:#171f25;
  border-color:#2b3841;
}
html[data-theme="dark"] .sync-card.offline .sync-icon{
  background:#26323a;
  color:#a4b3bc;
}

/* Bottom navigation */
html[data-theme="dark"] .bottom-nav{
  background:#111b22;
  border-color:#2b3b45;
}
html[data-theme="dark"] .bottom-nav button{
  background:#111b22;
  color:#9fb0bd;
}
html[data-theme="dark"] .bottom-nav button.active{
  color:#ff6b12;
}

/* Offline banner */
html[data-theme="dark"] .offline-banner{
  background:#e8eef2;
  color:#10212c;
}
html[data-theme="dark"] .pending-pill{
  background:#17242d;
  color:#edf5f9;
}

/* Sheets */
html[data-theme="dark"] .backdrop{
  background:rgba(0,0,0,.62);
}
html[data-theme="dark"] .sheet{
  background:#17232b;
  color:#f2f6f8;
}
html[data-theme="dark"] .sheet-handle{
  background:#4b5d68;
}
html[data-theme="dark"] .sheet-close{
  background:#26353f;
  color:#e7eff4;
}
html[data-theme="dark"] .sheet p{
  color:#9eafba;
}
html[data-theme="dark"] .sheet-row{
  border-color:#2f414b;
}
html[data-theme="dark"] .offline-toggle{
  background:#1c2a33;
  border-color:#364955;
  color:#dce8ee;
}
html[data-theme="dark"] .sheet-action{
  background:#ff5a00;
}

/* Confirmation */
html[data-theme="dark"] .confirm{
  background:rgba(0,0,0,.68);
}
html[data-theme="dark"] .confirm-card{
  background:#18242c;
  color:#f3f7f9;
  box-shadow:0 24px 70px rgba(0,0,0,.42);
}
html[data-theme="dark"] .confirm-icon{
  background:#123c2c;
  color:#25c484;
}
html[data-theme="dark"] .confirm-card p{
  color:#9fb0bb;
}
html[data-theme="dark"] .confirm-card .secondary{
  background:#1e2b34;
  border-color:#374955;
  color:#e2ebf0;
}

/* Toast */
html[data-theme="dark"] .toast{
  background:#f1f5f7;
  color:#10232f;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}

/* More-panel theme toggle */
.theme-toggle{
  width:100%;
  min-height:52px;
  border:1px solid #dfe7ec;
  border-radius:10px;
  background:#fff;
  color:#203b4a;
  font-weight:800;
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 12px;
  text-align:left;
}
.theme-toggle .theme-copy b,
.theme-toggle .theme-copy small{
  display:block;
}
.theme-toggle .theme-copy b{
  font-size:11px;
}
.theme-toggle .theme-copy small{
  font-size:8px;
  margin-top:2px;
  color:#71838e;
}
.theme-switch{
  width:44px;
  height:25px;
  border-radius:999px;
  background:#d9e1e5;
  padding:3px;
  flex:0 0 auto;
}
.theme-switch i{
  display:block;
  width:19px;
  height:19px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.16);
  transition:.18s;
}

html[data-theme="dark"] .theme-toggle{
  background:#1c2a33;
  border-color:#364955;
  color:#e4edf2;
}
html[data-theme="dark"] .theme-toggle .theme-copy small{
  color:#9fb0bb;
}
html[data-theme="dark"] .theme-switch{
  background:#ff5a00;
}
html[data-theme="dark"] .theme-switch i{
  transform:translateX(19px);
  background:#fff;
}

/* Better focus visibility in both modes */
.theme-toggle:focus-visible,
.offline-toggle:focus-visible,
.bottom-nav button:focus-visible,
.site-card:focus-visible,
.checkout:focus-visible,
.action-tile:focus-visible,
.plan-card:focus-visible{
  outline:3px solid rgba(255,90,0,.42);
  outline-offset:2px;
}

/* Smooth theme changes without moving layout */
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .statusbar,
html[data-theme="dark"] .app-header,
html[data-theme="dark"] .site-card,
html[data-theme="dark"] .checked-card,
html[data-theme="dark"] .action-tile,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .sync-card,
html[data-theme="dark"] .bottom-nav,
html[data-theme="dark"] .sheet,
html[data-theme="dark"] .confirm-card{
  transition:background-color .18s,border-color .18s,color .18s;
}


/* Crew check */
.crew-check-card{margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}.crew-check-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.crew-check-top small,.crew-check-top b{display:block}.crew-check-top small{font-size:9px;font-weight:900;color:#748692}.crew-check-top b{margin-top:2px;font-size:15px}.crew-status{display:inline-flex;align-items:center;justify-content:center;min-height:27px;padding:0 9px;border-radius:999px;font-size:9px;font-weight:900}.crew-status.warn{background:#fff1df;color:#9b6200}.crew-status.ok{background:#e5f7ee;color:#087d49}.crew-numbers{display:grid;grid-template-columns:repeat(3,1fr);margin:10px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden}.crew-numbers>div{padding:9px 6px;text-align:center;background:#fafcfd}.crew-numbers>div+div{border-left:1px solid var(--line)}.crew-numbers strong,.crew-numbers small{display:block}.crew-numbers strong{font-size:18px}.crew-numbers small{font-size:8px;color:#748692;margin-top:1px}.crew-check-btn{width:100%;min-height:46px;border:0;border-radius:10px;background:#122c3b;color:#fff;display:grid;grid-template-columns:30px 1fr 20px;align-items:center;gap:7px;padding:0 12px;text-align:left}.crew-check-btn .crew-icon{font-size:18px}.crew-check-btn b{font-size:11px}.crew-check-btn i{font-style:normal;font-size:18px;text-align:right}.crew-sheet-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0 12px}.crew-sheet-summary>div{border:1px solid var(--line);border-radius:9px;padding:9px;text-align:center;background:#fafcfd}.crew-sheet-summary strong,.crew-sheet-summary small{display:block}.crew-sheet-summary strong{font-size:17px}.crew-sheet-summary small{font-size:7px;color:#748692}.crew-worker-list{display:grid;gap:7px}.crew-worker{border:1px solid var(--line);border-radius:10px;padding:9px;display:grid;grid-template-columns:38px 1fr auto;gap:8px;align-items:center}.crew-worker-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(145deg,#536d7b,#c5d0d6);color:#fff;display:grid;place-items:center;font-size:8px;font-weight:900}.crew-worker b,.crew-worker small{display:block}.crew-worker b{font-size:10px}.crew-worker small{font-size:7px;color:#748692}.crew-worker-status{min-width:75px;height:31px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:8px;font-weight:900;padding:0 7px}.crew-all-here,.crew-save{width:100%;min-height:48px;margin-top:12px;border:0;border-radius:10px;color:#fff;font-weight:900;font-size:11px}.crew-all-here{background:#11a46a}.crew-save{background:var(--orange);margin-top:8px}html[data-theme="dark"] .crew-check-card{background:#18242c;border-color:#30424d}html[data-theme="dark"] .crew-check-top small,html[data-theme="dark"] .crew-numbers small,html[data-theme="dark"] .crew-worker small,html[data-theme="dark"] .crew-sheet-summary small{color:#9fb0bb}html[data-theme="dark"] .crew-numbers,html[data-theme="dark"] .crew-numbers>div,html[data-theme="dark"] .crew-sheet-summary>div,html[data-theme="dark"] .crew-worker{background:#17232b;border-color:#30424d}html[data-theme="dark"] .crew-numbers>div+div{border-left-color:#30424d}html[data-theme="dark"] .crew-check-btn{background:#263a47}html[data-theme="dark"] .crew-worker-status{background:#1c2a33;color:#eef5f8;border-color:#3a4c57}


/* =========================================================
   V5 — Lead crew list is always visible on the Home screen
   ========================================================= */
.crew-visible-card{
  margin-top:10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  box-shadow:0 1px 0 rgba(0,0,0,.02)
}
.crew-visible-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px
}
.crew-visible-head small{
  display:block;
  font-size:9px;
  font-weight:900;
  color:#748692;
  letter-spacing:.02em
}
.crew-visible-head h2{
  margin:2px 0 0;
  font-size:16px;
  line-height:1.1;
  letter-spacing:-.025em
}

.visible-crew-list{
  display:grid;
  gap:6px;
  margin-top:10px
}
.visible-worker-row{
  min-height:56px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 92px;
  gap:8px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  padding:8px
}
.visible-worker-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#516b79,#c5d0d6);
  color:#fff;
  font-size:8px;
  font-weight:900
}
.visible-worker-copy{
  min-width:0
}
.visible-worker-copy b,
.visible-worker-copy small{
  display:block
}
.visible-worker-copy b{
  font-size:10px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.visible-worker-copy small{
  margin-top:2px;
  color:#748692;
  font-size:7px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.visible-worker-status{
  width:92px;
  height:34px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  padding:0 7px;
  font-size:8px;
  font-weight:900;
  color:#263f4d
}
.visible-worker-status.status-present{
  background:#e7f7ee;
  border-color:#cdebdc;
  color:#0b7f4b
}
.visible-worker-status.status-late{
  background:#fff4df;
  border-color:#efdcae;
  color:#936000
}
.visible-worker-status.status-missing{
  background:#fff0f0;
  border-color:#efc9cc;
  color:#b3242d
}
.visible-worker-status.status-sick{
  background:#fff0f0;
  border-color:#efc9cc;
  color:#b3242d
}
.visible-worker-status.status-holiday{
  background:#edf5ff;
  border-color:#d4e5f9;
  color:#2868b5
}

.crew-home-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:10px
}
.all-here-home,
.save-crew-home{
  min-height:44px;
  border-radius:10px;
  font-size:9px;
  font-weight:900
}
.all-here-home{
  border:1px solid #ccebdc;
  background:#e7f7ee;
  color:#0b7f4b
}
.save-crew-home{
  border:0;
  background:var(--orange);
  color:#fff
}

/* Compact counts above visible list */
.crew-visible-card .crew-numbers{
  margin-bottom:0
}

/* Dark mode */
html[data-theme="dark"] .crew-visible-card,
html[data-theme="dark"] .visible-worker-row{
  background:#18242c;
  border-color:#30424d;
  color:#f3f7f9
}
html[data-theme="dark"] .crew-visible-head small,
html[data-theme="dark"] .visible-worker-copy small{
  color:#9fb0bb
}
html[data-theme="dark"] .visible-worker-status{
  background:#1c2a33;
  border-color:#3a4c57;
  color:#eef5f8
}
html[data-theme="dark"] .visible-worker-status.status-present{
  background:#123b2d;
  border-color:#245641;
  color:#9fe3c2
}
html[data-theme="dark"] .visible-worker-status.status-late{
  background:#342b19;
  border-color:#5a4823;
  color:#ffd27b
}
html[data-theme="dark"] .visible-worker-status.status-missing,
html[data-theme="dark"] .visible-worker-status.status-sick{
  background:#3a1d20;
  border-color:#603035;
  color:#ff9aa1
}
html[data-theme="dark"] .visible-worker-status.status-holiday{
  background:#16314b;
  border-color:#294b6c;
  color:#9ccaff
}
html[data-theme="dark"] .all-here-home{
  background:#123b2d;
  border-color:#245641;
  color:#9fe3c2
}

@media(max-width:360px){
  .visible-worker-row{
    grid-template-columns:34px minmax(0,1fr) 84px
  }
  .visible-worker-avatar{
    width:34px;height:34px
  }
  .visible-worker-status{
    width:84px;
    padding:0 4px
  }
}


/* =========================================================
   V6 — Sticky checkout + simplified construction crew status
   ========================================================= */

.app-shell{
  padding-bottom:176px;
}

.sticky-checkout-wrap{
  position:fixed;
  left:50%;
  bottom:80px;
  transform:translateX(-50%);
  width:min(100%,430px);
  padding:8px 14px 7px;
  z-index:36;
  pointer-events:none;
  background:linear-gradient(to top,rgba(255,255,255,.98) 72%,rgba(255,255,255,.88),rgba(255,255,255,0));
}

.sticky-checkout-wrap .checkout{
  margin:0;
  min-height:74px;
  pointer-events:auto;
  box-shadow:0 8px 22px rgba(255,90,0,.24);
}

.sticky-checkout-wrap .checkout-icon{
  width:46px;
  height:46px;
}

.sticky-checkout-wrap .checkout-copy b{
  font-size:21px;
}

.sticky-checkout-wrap .checkout-copy small{
  font-size:11px;
}

/* Construction field crew: only Present / Missing */
.visible-worker-status{
  font-size:9px;
}

.visible-worker-status.status-present{
  background:#e7f7ee;
  border-color:#cdebdc;
  color:#0b7f4b;
}

.visible-worker-status.status-missing{
  background:#fff0f0;
  border-color:#efc9cc;
  color:#b3242d;
}

/* Dark mode sticky bar */
html[data-theme="dark"] .sticky-checkout-wrap{
  background:linear-gradient(to top,rgba(17,27,34,.99) 72%,rgba(17,27,34,.90),rgba(17,27,34,0));
}

html[data-theme="dark"] .visible-worker-status.status-present{
  background:#123b2d;
  border-color:#245641;
  color:#9fe3c2;
}
html[data-theme="dark"] .visible-worker-status.status-missing{
  background:#3a1d20;
  border-color:#603035;
  color:#ff9aa1;
}

@media(min-width:700px){
  .sticky-checkout-wrap{
    bottom:100px;
  }
}


/* =========================================================
   V7 — App-like typography refinement
   Inter + lighter weights + tighter spacing + font smoothing
   ========================================================= */

html,
body,
button,
input,
select,
textarea{
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "SF Pro Display",
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
}

body{
  font-weight:400;
  line-height:1.35;
  letter-spacing:-0.006em;
}

button,
select,
input,
textarea{
  letter-spacing:-0.008em;
}

small{
  line-height:1.35;
  font-weight:500;
}

/* Brand */
.brand>b{
  font-weight:700;
  letter-spacing:-0.052em;
}

/* Status bar / system */
.statusbar strong{
  font-weight:600;
  letter-spacing:-0.02em;
}

/* Header / profile */
.avatar{
  font-weight:600;
  letter-spacing:-0.015em;
}

/* Site */
.site-info b{
  font-weight:600;
  letter-spacing:-0.018em;
}
.site-info small{
  font-weight:500;
  letter-spacing:-0.005em;
}

/* Crew heading */
.crew-visible-head small,
.crew-check-top small{
  font-weight:600;
  letter-spacing:.035em;
}
.crew-visible-head h2{
  font-weight:700;
  letter-spacing:-0.032em;
}

/* Crew totals */
.crew-numbers strong,
.crew-sheet-summary strong{
  font-weight:700;
  letter-spacing:-0.025em;
}
.crew-numbers small,
.crew-sheet-summary small{
  font-weight:500;
  letter-spacing:0;
}

/* Worker rows */
.visible-worker-copy b,
.crew-worker b{
  font-weight:600;
  letter-spacing:-0.015em;
}
.visible-worker-copy small,
.crew-worker small{
  font-weight:500;
  letter-spacing:-0.002em;
}
.visible-worker-status,
.crew-worker-status{
  font-weight:600;
  letter-spacing:-0.01em;
}

/* Crew actions */
.all-here-home,
.save-crew-home,
.crew-all-here,
.crew-save{
  font-weight:650;
  letter-spacing:-0.015em;
}

/* Main checked-in panel */
.checked-card h1{
  font-weight:700;
  letter-spacing:-0.045em;
}
.checked-card p{
  font-weight:500;
  letter-spacing:-0.008em;
}
.checked-card strong{
  font-weight:650;
  letter-spacing:-0.035em;
}
.checked-card small{
  font-weight:500;
  letter-spacing:-0.008em;
}

/* Sticky checkout */
.checkout-copy b{
  font-weight:700;
  letter-spacing:-0.032em;
}
.checkout-copy small{
  font-weight:500;
  letter-spacing:-0.012em;
}
.checkout-arrow{
  font-weight:500;
}

/* Action tiles */
.action-tile b{
  font-weight:650;
  letter-spacing:-0.022em;
}
.action-tile small{
  font-weight:500;
  letter-spacing:-0.008em;
}

/* Today plan */
.plan-copy b{
  font-weight:600;
  letter-spacing:-0.018em;
}
.plan-copy small{
  font-weight:500;
  letter-spacing:-0.006em;
}

/* Sync/offline */
.sync-left b{
  font-weight:600;
  letter-spacing:-0.012em;
}
.sync-left small{
  font-weight:500;
  letter-spacing:-0.002em;
}
.sync-card button,
.pending-pill{
  font-weight:600;
  letter-spacing:-0.01em;
}
.offline-banner b{
  font-weight:600;
  letter-spacing:-0.012em;
}
.offline-banner div span{
  font-weight:500;
  letter-spacing:-0.002em;
}

/* Bottom nav */
.bottom-nav b{
  font-weight:600;
  letter-spacing:-0.012em;
}

/* Sheets / dialogs */
.sheet h2,
.confirm-card h2{
  font-weight:700;
  letter-spacing:-0.035em;
}
.sheet p,
.confirm-card p{
  font-weight:400;
  letter-spacing:-0.006em;
}
.sheet-row{
  font-weight:400;
  letter-spacing:-0.004em;
}
.sheet-row b{
  font-weight:600;
  letter-spacing:-0.012em;
}
.sheet-action,
.offline-toggle,
.confirm-card .primary,
.confirm-card .secondary{
  font-weight:650;
  letter-spacing:-0.014em;
}

/* Theme toggle */
.theme-toggle{
  font-weight:500;
}
.theme-toggle .theme-copy b{
  font-weight:600;
  letter-spacing:-0.012em;
}
.theme-toggle .theme-copy small{
  font-weight:500;
  letter-spacing:-0.002em;
}

/* Crew status pill */
.crew-status{
  font-weight:600;
  letter-spacing:-0.01em;
}

/* Toast */
.toast{
  font-weight:600;
  letter-spacing:-0.012em;
}

/* Normalize any legacy ultra-heavy declarations without changing layout */
.icon-box,
.checked-circle,
.visible-worker-avatar,
.crew-worker-avatar,
.confirm-icon{
  font-weight:700;
}

/* Slightly more app-like selection appearance */
::selection{
  background:rgba(255,90,0,.18);
}

/* In dark mode, preserve the exact typography weights */
html[data-theme="dark"] body{
  font-weight:400;
}

/* =========================================================
   V8 — Work checks: Check start / Check finish / manual break
   ========================================================= */
.work-state-card{min-height:245px;padding-bottom:16px}
.work-state-card .checked-circle{margin-bottom:9px}
.work-time-grid{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:14px}
.work-time-grid>div{background:rgba(255,255,255,.52);border:1px solid rgba(39,118,84,.12);border-radius:10px;padding:9px 5px;text-align:center}
.work-time-grid small,.work-time-grid strong{display:block}
.work-time-grid small{font-size:7px;font-weight:600;letter-spacing:.035em;color:#5c8274}
.work-time-grid strong{margin-top:3px;font-size:14px;font-weight:650;letter-spacing:-.025em;color:#19372b}
.worked-total{margin-top:9px;text-align:center}
.worked-total small,.worked-total strong{display:block}
.worked-total small{color:#5d8375;font-size:7px;font-weight:600;letter-spacing:.04em}
.worked-total strong{margin-top:2px;font-size:21px;font-weight:650;letter-spacing:-.035em}
.sticky-checkout-wrap .checkout.state-start{background:linear-gradient(95deg,#0d9e63,#14b476);box-shadow:0 8px 22px rgba(17,164,106,.24)}
.sticky-checkout-wrap .checkout.state-finish{background:linear-gradient(95deg,#ff5900,#ff6d00);box-shadow:0 8px 22px rgba(255,90,0,.24)}
.sticky-checkout-wrap .checkout.state-done{background:#506671;box-shadow:none}
.break-editor{margin-top:12px}
.break-current{border:1px solid var(--line);border-radius:11px;padding:12px;text-align:center;background:#fafcfd}
.break-current small,.break-current strong{display:block}
.break-current small{font-size:8px;color:#71838f;font-weight:500}
.break-current strong{margin-top:3px;font-size:27px;font-weight:650;letter-spacing:-.04em}
.break-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px}
.break-quick button{height:42px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#294351;font-size:10px;font-weight:600}
.break-quick button.active{background:#fff0e7;border-color:#ffc5a4;color:var(--orange)}
.break-custom{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin-top:10px}
.break-custom input{width:100%;height:47px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#203844;padding:0 12px;font-size:16px;font-weight:600;outline:none}
.break-custom input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,90,0,.10)}
.break-custom span{font-size:10px;color:#71838f;font-weight:600}
.save-break-btn{width:100%;min-height:48px;margin-top:11px;border:0;border-radius:10px;background:var(--orange);color:#fff;font-size:11px;font-weight:650}
html[data-theme="dark"] .work-time-grid>div,html[data-theme="dark"] .break-current{background:rgba(5,18,14,.22);border-color:#2e5d48}
html[data-theme="dark"] .work-time-grid small,html[data-theme="dark"] .worked-total small{color:#9dceb9}
html[data-theme="dark"] .work-time-grid strong,html[data-theme="dark"] .worked-total strong{color:#effbf5}
html[data-theme="dark"] .break-current{background:#17232b;border-color:#30424d}
html[data-theme="dark"] .break-current small,html[data-theme="dark"] .break-custom span{color:#9fb0bb}
html[data-theme="dark"] .break-quick button,html[data-theme="dark"] .break-custom input{background:#1c2a33;border-color:#3a4c57;color:#eef5f8}
html[data-theme="dark"] .break-quick button.active{background:#3b2519;border-color:#6a3b21;color:#ff9b5d}


/* V9 crew flow */
.crew-visible-head p{margin:4px 0 0;color:#748692;font-size:8px;line-height:1.45;max-width:255px}.crew-status.idle{background:#eef3f5;color:#607580}.crew-status.active{background:#fff1df;color:#9b6200}.crew-status.finished{background:#e5f7ee;color:#087d49}.crew-flow-btn{width:100%;min-height:56px;margin-top:10px;border:0;border-radius:11px;color:#fff;display:grid;grid-template-columns:38px 1fr 20px;gap:8px;align-items:center;padding:9px 12px;text-align:left}.crew-flow-btn.start{background:#132d3c}.crew-flow-btn.finish{background:linear-gradient(95deg,#ff5900,#ff6d00)}.crew-flow-btn.done{background:#5c6f79}.crew-flow-icon{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.15);display:grid;place-items:center;font-size:14px;font-weight:700}.crew-flow-btn b,.crew-flow-btn small{display:block}.crew-flow-btn b{font-size:12px;font-weight:700;letter-spacing:-.018em}.crew-flow-btn small{margin-top:2px;font-size:8px;font-weight:500;opacity:.86}.crew-flow-btn i{font-style:normal;font-size:20px;text-align:right}.visible-crew-list{display:grid;gap:7px;margin-top:10px}.visible-worker-row{min-height:66px;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:11px;background:#fff;padding:9px 10px}.visible-worker-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#526b79,#c5d0d6);color:#fff;font-size:9px;font-weight:700}.visible-worker-copy b{display:block;font-size:14px;font-weight:700;line-height:1.15;letter-spacing:-.024em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.visible-worker-copy small{display:block;margin-top:3px;font-size:8px;font-weight:500;color:#748692}.worker-status-button{min-width:82px;height:37px;border-radius:9px;border:1px solid var(--line);background:#f6f9fa;color:#586c77;padding:0 9px;font-size:9px;font-weight:650}.worker-status-button.present{background:#e7f7ee;border-color:#ccebdc;color:#0b7f4b}.worker-status-button.absent{background:#fff0f0;border-color:#efc9cc;color:#b3242d}.worker-status-button.pending{background:#f2f5f7;border-color:#dfe7ec;color:#687d89}.worker-status-button:disabled{opacity:.72;cursor:default}.crew-finished-note{display:none;margin-top:10px;border:1px solid #ccebdc;background:#e7f7ee;border-radius:10px;padding:10px;grid-template-columns:31px 1fr;gap:8px;align-items:center}.crew-finished-note.show{display:grid}.crew-finished-note>span{width:31px;height:31px;border-radius:50%;background:#0d9e63;color:#fff;display:grid;place-items:center;font-size:16px;font-weight:700}.crew-finished-note b,.crew-finished-note small{display:block}.crew-finished-note b{font-size:10px;font-weight:650}.crew-finished-note small{margin-top:2px;font-size:7px;color:#5f8170}.attendance-modal{position:fixed;inset:0;z-index:105;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(14,28,41,.54)}.attendance-modal.open{display:flex}.attendance-modal-card{width:min(360px,92vw);background:#fff;border-radius:19px;padding:18px;position:relative;box-shadow:0 24px 60px rgba(0,0,0,.23)}.attendance-close{position:absolute;right:12px;top:12px;width:34px;height:34px;border:0;border-radius:10px;background:#eef3f5;color:#304957;font-size:19px}.attendance-worker{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center;padding-right:38px;margin-bottom:16px}.attendance-avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#526b79,#c5d0d6);color:#fff;font-size:10px;font-weight:700}.attendance-worker b,.attendance-worker small{display:block}.attendance-worker b{font-size:15px;font-weight:700;letter-spacing:-.025em}.attendance-worker small{margin-top:2px;color:#748692;font-size:8px}.attendance-modal-card h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.035em}.attendance-modal-card>p{margin:4px 0 13px;color:#71838f;font-size:9px}.attendance-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}.attendance-option{min-height:116px;border-radius:13px;text-align:center;padding:15px 8px 11px}.attendance-option>span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;margin:0 auto 8px;font-size:23px;font-weight:700}.attendance-option b,.attendance-option small{display:block}.attendance-option b{font-size:14px;font-weight:700}.attendance-option small{margin-top:3px;font-size:8px;font-weight:500}.attendance-option.present{border:2px solid #bfe6d2;background:#eaf8f1;color:#0b7f4b}.attendance-option.present>span{background:#0d9e63;color:#fff}.attendance-option.absent{border:2px solid #f0c3c7;background:#fff1f2;color:#b3242d}.attendance-option.absent>span{background:#df343d;color:#fff}html[data-theme="dark"] .visible-worker-row,html[data-theme="dark"] .attendance-modal-card{background:#18242c;border-color:#30424d;color:#f1f6f8}html[data-theme="dark"] .crew-visible-head p,html[data-theme="dark"] .visible-worker-copy small,html[data-theme="dark"] .attendance-worker small,html[data-theme="dark"] .attendance-modal-card>p{color:#9fb0bb}html[data-theme="dark"] .worker-status-button.pending{background:#1c2a33;border-color:#3a4c57;color:#b8c6ce}html[data-theme="dark"] .worker-status-button.present{background:#123b2d;border-color:#245641;color:#9fe3c2}html[data-theme="dark"] .worker-status-button.absent{background:#3a1d20;border-color:#603035;color:#ff9aa1}html[data-theme="dark"] .attendance-modal{background:rgba(0,0,0,.70)}html[data-theme="dark"] .attendance-close{background:#26353e;color:#e3edf2}html[data-theme="dark"] .attendance-option.present{background:#123b2d;border-color:#285d47;color:#a2e5c5}html[data-theme="dark"] .attendance-option.absent{background:#3a1d20;border-color:#633239;color:#ff9fa6}@media(max-width:360px){.visible-worker-row{grid-template-columns:38px minmax(0,1fr) 76px;gap:8px}.visible-worker-avatar{width:38px;height:38px}.visible-worker-copy b{font-size:13px}.worker-status-button{min-width:76px;padding:0 5px}}


/* =========================================================
   V10 — visible crew, default Present, Check Start -> Check End
   ========================================================= */
.crew-check-marks{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:10px;
}
.crew-mark{
  min-height:55px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fafcfd;
  padding:9px;
  display:grid;
  grid-template-columns:30px 1fr;
  gap:8px;
  align-items:center;
}
.crew-mark>span{
  width:30px;height:30px;border-radius:50%;
  background:#eef3f5;color:#667b87;
  display:grid;place-items:center;
  font-size:10px;font-weight:700;
}
.crew-mark b,.crew-mark small{display:block}
.crew-mark b{font-size:9px;font-weight:650}
.crew-mark small{font-size:7px;color:#778994;margin-top:2px}
.crew-mark.checked{
  background:#e7f7ee;
  border-color:#ccebdc;
}
.crew-mark.checked>span{
  background:#0d9e63;color:#fff;
}
.crew-mark.checked small{
  color:#4f7e68;
}
.crew-mark.finished{
  background:#eaf3ff;
  border-color:#cfe1f6;
}
.crew-mark.finished>span{
  background:#247be8;color:#fff;
}

.crew-flow-btn.start{
  margin-top:10px;
  background:#0f9f63;
  min-height:64px;
}
.crew-flow-btn.finish{
  margin-top:10px;
  background:linear-gradient(95deg,#ff5900,#ff6d00);
  min-height:64px;
}
.crew-flow-btn.done{
  margin-top:10px;
  min-height:64px;
  background:#536873;
}
.crew-flow-btn b{
  font-size:14px;
  letter-spacing:.01em;
}
.crew-flow-btn small{
  font-size:8px;
}

/* worker list always visible */
.visible-crew-list{
  display:grid !important;
  margin-top:10px;
}
.worker-status-button{
  min-width:82px;
  height:38px;
  font-size:9px;
}
.worker-status-button.present{
  background:#e7f7ee;
  border-color:#ccebdc;
  color:#0b7f4b;
}
.worker-status-button.absent{
  background:#fff0f0;
  border-color:#efc9cc;
  color:#b3242d;
}

/* report finished state */
.crew-finished-note{
  margin-top:10px;
}

/* dark mode */
html[data-theme="dark"] .crew-mark{
  background:#17232b;
  border-color:#30424d;
}
html[data-theme="dark"] .crew-mark>span{
  background:#26353e;color:#c2ced5;
}
html[data-theme="dark"] .crew-mark small{
  color:#9fb0bb;
}
html[data-theme="dark"] .crew-mark.checked{
  background:#123b2d;
  border-color:#245641;
}
html[data-theme="dark"] .crew-mark.finished{
  background:#16314b;
  border-color:#294b6c;
}


/* V11 exact crew flow */
.crew-flow-btn.start{background:#0f9f63!important}
.crew-flow-btn.finish{background:linear-gradient(95deg,#ff5900,#ff6d00)!important}
.crew-flow-btn.submitted{background:#0f9f63!important;opacity:1!important}
.crew-mark.checked{background:#e7f7ee!important;border-color:#ccebdc!important}
.crew-mark.checked>span{background:#0d9e63!important;color:#fff!important}
.submitted-note{background:#e7f7ee;border-color:#ccebdc}
html[data-theme="dark"] .crew-mark.checked{background:#123b2d!important;border-color:#245641!important}
html[data-theme="dark"] .submitted-note{background:#123b2d;border-color:#245641}


/* =========================================================
   V12 EXACT CREW UI STATES
   START CHECK -> CHECKED -> FINISH CHECK -> CHECKED -> SUBMITTED
   ========================================================= */
.crew-visible-head p{
  margin:4px 0 0;
  color:#748692;
  font-size:8px;
  line-height:1.45;
  max-width:255px;
}
.crew-check-marks{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:10px;
}
.crew-mark{
  min-height:56px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fafcfd;
  padding:9px;
  display:grid;
  grid-template-columns:30px 1fr;
  gap:8px;
  align-items:center;
}
.crew-mark>span{
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:#eef3f5;color:#667b87;
  font-size:10px;font-weight:700;
}
.crew-mark b,.crew-mark small{display:block}
.crew-mark b{font-size:9px;font-weight:650}
.crew-mark small{font-size:7px;color:#778994;margin-top:2px}
.crew-mark.checked{
  background:#e7f7ee;
  border-color:#ccebdc;
}
.crew-mark.checked>span{
  background:#0d9e63;
  color:#fff;
}
.crew-mark.checked small{color:#4f7e68}

.crew-flow-btn{
  margin-top:10px;
  min-height:64px;
}
.crew-flow-btn.start{background:#0f9f63!important}
.crew-flow-btn.finish{background:linear-gradient(95deg,#ff5900,#ff6d00)!important}
.crew-flow-btn.submitted{background:#0f9f63!important;opacity:1!important}
.crew-flow-btn b{
  font-size:14px!important;
  letter-spacing:.01em!important;
}
.crew-flow-btn small{font-size:8px!important}

.visible-crew-list{
  display:grid!important;
  gap:7px;
  margin-top:10px;
}
.visible-worker-row{
  min-height:66px;
  grid-template-columns:42px minmax(0,1fr) auto;
}
.visible-worker-avatar{width:42px;height:42px}
.visible-worker-copy b{
  font-size:14px!important;
  font-weight:700!important;
  letter-spacing:-.024em!important;
}
.worker-status-button{
  min-width:82px;
  height:38px;
  font-size:9px;
  font-weight:650;
}
.worker-status-button.present{
  background:#e7f7ee;
  border-color:#ccebdc;
  color:#0b7f4b;
}
.worker-status-button.absent{
  background:#fff0f0;
  border-color:#efc9cc;
  color:#b3242d;
}
.submitted-note{
  margin-top:10px;
  background:#e7f7ee;
  border-color:#ccebdc;
}

html[data-theme="dark"] .crew-mark{
  background:#17232b;
  border-color:#30424d;
}
html[data-theme="dark"] .crew-mark.checked{
  background:#123b2d;
  border-color:#245641;
}
html[data-theme="dark"] .crew-visible-head p{color:#9fb0bb}
html[data-theme="dark"] .submitted-note{
  background:#123b2d;
  border-color:#245641;
}


/* V13 — remove Report Submitted block; show start/end crew times */
.crew-time-summary{
  display:none;
  min-height:58px;
  margin-top:10px;
  border:1px solid #d8e4e9;
  border-radius:10px;
  background:#f8fbfc;
  padding:10px 12px;
  grid-template-columns:34px 1fr;
  gap:9px;
  align-items:center;
}
.crew-time-summary.show{display:grid}
.time-icon{
  width:34px;height:34px;border-radius:50%;
  background:#eaf4ff;color:#247be8;
  display:grid;place-items:center;
  font-size:17px;font-weight:700;
}
.crew-time-summary small,.crew-time-summary strong{display:block}
.crew-time-summary small{
  font-size:7px;font-weight:600;letter-spacing:.04em;color:#71838f;
}
.crew-time-summary strong{
  margin-top:2px;font-size:16px;font-weight:700;
  letter-spacing:-.025em;color:#203744;
}
.crew-flow-btn.finished{
  background:#536873!important;
}
html[data-theme="dark"] .crew-time-summary{
  background:#17232b;border-color:#30424d;
}
html[data-theme="dark"] .time-icon{
  background:#16314b;color:#8fc4ff;
}
html[data-theme="dark"] .crew-time-summary small{color:#9fb0bb}
html[data-theme="dark"] .crew-time-summary strong{color:#edf5f8}


/* V14 — only one sticky button, no in-card crew button */
#crewVisibleCard #crewFlowBtn{
  display:none !important;
}

.crew-time-summary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:10px;
  border:0;
  background:transparent;
  padding:0;
  min-height:auto;
}
.crew-time-summary:not(.show){
  display:none;
}
.crew-time-box{
  min-height:58px;
  border:1px solid #d8e4e9;
  border-radius:10px;
  background:#f8fbfc;
  padding:10px 12px;
}
.crew-time-box small,
.crew-time-box strong{
  display:block;
}
.crew-time-box small{
  font-size:7px;
  font-weight:600;
  letter-spacing:.04em;
  color:#71838f;
}
.crew-time-box strong{
  margin-top:2px;
  font-size:16px;
  font-weight:700;
  letter-spacing:-.025em;
  color:#203744;
}
html[data-theme="dark"] .crew-time-box{
  background:#17232b;
  border-color:#30424d;
}
html[data-theme="dark"] .crew-time-box small{
  color:#9fb0bb;
}
html[data-theme="dark"] .crew-time-box strong{
  color:#edf5f8;
}


/* V15 — crew is ALWAYS visible */
#visibleCrewList,
.visible-crew-list{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  max-height:none !important;
  height:auto !important;
  overflow:visible !important;
}

#crewVisibleCard{
  display:block !important;
}

#crewVisibleCard .visible-worker-row{
  display:grid !important;
}


/* V16 — actual crew rows are visible immediately under totals */
#crewVisibleCard #visibleCrewList{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  position:static !important;
  max-height:none !important;
  height:auto !important;
  overflow:visible !important;
  margin-top:10px !important;
  gap:8px !important;
}

#crewVisibleCard .visible-worker-row{
  display:grid !important;
  min-height:68px !important;
  grid-template-columns:44px minmax(0,1fr) 86px !important;
  align-items:center !important;
  background:#fff;
  border:1px solid var(--line);
  border-radius:11px;
  padding:9px 10px;
}

#crewVisibleCard .visible-worker-avatar{
  width:44px !important;
  height:44px !important;
}

#crewVisibleCard .visible-worker-copy b{
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  letter-spacing:-.025em !important;
}

#crewVisibleCard .visible-worker-copy small{
  font-size:8px !important;
  margin-top:3px !important;
}

#crewVisibleCard .worker-status-button{
  min-width:86px !important;
  height:38px !important;
}

html[data-theme="dark"] #crewVisibleCard .visible-worker-row{
  background:#18242c;
  border-color:#30424d;
}


/* V17 — practical field work plan from Chief settings */
.field-plan-card{
  margin-top:10px;
  border:2px solid #17394c;
  border-radius:13px;
  background:#17394c;
  color:#fff;
  padding:12px;
  box-shadow:0 8px 20px rgba(20,49,66,.10);
}
.field-plan-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.field-plan-head small,.field-plan-head b{display:block}
.field-plan-head small{
  font-size:8px;
  font-weight:700;
  letter-spacing:.06em;
  color:#b9cad3;
}
.field-plan-head b{
  margin-top:3px;
  font-size:12px;
  font-weight:650;
  letter-spacing:-.018em;
  color:#fff;
}
.chief-set{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(255,255,255,.11);
  color:#dce8ee;
  font-size:7px;
  font-weight:600;
  white-space:nowrap;
}
.field-plan-hours{
  display:grid;
  grid-template-columns:1fr 28px 1fr;
  gap:7px;
  align-items:center;
  margin-top:11px;
}
.field-plan-time{
  min-height:70px;
  border-radius:11px;
  background:#fff;
  color:#122937;
  padding:10px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.field-plan-time small{
  font-size:8px;
  font-weight:700;
  letter-spacing:.05em;
  color:#647985;
}
.field-plan-time strong{
  margin-top:2px;
  font-size:28px;
  line-height:1;
  font-weight:700;
  letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
}
.plan-arrow{
  text-align:center;
  font-size:24px;
  font-weight:600;
  color:#fff;
}
.field-plan-foot{
  margin-top:9px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  color:#c7d6de;
  font-size:8px;
  font-weight:500;
}
.field-plan-foot span:first-child{
  color:#fff;
  font-weight:650;
}
.field-plan-foot span:last-child{text-align:right}
.field-plan-card.started{
  background:#144733;
  border-color:#144733;
}
.field-plan-card.finished{
  background:#253844;
  border-color:#253844;
}
html[data-theme="dark"] .field-plan-card{
  background:#203845;
  border-color:#31515f;
}
html[data-theme="dark"] .field-plan-card.started{
  background:#133c2d;
  border-color:#285d47;
}
html[data-theme="dark"] .field-plan-card.finished{
  background:#202d35;
  border-color:#354750;
}


/* =========================================================
   V24 CLEAN OLD LOOK
   ========================================================= */

/* only one Start/Finish control: the sticky field button */
#crewFlowBtn{
  display:none !important;
}

/* reliable work confirmation modal */
.v24-work-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:2147483647;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(8,20,29,.70);
}
.v24-work-modal.open{display:flex !important}

.v24-dialog{
  position:relative;
  width:min(360px,92vw);
  background:#fff;
  color:#142d3b;
  border-radius:20px;
  padding:22px 18px 18px;
  text-align:center;
  box-shadow:0 28px 80px rgba(0,0,0,.34);
}
.v24-close{
  position:absolute;
  right:12px;
  top:12px;
  width:36px;
  height:36px;
  border:0;
  border-radius:10px;
  background:#eef3f5;
  color:#314955;
  font-size:20px;
}
.v24-label{
  margin-top:8px;
  font-size:8px;
  font-weight:700;
  letter-spacing:.08em;
  color:#728490;
}
.v24-time{
  margin-top:6px;
  font-size:58px;
  line-height:1;
  font-weight:750;
  letter-spacing:-.055em;
  color:#112b39;
  font-variant-numeric:tabular-nums;
}
.v24-dialog h2{
  margin:16px 0 5px;
  font-size:23px;
  font-weight:700;
  letter-spacing:-.04em;
}
.v24-dialog p{
  margin:0 0 18px;
  color:#6f808b;
  font-size:11px;
  line-height:1.45;
}
.v24-actions{
  display:grid;
  grid-template-columns:1fr 1.45fr;
  gap:9px;
}
.v24-actions button{
  min-height:52px;
  border-radius:11px;
  font-size:11px;
  font-weight:700;
}
.v24-no{
  border:1px solid #dfe7ec;
  background:#fff;
  color:#304855;
}
.v24-yes{
  border:0;
  background:#0f9f63;
  color:#fff;
}
.v24-work-modal.finish .v24-yes{
  background:#ff5a00;
}

/* sticky button states */
#checkoutBtn.v24-start{
  background:linear-gradient(95deg,#0d9e63,#14b476)!important;
  box-shadow:0 8px 22px rgba(17,164,106,.24)!important;
}
#checkoutBtn.v24-finish{
  background:linear-gradient(95deg,#ff5900,#ff6d00)!important;
  box-shadow:0 8px 22px rgba(255,90,0,.24)!important;
}
#checkoutBtn.v24-done{
  background:#536873!important;
  box-shadow:none!important;
}

html[data-theme="dark"] .v24-dialog{
  background:#18242c;
  color:#f2f6f8;
}
html[data-theme="dark"] .v24-time{color:#f2f7f9}
html[data-theme="dark"] .v24-label,
html[data-theme="dark"] .v24-dialog p{color:#9fb0bb}
html[data-theme="dark"] .v24-close{
  background:#26353e;
  color:#e6eff3;
}
html[data-theme="dark"] .v24-no{
  background:#1d2b34;
  border-color:#384a55;
  color:#e2edf2;
}


/* =========================================================
   V25 — clear visual work-plan state
   ========================================================= */
.field-plan-time{
  position:relative;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
  border:2px solid transparent;
}

.plan-state-mark{
  display:block;
  margin-top:6px;
  font-size:7px;
  line-height:1;
  font-weight:700;
  letter-spacing:.04em;
  color:#82939d;
}

/* START has been confirmed */
.field-plan-time.started{
  background:#e8f8ef !important;
  border-color:#18a86a !important;
  color:#0b7147 !important;
  box-shadow:0 0 0 3px rgba(24,168,106,.10);
}

.field-plan-time.started small,
.field-plan-time.started .plan-state-mark{
  color:#158458 !important;
}

.field-plan-time.started .plan-state-mark::before{
  content:"✓ ";
}

/* FINISH has been confirmed */
.field-plan-time.finished{
  background:#e8f8ef !important;
  border-color:#18a86a !important;
  color:#0b7147 !important;
  box-shadow:0 0 0 3px rgba(24,168,106,.10);
}

.field-plan-time.finished small,
.field-plan-time.finished .plan-state-mark{
  color:#158458 !important;
}

.field-plan-time.finished .plan-state-mark::before{
  content:"✓ ";
}

/* While working, make the finish target subtly ready/waiting */
.field-plan-time.finish-pending{
  border-color:#ffb27d !important;
  box-shadow:0 0 0 3px rgba(255,90,0,.07);
}

.field-plan-time.finish-pending .plan-state-mark{
  color:#d86720;
}

/* Dark mode */
html[data-theme="dark"] .field-plan-time.started,
html[data-theme="dark"] .field-plan-time.finished{
  background:#173b2e !important;
  border-color:#27b97b !important;
  color:#dff8eb !important;
}

html[data-theme="dark"] .field-plan-time.started small,
html[data-theme="dark"] .field-plan-time.started .plan-state-mark,
html[data-theme="dark"] .field-plan-time.finished small,
html[data-theme="dark"] .field-plan-time.finished .plan-state-mark{
  color:#82ddb0 !important;
}

html[data-theme="dark"] .field-plan-time.finish-pending{
  border-color:#b66b35 !important;
}


/* =========================================================
   V26 — remove outer crew wrapper, make inner blocks wider
   ========================================================= */

/* remove the outer bordered block */
.crew-visible-card{
  margin-top:10px;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  padding:0 !important;
  box-shadow:none !important;
}

/* give the inner content a bit more usable width */
.crew-visible-head{
  padding:0 2px;
}

.crew-numbers{
  margin:10px 0 10px;
  width:100%;
}

.visible-crew-list{
  margin-top:10px;
  width:100%;
}

.visible-worker-row{
  width:100%;
  min-height:58px;
  padding:8px 10px;
  grid-template-columns:38px minmax(0,1fr) 96px;
}

/* keep dark mode clean after removing outer wrapper */
html[data-theme="dark"] .crew-visible-card{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* small screens */
@media (max-width: 360px){
  .visible-worker-row{
    grid-template-columns:38px minmax(0,1fr) 80px;
    padding:8px 8px;
  }
}

/* V27 late arrival */
.worker-status-button.late{background:#fff4e8!important;border-color:#ffc58f!important;color:#c65d0a!important}
.late-arrival-modal{display:none;position:fixed;inset:0;z-index:2147483647;align-items:center;justify-content:center;padding:18px;background:rgba(8,20,29,.70)}
.late-arrival-modal.open{display:flex!important}
.late-arrival-card{position:relative;width:min(360px,92vw);background:#fff;color:#142d3b;border-radius:20px;padding:20px 18px 18px;box-shadow:0 28px 80px rgba(0,0,0,.34)}
.late-arrival-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:10px;background:#eef3f5;color:#314955;font-size:20px}
.late-worker{display:flex;align-items:center;gap:10px;padding-right:42px}.late-worker-avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#516b79,#c5d0d6);color:#fff;font-size:10px;font-weight:700}
.late-worker small,.late-worker b{display:block}.late-worker small{font-size:8px;font-weight:700;letter-spacing:.06em;color:#748692}.late-worker b{margin-top:2px;font-size:16px}
.late-plan-row{margin-top:17px;min-height:49px;border:1px solid #dfe7ec;border-radius:11px;display:flex;align-items:center;justify-content:space-between;padding:0 12px}.late-plan-row span{font-size:10px;color:#6d808b}.late-plan-row strong{font-size:19px}
.late-time-label{display:block;margin-top:15px;font-size:11px;font-weight:650}.late-time-input{width:100%;height:62px;margin-top:7px;border:2px solid #cad8df;border-radius:12px;background:#fff;color:#102936;padding:0 14px;font-size:28px;font-weight:700;text-align:center;outline:none}
.late-result{margin-top:10px;min-height:68px;border:1px solid #ffd0a8;border-radius:12px;background:#fff6ed;padding:10px 12px}.late-result small,.late-result strong,.late-result span{display:block}.late-result small{font-size:8px;font-weight:800;color:#ba5c14}.late-result strong{margin-top:2px;font-size:22px;color:#b95409}.late-result span{margin-top:2px;font-size:9px;color:#8a603f}
.late-result.on-time{border-color:#bde5d2;background:#eaf8f1}.late-result.on-time small,.late-result.on-time strong{color:#118052}
.late-actions{display:grid;grid-template-columns:1fr 1.55fr;gap:9px;margin-top:14px}.late-actions button{min-height:52px;border-radius:11px;font-size:11px;font-weight:700}.late-cancel{border:1px solid #dfe7ec;background:#fff;color:#304855}.late-confirm{border:0;background:#ff5a00;color:#fff}
html[data-theme="dark"] .late-arrival-card{background:#18242c;color:#f2f6f8}html[data-theme="dark"] .late-arrival-close{background:#26353e;color:#e6eff3}html[data-theme="dark"] .late-time-input{background:#142028;color:#f2f7f9;border-color:#3b4e59}


/* =========================================================
   V28 — Lead forms crew before Check Start
   ========================================================= */

.crew-head-actions{
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
}

.form-crew-btn{
  min-height:32px;
  border:1px solid #ffd4bc;
  border-radius:999px;
  background:#fff4ec;
  color:#d94e00;
  padding:0 10px;
  font-size:8px;
  font-weight:750;
  white-space:nowrap;
}

.form-crew-btn:disabled{
  background:#eef3f5;
  border-color:#e0e8ec;
  color:#7f9099;
  cursor:default;
}

/* modal */
.crew-builder-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:2147483647;
  align-items:center;
  justify-content:center;
  padding:14px;
  background:rgba(8,20,29,.72);
}

.crew-builder-modal.open{
  display:flex !important;
}

.crew-builder-card{
  width:min(390px,96vw);
  max-height:88vh;
  overflow:auto;
  position:relative;
  background:#fff;
  color:#142d3b;
  border-radius:20px;
  padding:19px 16px 16px;
  box-shadow:0 30px 85px rgba(0,0,0,.36);
}

.crew-builder-close{
  position:absolute;
  right:11px;
  top:11px;
  width:36px;
  height:36px;
  border:0;
  border-radius:10px;
  background:#eef3f5;
  color:#314955;
  font-size:20px;
}

.crew-builder-head{
  padding-right:46px;
}

.crew-builder-head small{
  display:block;
  font-size:8px;
  font-weight:750;
  letter-spacing:.07em;
  color:#738792;
}

.crew-builder-head h2{
  margin:3px 0 4px;
  font-size:21px;
  letter-spacing:-.035em;
}

.crew-builder-head p{
  margin:0;
  font-size:10px;
  line-height:1.45;
  color:#70838e;
}

.crew-builder-summary{
  margin-top:14px;
  min-height:48px;
  border:1px solid #dfe7ec;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 11px;
}

.crew-builder-summary span{
  font-size:10px;
  color:#71848f;
}

.crew-builder-summary strong{
  font-size:13px;
}

.crew-builder-section{
  margin-top:14px;
}

.crew-builder-section-title{
  margin-bottom:7px;
  font-size:8px;
  font-weight:750;
  letter-spacing:.07em;
  color:#758892;
}

.crew-builder-row{
  min-height:58px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:7px 8px;
  border:1px solid #dfe7ec;
  border-radius:10px;
  margin-top:6px;
}

.crew-builder-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#516b79,#c5d0d6);
  color:#fff;
  font-size:9px;
  font-weight:700;
}

.crew-builder-copy b,
.crew-builder-copy small{
  display:block;
}

.crew-builder-copy b{
  font-size:12px;
  letter-spacing:-.02em;
}

.crew-builder-copy small{
  margin-top:2px;
  font-size:8px;
  color:#748792;
}

.crew-builder-row button{
  min-width:72px;
  height:36px;
  border-radius:9px;
  font-size:9px;
  font-weight:700;
}

.crew-add{
  border:1px solid #c7e7d7;
  background:#ebf8f1;
  color:#0e8050;
}

.crew-remove{
  border:1px solid #f1c8cb;
  background:#fff0f0;
  color:#b62832;
}

.crew-required{
  min-width:72px;
  height:36px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:#eef3f5;
  color:#6e818c;
  font-size:8px;
  font-weight:700;
}

.crew-builder-empty{
  min-height:52px;
  display:grid;
  place-items:center;
  border:1px dashed #ccd8df;
  border-radius:10px;
  color:#7c8e98;
  font-size:9px;
}

.crew-builder-actions{
  position:sticky;
  bottom:-16px;
  margin:16px -16px -16px;
  padding:12px 16px 16px;
  background:linear-gradient(to top,#fff 78%,rgba(255,255,255,.90));
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:9px;
}

.crew-builder-actions button{
  min-height:50px;
  border-radius:11px;
  font-size:11px;
  font-weight:750;
}

.crew-builder-cancel{
  border:1px solid #dfe7ec;
  background:#fff;
  color:#304855;
}

.crew-builder-save{
  border:0;
  background:#ff5a00;
  color:#fff;
}

/* dark */
html[data-theme="dark"] .form-crew-btn{
  background:#3a281c;
  border-color:#654225;
  color:#ffb47b;
}
html[data-theme="dark"] .form-crew-btn:disabled{
  background:#22313a;
  border-color:#344751;
  color:#82939c;
}
html[data-theme="dark"] .crew-builder-card{
  background:#18242c;
  color:#f2f6f8;
}
html[data-theme="dark"] .crew-builder-close{
  background:#26353e;
  color:#e6eff3;
}
html[data-theme="dark"] .crew-builder-head small,
html[data-theme="dark"] .crew-builder-head p,
html[data-theme="dark"] .crew-builder-summary span,
html[data-theme="dark"] .crew-builder-section-title,
html[data-theme="dark"] .crew-builder-copy small{
  color:#9fb0bb;
}
html[data-theme="dark"] .crew-builder-summary,
html[data-theme="dark"] .crew-builder-row{
  border-color:#344751;
}
html[data-theme="dark"] .crew-builder-row{
  background:#17232b;
}
html[data-theme="dark"] .crew-builder-required,
html[data-theme="dark"] .crew-required{
  background:#24343d;
  color:#aebbc2;
}
html[data-theme="dark"] .crew-add{
  background:#123b2d;
  border-color:#285d47;
  color:#9fe3c2;
}
html[data-theme="dark"] .crew-remove{
  background:#3a1d20;
  border-color:#633239;
  color:#ff9fa6;
}
html[data-theme="dark"] .crew-builder-actions{
  background:linear-gradient(to top,#18242c 78%,rgba(24,36,44,.90));
}
html[data-theme="dark"] .crew-builder-cancel{
  background:#1d2b34;
  border-color:#384a55;
  color:#e2edf2;
}


/* =========================================================
   V29 — larger Form Crew + site notes/photos
   ========================================================= */

/* Large field-friendly Form Crew button */
.form-crew-wide{
  width:100%;
  min-height:58px;
  margin-top:10px;
  border-radius:12px;
  padding:8px 12px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 24px;
  align-items:center;
  gap:10px;
  text-align:left;
  background:linear-gradient(95deg,#ff5a00,#ff6c00);
  border:0;
  color:#fff;
  box-shadow:0 8px 20px rgba(255,90,0,.17);
}

.form-crew-wide .form-crew-icon{
  width:38px;
  height:38px;
  border:2px solid rgba(255,255,255,.85);
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:22px;
  line-height:1;
}

.form-crew-copy b,
.form-crew-copy small{
  display:block;
}

.form-crew-copy b{
  font-size:14px;
  font-weight:750;
  letter-spacing:-.02em;
}

.form-crew-copy small{
  margin-top:2px;
  font-size:8px;
  font-weight:500;
  color:rgba(255,255,255,.88);
}

.form-crew-arrow{
  text-align:right;
  font-size:20px;
}

.form-crew-wide:disabled{
  background:#e8eef1 !important;
  color:#788b95 !important;
  box-shadow:none !important;
  border:1px solid #dce5e9 !important;
}

.form-crew-wide:disabled .form-crew-icon{
  border-color:#aebcc3;
}

.form-crew-wide:disabled .form-crew-copy small{
  color:#8798a1;
}

/* Site notes / photo card */
.site-media-card{
  margin-top:10px;
  border:1px solid #dfe7ec;
  border-radius:13px;
  background:#fff;
  padding:12px;
}

.site-media-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.site-media-head small,
.site-media-head h2,
.site-media-head p{
  display:block;
}

.site-media-head small{
  font-size:8px;
  font-weight:750;
  letter-spacing:.06em;
  color:#748792;
}

.site-media-head h2{
  margin:3px 0 2px;
  font-size:17px;
  letter-spacing:-.03em;
}

.site-media-head p{
  margin:0;
  font-size:8px;
  color:#71848f;
}

.site-media-count{
  flex:0 0 auto;
  min-height:28px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  background:#eef3f5;
  color:#657985;
  padding:0 9px;
  font-size:8px;
  font-weight:700;
}

.site-media-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:11px;
}

.site-media-action{
  min-height:60px;
  border-radius:11px;
  padding:8px 9px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:8px;
  align-items:center;
  text-align:left;
}

.site-media-action.note{
  border:1px solid #d8e5ec;
  background:#f8fbfc;
  color:#223d4b;
}

.site-media-action.photo{
  border:1px solid #ffd2b6;
  background:#fff4eb;
  color:#bb4d08;
}

.site-media-action-icon{
  width:34px;
  height:34px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:#fff;
  font-size:18px;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}

.site-media-action b,
.site-media-action small{
  display:block;
}

.site-media-action b{
  font-size:10px;
  font-weight:750;
}

.site-media-action small{
  margin-top:2px;
  font-size:7px;
  color:#748792;
}

.site-media-action.photo small{
  color:#b46d42;
}

.site-media-empty{
  margin-top:10px;
  min-height:44px;
  border:1px dashed #ccd8df;
  border-radius:10px;
  display:grid;
  place-items:center;
  padding:8px;
  color:#7b8d97;
  font-size:8px;
  text-align:center;
}

.site-media-latest{
  margin-top:10px;
  border-left:3px solid #ff5a00;
  border-radius:8px;
  background:#fff8f3;
  padding:9px 10px;
}

.site-media-latest small,
.site-media-latest b,
.site-media-latest p{
  display:block;
}

.site-media-latest small{
  font-size:7px;
  font-weight:700;
  color:#a46037;
}

.site-media-latest b{
  margin-top:2px;
  font-size:9px;
}

.site-media-latest p{
  margin:4px 0 0;
  font-size:9px;
  line-height:1.4;
  color:#5f7180;
}

.site-photo-strip{
  display:flex;
  gap:7px;
  overflow-x:auto;
  margin-top:10px;
  padding-bottom:2px;
}

.site-photo-thumb{
  flex:0 0 82px;
  height:70px;
  border-radius:9px;
  overflow:hidden;
  border:1px solid #dce5e9;
  position:relative;
  background:#eef3f5;
}

.site-photo-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.site-photo-thumb span{
  position:absolute;
  left:4px;
  bottom:4px;
  padding:2px 5px;
  border-radius:999px;
  background:rgba(8,23,32,.72);
  color:#fff;
  font-size:6px;
}

.site-media-view{
  width:100%;
  min-height:39px;
  margin-top:10px;
  border:1px solid #dfe7ec;
  border-radius:10px;
  background:#fff;
  color:#314956;
  font-size:9px;
  font-weight:700;
}

/* Note modal */
.site-note-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:2147483647;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(8,20,29,.70);
}

.site-note-modal.open{
  display:flex !important;
}

.site-note-card{
  width:min(370px,94vw);
  position:relative;
  background:#fff;
  color:#142d3b;
  border-radius:20px;
  padding:20px 18px 18px;
  box-shadow:0 28px 80px rgba(0,0,0,.34);
}

.site-note-close{
  position:absolute;
  top:12px;
  right:12px;
  width:36px;
  height:36px;
  border:0;
  border-radius:10px;
  background:#eef3f5;
  color:#314955;
  font-size:20px;
}

.site-note-head{
  padding-right:44px;
}

.site-note-head small{
  display:block;
  font-size:8px;
  font-weight:750;
  letter-spacing:.07em;
  color:#748792;
}

.site-note-head h2{
  margin:3px 0 4px;
  font-size:20px;
  letter-spacing:-.035em;
}

.site-note-head p{
  margin:0;
  font-size:9px;
  color:#71848f;
}

#siteNoteInput{
  width:100%;
  min-height:125px;
  margin-top:14px;
  resize:vertical;
  border:2px solid #d6e1e6;
  border-radius:12px;
  padding:11px;
  background:#fff;
  color:#152d3b;
  font-size:12px;
  line-height:1.45;
  outline:none;
}

#siteNoteInput:focus{
  border-color:#ff7a24;
  box-shadow:0 0 0 3px rgba(255,90,0,.08);
}

.site-note-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:7px;
  color:#84949d;
  font-size:8px;
}

.site-note-actions{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:9px;
  margin-top:14px;
}

.site-note-actions button{
  min-height:51px;
  border-radius:11px;
  font-size:11px;
  font-weight:750;
}

.site-note-cancel{
  border:1px solid #dfe7ec;
  background:#fff;
  color:#304855;
}

.site-note-save{
  border:0;
  background:#ff5a00;
  color:#fff;
}

/* dark mode */
html[data-theme="dark"] .form-crew-wide:disabled{
  background:#22313a !important;
  color:#8fa0a9 !important;
  border-color:#344751 !important;
}

html[data-theme="dark"] .site-media-card,
html[data-theme="dark"] .site-note-card{
  background:#18242c;
  border-color:#30424d;
  color:#f2f6f8;
}

html[data-theme="dark"] .site-media-head small,
html[data-theme="dark"] .site-media-head p,
html[data-theme="dark"] .site-media-action small,
html[data-theme="dark"] .site-note-head small,
html[data-theme="dark"] .site-note-head p,
html[data-theme="dark"] .site-note-meta{
  color:#9fb0bb;
}

html[data-theme="dark"] .site-media-count{
  background:#25353e;
  color:#b7c4ca;
}

html[data-theme="dark"] .site-media-action.note,
html[data-theme="dark"] .site-media-view{
  background:#17232b;
  border-color:#30424d;
  color:#e8eff3;
}

html[data-theme="dark"] .site-media-action.photo{
  background:#3a281c;
  border-color:#654225;
  color:#ffb47b;
}

html[data-theme="dark"] .site-media-action-icon{
  background:#22313a;
}

html[data-theme="dark"] .site-media-empty{
  border-color:#40535e;
  color:#9fb0bb;
}

html[data-theme="dark"] .site-media-latest{
  background:#31261f;
  border-left-color:#ff7625;
}

html[data-theme="dark"] .site-media-latest p{
  color:#c7d2d8;
}

html[data-theme="dark"] #siteNoteInput{
  background:#142028;
  color:#f2f7f9;
  border-color:#3b4e59;
}

html[data-theme="dark"] .site-note-close{
  background:#26353e;
  color:#e6eff3;
}

html[data-theme="dark"] .site-note-cancel{
  background:#1d2b34;
  border-color:#384a55;
  color:#e2edf2;
}


/* =========================================================
   COMBINED APP — Lead + Worker Calendar
   ========================================================= */
.bottom-nav{
  grid-template-columns:repeat(5,1fr) !important;
}
.bottom-nav .nav-link{
  border:0;
  background:#fff;
  color:#5f7484;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-size:8px;
  font-weight:650;
  min-width:0;
  -webkit-tap-highlight-color:transparent;
}
.bottom-nav .nav-link svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.bottom-nav .nav-link b{
  display:block;
  margin-top:4px;
  font-size:8px;
}
html[data-theme="dark"] .bottom-nav .nav-link{
  background:#101820;
  color:#9db0ba;
}