/* STORMCORE JOB PRODUCTION - STYLES
   Approved branding/header: preserve.
   Canonical responsive production grid: final section of this file.
   Earlier component rules retained where runtime dependencies are not yet ruled out.
*/

:root{--navy:#031b31;--navy2:#062d50;--blue:#1597e5;--line:#5d7d96;--panel:#f4f7fa;--red:#ff2020;--green:#20a45a;--sc-work-white:#f9fcff;--sc-work-blue:#f5faff;--sc-work-slate:#f5faff;--sc-work-border:#062d50;--sc-work-text:#17354b;--sc-work-muted:#405b70;--sc-work-accent:#08659e}
*{box-sizing:border-box} body{margin:0;font-family:Inter,Arial,sans-serif;background:#021525;color:#fff}
.hero{min-height:170px;padding:0;background:#03111e;position:relative;border-bottom:1px solid #1777aa;overflow:visible}
.approved-header{height:170px;width:100%;background:url("stormcore-approved-header.svg") center center / contain no-repeat}
.hero nav{position:absolute;right:4vw;top:18px;z-index:21}
.navbtn{background:#0c78bd;color:#fff;border:1px solid #45b9ff;border-radius:8px;padding:13px 18px;font-size:16px;font-weight:800;cursor:pointer}
.menu{position:absolute;right:4vw;top:112px;background:#071d2d;border:1px solid #1f79a9;border-radius:10px;padding:8px;z-index:20;box-shadow:0 14px 35px #0008}.menu button{display:block;width:220px;text-align:left;background:transparent;border:0;color:#fff;padding:12px;border-radius:6px;font-weight:700;cursor:pointer}.menu button:hover{background:#0c4264}.hidden{display:none!important}
main{padding:10px}.board-wrap{overflow:auto;border:1px solid #1579ad;border-radius:7px}table{width:100%;min-width:1100px;border-collapse:separate;border-spacing:2px;background:#06243a;table-layout:fixed}.num{width:4%}.customer{width:21%}.small{width:10%}.contractor{width:20%}.status{width:15%}
th{height:86px;background:linear-gradient(#063b65,#052a49);font-size:15px;border:1px solid #167eb8}td{height:54px;background:#f5f7f9;color:#12202c;border:1px solid #7694aa;text-align:center}td:first-child{background:#0a2c45;color:#fff;font-weight:900;font-size:20px}
.dot{width:31px;height:31px;border-radius:50%;border:2px solid #a5bdca;background:var(--red);box-shadow:inset 0 0 0 1px #fff7;margin:auto}.dot.green{background:var(--green)}
select,input{width:94%;padding:10px;border:1px solid #9aaebb;border-radius:6px;background:white;font-size:15px}.customer-select{font-weight:700}
.modal{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:50;padding:20px}.card{width:min(650px,96vw);max-height:85vh;overflow:auto;background:#fff;color:#13222f;border-radius:14px;padding:24px;position:relative}.close{position:absolute;right:12px;top:8px;border:0;background:transparent;font-size:30px;cursor:pointer}.card h2{margin-top:0;color:#06365a}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.formgrid label{font-size:12px;font-weight:800;color:#536575}.formgrid input{width:100%;margin-top:4px}.primary{margin-top:16px;background:#087dc3;color:#fff;border:0;padding:12px 16px;border-radius:7px;font-weight:800;cursor:pointer}.customer-list{display:grid;gap:8px}.customer-item{border:1px solid #d2dce3;border-radius:8px;padding:12px}.muted{color:#71808b;font-size:13px}
@media(max-width:760px){.hero{min-height:145px}.approved-header{height:145px;background-size:cover}.hero nav{right:12px;top:10px}.navbtn{margin-top:5px}.menu{top:78px}.formgrid{grid-template-columns:1fr}}

.pagebar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#041b2b;border:1px solid #1579ad;border-top:0;border-radius:0 0 7px 7px;font-weight:800;color:#dce8ef}
.board-wrap{max-height:calc(100vh - 235px);overflow:auto}
#board thead th{position:sticky;top:0;z-index:10}

/* SURGICAL RESPONSIVE / FUNCTIONAL ADDITIONS - existing design values preserved */
.hero nav{display:flex;gap:8px;align-items:flex-start}.hero nav>div{position:relative}.hero nav>div .menu{right:0;top:54px}
.marker-cell{position:relative}.dot{position:relative}.hover-info{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);background:#071d2d;color:#fff;border:1px solid #3b8db8;border-radius:7px;padding:7px 9px;white-space:nowrap;font-size:12px;font-weight:700;z-index:30;opacity:0;pointer-events:none}.dot:hover .hover-info,.dot:focus .hover-info{opacity:1}.marker-cell small{display:block;font-size:9px;font-weight:800;color:#536575;margin-top:2px}.status-cell small{display:block;font-size:9px;font-weight:800;color:#536575;margin-top:2px}.customer-expand{display:none}.detail-row td{height:auto!important;padding:0;background:#e9f0f5;border:0}.detail-panel{padding:10px;text-align:left}.detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.detail-grid div{background:#fff;border:1px solid #cbd8e1;border-radius:7px;padding:8px}.detail-grid b,.detail-grid span{display:block}.detail-grid b{font-size:9px;text-transform:uppercase;color:#607381;margin-bottom:2px}.detail-grid span{font-size:12px;font-weight:700}.status-banner{padding:11px;border-radius:8px;text-align:center;font-weight:900}.status-banner.paid{background:#dff4e8;color:#116b39}.status-banner.owed{background:#ffe1e1;color:#a41414}.amount-row{display:flex;justify-content:space-between;align-items:center;border:1px solid #d3dfe7;border-radius:8px;padding:12px;margin-top:10px}.amount-row strong{font-size:20px;color:#06365a}.wide{width:100%}.secondary{margin-top:16px;background:#e7eef3;color:#17334a;border:1px solid #b7c8d4;padding:12px 16px;border-radius:7px;font-weight:800;cursor:pointer}.confirm{display:flex;gap:10px}.confirm>*{flex:1}.date-label{display:block;font-size:12px;font-weight:800;color:#536575}.date-label input{width:100%;margin-top:5px}.contractor-select{font-weight:700}
@media(max-width:760px){
 body{padding-bottom:62px}.hero nav{position:fixed;left:0;right:0;bottom:0;top:auto;height:58px;background:#031b31;border-top:1px solid #1777aa;display:flex;justify-content:center;align-items:center;padding:7px;z-index:45}.hero nav>div{flex:1;max-width:220px}.hero nav .navbtn{width:100%;margin:0}.hero nav>div .menu{position:fixed;bottom:58px;top:auto;right:6px}.approved-header{height:145px}.hero{min-height:145px}.board-wrap{overflow:visible;max-height:none}table{min-width:0;width:100%;table-layout:fixed}.num{width:5%}.customer{width:24%}.small{width:10.5%}.contractor{width:17%}.status{width:13.5%}th{font-size:10px;padding:3px}td{padding:2px}.customer-select{display:none}.customer-expand{display:flex;width:100%;border:0;background:transparent;color:#12202c;align-items:center;justify-content:space-between;text-align:left;font-weight:800;padding:6px 3px}.customer-expand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.customer-expand b{color:#087dc3;font-size:16px}.contractor-select{font-size:10px;padding:7px 2px}.status-cell select{font-size:10px;padding:7px 2px}.hover-info{display:none}.dot{width:27px;height:27px}.detail-grid{grid-template-columns:1fr 1fr}.detail-grid span{font-size:10px}.detail-grid b{font-size:8px}.formgrid{grid-template-columns:1fr}}
@media(max-width:420px){th{font-size:8.5px}.dot{width:24px;height:24px}.contractor-select,.status-cell select{font-size:9px;padding:6px 1px}.marker-cell small,.status-cell small{font-size:7px}.customer-expand{font-size:10px}}

/* SURGICAL COMPATIBILITY PASS - no visual redesign. */

/* Avoid mobile viewport height jumps caused by browser chrome. */
@supports (height: 100dvh) {
  .board-wrap { max-height: calc(100dvh - 235px); }
}
@media (max-width:760px) {
  @supports (height: 100dvh) {
    .board-wrap { max-height: none; }
  }

  /* Preserve the existing one-page column layout while preventing
     long values from forcing columns wider. */
  th, td { overflow-wrap: anywhere; }
  .customer-label { min-width: 0; }

  /* Ensure fixed bottom navigation respects iPhone safe areas. */
  .main-nav {
    padding-bottom: calc(7px + env(safe-area-inset-bottom));
    height: calc(58px + env(safe-area-inset-bottom));
  }
  .main-nav .menu {
    bottom: calc(58px + env(safe-area-inset-bottom));
  }

  /* Keep dialogs usable on short landscape phones. */
  .card { max-height: calc(100dvh - 20px); }
}
@media (max-height:500px) and (orientation:landscape) {
  .hero { min-height: 90px; }
  .approved-header { height: 90px; }
  .modal { align-items: start; }
  .card { max-height: calc(100vh - 20px); margin-top:10px; }
}
@media (max-width:360px) {
  /* Compatibility tightening only; same existing visual system. */
  .navbtn { padding-left:8px; padding-right:8px; }
  .main-nav { gap:4px; }
  .main-nav .navbtn { min-width:0; }
}

/* SURGICAL NAVIGATION CHANGE - preserves approved colors/theme; only placement and control treatment. */
.main-nav{
  position:relative;
  top:auto;
  right:auto;
  width:100%;
  min-height:54px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  background:#031b31;
  border-top:1px solid #1777aa;
  border-bottom:1px solid #1579ad;
  z-index:20;
}
.navbtn{
  min-width:170px;
  border:1px solid #2f9bd1;
  border-radius:8px;
  background:#082b45;
  color:#fff;
  padding:10px 18px;
  font-size:14px;
  font-weight:800;
  box-shadow:none;
}
.navbtn:hover,.navbtn:focus-visible{background:#0c4264;border-color:#54b9ea}
.main-nav .menu{top:calc(100% - 1px);right:auto}
@media(max-width:760px){
  .main-nav{
    position:fixed;
    left:0;right:0;bottom:0;top:auto;
    height:58px;
    min-height:58px;
    padding:7px;
    padding-bottom:calc(7px + env(safe-area-inset-bottom));
    justify-content:center;
    align-items:center;
    gap:5px;
    background:#031b31;
    border-top:1px solid #1777aa;
    border-bottom:0;
    z-index:45;
  }
  .main-nav .navbtn{flex:1;min-width:0;max-width:220px}
  .main-nav .menu{position:fixed;top:auto;bottom:calc(58px + env(safe-area-inset-bottom));right:6px}
}

/* SURGICAL HEADER COMPATIBILITY FIX - artwork/design unchanged.
   Preserves the source image aspect ratio so large screens do not crop it off-screen. */
.approved-header {
  width:100%;
  aspect-ratio:2172/724;
  height:auto;
  min-height:0;
  background-size:contain !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
@media(max-width:900px){
  .approved-header { aspect-ratio:2172/724; height:auto; }
}
@media(max-width:760px){
  .approved-header { aspect-ratio:2172/724; height:auto; }
}

/* SURGICAL HEADER HEIGHT FIX - artwork/design unchanged.
   Large displays keep the approved header at the original compact height;
   the image scales inside that fixed area without cropping. */
@media(min-width:901px){
  .hero{min-height:170px !important;}
  .approved-header{
    height:170px !important;
    min-height:170px !important;
    max-height:170px !important;
    aspect-ratio:auto !important;
  }
}
@media(min-width:1200px){
  .approved-header{height:170px !important;max-height:170px !important;}
}

/* SURGICAL HEADER BALANCE FIX - approved artwork unchanged.
   Large screens: increase header presence without allowing the header to
   become excessively tall. The original image remains the only artwork. */
@media(min-width:901px){
  .hero{
    min-height:250px !important;
    height:250px !important;
  }
  .approved-header{
    height:250px !important;
    min-height:250px !important;
    max-height:250px !important;
    aspect-ratio:auto !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
  }
}
@media(min-width:1600px){
  .hero{
    min-height:260px !important;
    height:260px !important;
  }
  .approved-header{
    height:260px !important;
    min-height:260px !important;
    max-height:260px !important;
  }
}

/* SURGICAL CHANGE 009 - TOP-ONLY HEADER HEIGHT.
   Bottom boundary remains at the same visual position relative to the existing
   header/nav treatment; additional height is added above it so the swirl stays
   fully visible. No artwork/design changes. */
@media(min-width:901px){
  .hero{
    min-height:290px !important;
    height:290px !important;
  }
  .approved-header{
    height:290px !important;
    min-height:290px !important;
    max-height:290px !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
  }
}
@media(min-width:1600px){
  .hero{
    min-height:300px !important;
    height:300px !important;
  }
  .approved-header{
    height:300px !important;
    min-height:300px !important;
    max-height:300px !important;
  }
}

/* SURGICAL CHANGE 010 - TOP-ONLY HEADER HEIGHT, BOTTOM LOCKED.
   Increase the header's top space only so the complete approved swirl remains
   visible. No image/design changes. */
@media(min-width:901px){
  .hero{
    min-height:330px !important;
    height:330px !important;
  }
  .approved-header{
    height:330px !important;
    min-height:330px !important;
    max-height:330px !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
  }
}
@media(min-width:1600px){
  .hero{
    min-height:340px !important;
    height:340px !important;
  }
  .approved-header{
    height:340px !important;
    min-height:340px !important;
    max-height:340px !important;
  }
}

/* SURGICAL CHANGE 011 - SHORTEN FROM BOTTOM / PRESERVE TOP.
   Only the header geometry is adjusted. The approved artwork is unchanged. */
@media(min-width:901px){
  .hero{
    min-height:300px !important;
    height:300px !important;
  }
  .approved-header{
    height:300px !important;
    min-height:300px !important;
    max-height:300px !important;
  }
}
@media(min-width:1600px){
  .hero{
    min-height:310px !important;
    height:310px !important;
  }
  .approved-header{
    height:310px !important;
    min-height:310px !important;
    max-height:310px !important;
  }
}

/* SURGICAL CHANGE 015 - NAVIGATION ONLY.
   Header contains artwork only. Customer/Contractor navigation is a separate
   bar directly below the header on larger screens and the same bar is fixed
   to the bottom on smaller screens. */
.main-nav{
  position:relative !important;
  top:auto !important;
  right:auto !important;
  left:auto !important;
  bottom:auto !important;
  width:100% !important;
  min-height:54px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  margin:0;
  background:#031b31;
  border-top:1px solid #1777aa;
  border-bottom:1px solid #1579ad;
  z-index:20;
}
.main-nav .navbtn{
  min-width:170px;
}
.main-nav .menu{
  position:absolute;
  top:calc(100% - 1px);
  right:auto;
}
@media(max-width:760px){
  .main-nav{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    height:58px;
    min-height:58px;
    padding:7px;
    padding-bottom:calc(7px + env(safe-area-inset-bottom));
    z-index:45;
  }
  .main-nav .navbtn{
    min-width:0;
    flex:1;
    max-width:220px;
  }
  .main-nav .menu{
    position:fixed;
    top:auto;
    bottom:calc(58px + env(safe-area-inset-bottom));
    right:6px;
  }
}

/* SURGICAL CHANGE 016 - FUNCTIONAL RESPONSIVE HEADER.
   Header artwork is unchanged. The image preserves its 3:1 ratio and is
   constrained by the header frame instead of using cover/stretch behavior.
   The header grows only enough to display the artwork cleanly. */
.hero{
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}
.approved-header{
  width:100% !important;
  height:clamp(180px, 18vw, 320px) !important;
  min-height:180px !important;
  max-height:320px !important;
  background-size:auto 100% !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
@media(max-width:900px){
  .approved-header{
    height:clamp(150px, 24vw, 220px) !important;
    min-height:150px !important;
    max-height:220px !important;
    background-size:auto 100% !important;
  }
}
@media(max-width:760px){
  .approved-header{
    height:112px !important;
    min-height:112px !important;
    max-height:112px !important;
    background-size:auto 100% !important;
  }
}

/* SURGICAL CHANGE 017 - FULL-SCREEN SVG HEADER.
   Existing approved artwork is embedded unchanged in an SVG viewport.
   The SVG fills the header frame at every viewport size without raster
   distortion. No other page design is changed. */
html,body{overflow-x:hidden}
.approved-header{
  width:100%;
  height:100%;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.hero{
  width:100%;
}
@media(min-width:901px){
  .hero,.approved-header{height:clamp(220px,24vw,360px) !important;min-height:0 !important;max-height:none !important;}
}
@media(max-width:900px){
  .hero,.approved-header{height:auto;min-height:145px;}
}

/* SURGICAL CHANGE 018 - NAVIGATION TAB REDESIGN ONLY.
   Replace the previous button/card treatment with clean tabs that visually
   extend from the header edge on desktop and from the bottom edge on mobile. */
.main-nav{
  position:relative !important;
  width:100% !important;
  min-height:52px;
  height:52px;
  margin:0;
  padding:0 24px;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:2px;
  background:transparent;
  border:0;
  z-index:30;
}
.main-nav .navbtn{
  position:relative;
  min-width:175px;
  height:45px;
  margin:0;
  padding:0 22px;
  border:0 !important;
  border-radius:10px 10px 0 0 !important;
  background:#062d50 !important;
  color:#fff;
  box-shadow:none !important;
  font-size:14px;
  font-weight:800;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border-top:1px solid #237fad !important;
  border-left:1px solid #237fad !important;
  border-right:1px solid #237fad !important;
}
.main-nav .navbtn:hover,
.main-nav .navbtn:focus-visible{
  background:#0a4266 !important;
  outline:none;
}
.main-nav .navbtn::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:0;
  height:3px;
  background:#1597e5;
  border-radius:3px 3px 0 0;
}
.main-nav .menu{
  position:absolute !important;
  top:45px !important;
  right:auto !important;
  min-width:215px;
  border-radius:0 0 9px 9px;
  border-top:1px solid #1579ad;
  box-shadow:0 14px 30px #0008;
}
#customersMenu{left:calc(50% - 177px)}
#contractorsMenu{left:calc(50% + 2px)}

@media(max-width:760px){
  .main-nav{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    height:64px;
    min-height:64px;
    padding:0 10px calc(7px + env(safe-area-inset-bottom));
    align-items:flex-start;
    gap:2px;
    background:#031b31;
    border-top:1px solid #1777aa;
    z-index:45;
  }
  .main-nav .navbtn{
    height:48px;
    min-width:0;
    flex:1;
    max-width:240px;
    border-radius:0 0 10px 10px !important;
    border-top:0 !important;
    border-bottom:1px solid #237fad !important;
    border-left:1px solid #237fad !important;
    border-right:1px solid #237fad !important;
  }
  .main-nav .navbtn::after{
    top:0;
    bottom:auto;
    border-radius:0 0 3px 3px;
  }
  .main-nav .menu{
    position:fixed !important;
    top:auto !important;
    bottom:calc(64px + env(safe-area-inset-bottom)) !important;
    right:auto !important;
    left:auto !important;
    border-radius:9px 9px 0 0;
  }
  #customersMenu{left:10px}
  #contractorsMenu{right:10px;left:auto}
}

/* SURGICAL CHANGE 019 - SWAP NAV TAB POSITIONS ONLY. */
@media(min-width:761px){
  #customersBtn{order:2}
  #contractorsBtn{order:1}
}
@media(max-width:760px){
  #customersBtn{order:2}
  #contractorsBtn{order:1}
}

/* SURGICAL CHANGE 020 - FLIP NAV TABS UPSIDE DOWN ONLY.
   Desktop and mobile: tabs remain in their existing positions/order,
   but their tab geometry is inverted so the rounded edge faces outward. */
@media(min-width:761px){
  .main-nav .navbtn{
    border-radius:0 0 10px 10px !important;
    border-top:0 !important;
    border-bottom:1px solid #237fad !important;
  }
  .main-nav .navbtn::after{
    top:0 !important;
    bottom:auto !important;
    border-radius:0 0 3px 3px !important;
  }
}
@media(max-width:760px){
  .main-nav .navbtn{
    border-radius:10px 10px 0 0 !important;
    border-top:1px solid #237fad !important;
    border-bottom:0 !important;
  }
  .main-nav .navbtn::after{
    top:auto !important;
    bottom:0 !important;
    border-radius:3px 3px 0 0 !important;
  }
}

/* SURGICAL CHANGE 021 - REMOVE HEADER BOTTOM LINE / BLEND INTO BOARD.
   Only removes the visual divider between the header/navigation area and
   the board so the transition falls naturally into the columns. */
.hero{
  border-bottom:0 !important;
}
.main-nav{
  border-bottom:0 !important;
}

/* SURGICAL CHANGE 022 - INTEGRATED NAVIGATION BACKGROUND + TAB REDESIGN.
   Header artwork remains unchanged. Only the navigation zone and tab styling
   are redesigned to visually blend into the header. */

.main-nav{
  position:relative !important;
  width:100% !important;
  height:58px;
  min-height:58px;
  margin:0;
  padding:0 24px;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:10px;
  background:
    linear-gradient(to bottom,
      rgba(3,17,30,0.00) 0%,
      rgba(3,27,49,0.68) 34%,
      rgba(3,27,49,0.94) 72%,
      #031b31 100%);
  border:0 !important;
  box-shadow:none !important;
  z-index:30;
}

.main-nav .navbtn{
  position:relative;
  min-width:180px;
  height:46px;
  margin:0;
  padding:0 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  background:linear-gradient(180deg,rgba(12,66,100,.78),rgba(6,45,80,.98)) !important;
  color:#fff;
  border:0 !important;
  border-radius:0 0 12px 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 5px 12px rgba(0,0,0,.18) !important;

  font-size:14px;
  font-weight:800;
  letter-spacing:.2px;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.main-nav .navbtn:hover,
.main-nav .navbtn:focus-visible{
  background:linear-gradient(180deg,rgba(15,83,127,.90),rgba(8,57,94,1)) !important;
  transform:translateY(1px);
  outline:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 4px 10px rgba(0,0,0,.20) !important;
}

.main-nav .navbtn::after{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  top:0;
  bottom:auto;
  height:2px;
  background:linear-gradient(90deg,transparent,#1597e5,transparent);
  border-radius:0 0 2px 2px;
  opacity:.9;
}

.main-nav .nav-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  opacity:.95;
}

.main-nav .chev{
  margin-left:2px;
  opacity:.8;
}

.main-nav .menu{
  background:linear-gradient(180deg,#0a314d,#061f33) !important;
  border:1px solid rgba(35,127,173,.55) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.36) !important;
}

@media(max-width:760px){
  .main-nav{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    height:66px;
    min-height:66px;
    padding:0 10px calc(8px + env(safe-area-inset-bottom));
    align-items:flex-start;
    gap:8px;
    background:
      linear-gradient(to top,
        rgba(3,17,30,0.00) 0%,
        rgba(3,27,49,0.68) 30%,
        rgba(3,27,49,0.95) 72%,
        #031b31 100%);
    border:0 !important;
    box-shadow:none !important;
  }

  .main-nav .navbtn{
    min-width:0;
    flex:1;
    max-width:240px;
    height:48px;
    border-radius:12px 12px 0 0 !important;
    background:linear-gradient(0deg,rgba(12,66,100,.78),rgba(6,45,80,.98)) !important;
    box-shadow:
      inset 0 -1px 0 rgba(255,255,255,.08),
      0 -5px 12px rgba(0,0,0,.16) !important;
  }

  .main-nav .navbtn:hover,
  .main-nav .navbtn:focus-visible{
    transform:translateY(-1px);
    background:linear-gradient(0deg,rgba(15,83,127,.90),rgba(8,57,94,1)) !important;
  }

  .main-nav .navbtn::after{
    top:auto;
    bottom:0;
    border-radius:2px 2px 0 0;
  }

  .main-nav .menu{
    bottom:calc(66px + env(safe-area-inset-bottom)) !important;
  }
}

/* SURGICAL CHANGE 023 - NAVIGATION PLACEMENT ONLY.
   Desktop: compact centered dock straddling the seam between header and board.
   Mobile: remains fixed to the bottom. No header artwork or board redesign. */

@media(min-width:761px){
  .main-nav{
    position:relative !important;
    width:max-content !important;
    min-width:0 !important;
    height:48px !important;
    min-height:48px !important;
    margin:-16px auto 8px !important;
    padding:0 !important;
    display:flex !important;
    justify-content:center !important;
    align-items:flex-start !important;
    gap:4px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    z-index:40 !important;
  }

  .main-nav .navbtn{
    min-width:178px !important;
    height:44px !important;
    padding:0 20px !important;
    border:0 !important;
    border-radius:0 0 10px 10px !important;
    background:linear-gradient(180deg,#082b45 0%,#06243a 100%) !important;
    box-shadow:0 5px 12px rgba(0,0,0,.22) !important;
  }

  .main-nav .navbtn::after{
    top:0 !important;
    bottom:auto !important;
    left:18px !important;
    right:18px !important;
    height:2px !important;
  }

  .main-nav .menu{
    top:44px !important;
  }

  #customersMenu{left:calc(50% - 180px) !important;}
  #contractorsMenu{left:calc(50% + 2px) !important;}
}

@media(max-width:760px){
  .main-nav{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    margin:0 !important;
  }
}

/* SURGICAL CHANGE 024 - DESKTOP NAV LEFT ALIGNMENT + HIGHER CONTRAST.
   Header artwork and board remain unchanged. */

@media(min-width:761px){
  .main-nav{
    position:relative !important;
    width:100% !important;
    min-width:0 !important;
    height:52px !important;
    min-height:52px !important;
    margin:0 !important;
    padding:0 18px !important;
    display:flex !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;
    gap:6px !important;
    background:#031b31 !important;
    border:0 !important;
    box-shadow:none !important;
    z-index:40 !important;
  }

  .main-nav .navbtn{
    min-width:180px !important;
    height:46px !important;
    padding:0 22px !important;
    border:0 !important;
    border-radius:0 0 10px 10px !important;
    background:linear-gradient(180deg,#1597e5 0%,#0c78bd 100%) !important;
    color:#fff !important;
    box-shadow:0 5px 12px rgba(0,0,0,.22) !important;
  }

  .main-nav .navbtn:hover,
  .main-nav .navbtn:focus-visible{
    background:linear-gradient(180deg,#24a9f3 0%,#0b86cf 100%) !important;
  }

  .main-nav .navbtn::after{
    top:0 !important;
    bottom:auto !important;
    left:18px !important;
    right:18px !important;
    height:2px !important;
    background:rgba(255,255,255,.75) !important;
  }

  .main-nav .menu{
    top:46px !important;
  }

  #contractorsMenu{
    left:18px !important;
    right:auto !important;
  }

  #customersMenu{
    left:204px !important;
    right:auto !important;
  }
}

/* SURGICAL CHANGE 025 - COMPLETE NAVIGATION REDESIGN ONLY.
   Professional navigation redesign. Header artwork and board remain unchanged. */

/* ===== DESKTOP / TABLET NAVIGATION ===== */
@media (min-width:761px){
  .main-nav{
    position:relative !important;
    width:100% !important;
    height:64px !important;
    min-height:64px !important;
    margin:0 !important;
    padding:10px 18px 8px !important;
    display:flex !important;
    justify-content:flex-start !important;
    align-items:flex-end !important;
    gap:10px !important;
    background:linear-gradient(180deg, rgba(3,27,49,0.18) 0%, rgba(3,27,49,0.88) 58%, rgba(3,27,49,1) 100%) !important;
    border:0 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 4px 10px rgba(0,0,0,.08) !important;
    z-index:40 !important;
  }

  .main-nav .navbtn{
    position:relative !important;
    min-width:190px !important;
    height:44px !important;
    padding:0 18px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;

    border:1px solid rgba(93,188,245,.42) !important;
    border-radius:12px !important;
    background:linear-gradient(180deg, #0f5e96 0%, #0b4c7b 52%, #083d64 100%) !important;
    color:#f7fbff !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 6px 16px rgba(0,0,0,.22) !important;

    font-size:14px !important;
    font-weight:800 !important;
    letter-spacing:.2px !important;
    text-transform:none !important;
    transition:transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease !important;
  }

  .main-nav .navbtn:hover,
  .main-nav .navbtn:focus-visible{
    background:linear-gradient(180deg, #1777b4 0%, #105f95 52%, #0b4c78 100%) !important;
    border-color:rgba(126,213,255,.72) !important;
    transform:translateY(-1px) !important;
    outline:none !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      0 8px 18px rgba(0,0,0,.26) !important;
  }

  .main-nav .navbtn::before{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:11px;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
    pointer-events:none;
  }

  .main-nav .navbtn::after{
    content:"";
    position:absolute;
    left:16px;
    right:16px;
    bottom:6px;
    height:2px;
    background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.90) 50%, transparent 100%) !important;
    border-radius:99px !important;
    opacity:.72 !important;
  }

  .main-nav .nav-icon{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:22px !important;
    height:22px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.12) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14) !important;
    font-size:12px !important;
    line-height:1 !important;
  }

  .main-nav .chev{
    margin-left:2px !important;
    font-size:12px !important;
    opacity:.86 !important;
  }

  .main-nav .menu{
    position:absolute !important;
    top:54px !important;
    min-width:220px !important;
    padding:8px !important;
    border-radius:12px !important;
    background:linear-gradient(180deg, #0a314e 0%, #07253a 100%) !important;
    border:1px solid rgba(78,170,224,.38) !important;
    box-shadow:
      0 16px 34px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.05) !important;
    backdrop-filter:blur(6px);
  }

  .main-nav .menu button{
    width:100% !important;
    margin:0 !important;
    padding:12px 12px !important;
    border:0 !important;
    border-radius:8px !important;
    background:transparent !important;
    color:#eef8ff !important;
    font-size:14px !important;
    font-weight:700 !important;
    text-align:left !important;
  }

  .main-nav .menu button:hover,
  .main-nav .menu button:focus-visible{
    background:rgba(22,122,185,.22) !important;
    outline:none !important;
  }

  #contractorsMenu{
    left:18px !important;
    right:auto !important;
  }

  #customersMenu{
    left:218px !important;
    right:auto !important;
  }
}

/* ===== MOBILE STICKY NAVIGATION ===== */
@media (max-width:760px){
  .main-nav{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    height:78px !important;
    min-height:78px !important;
    margin:0 !important;
    padding:10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
    display:flex !important;
    justify-content:center !important;
    align-items:flex-start !important;
    gap:10px !important;

    background:
      linear-gradient(180deg,
        rgba(3,27,49,0) 0%,
        rgba(3,27,49,.78) 26%,
        rgba(3,27,49,.96) 58%,
        #031b31 100%) !important;
    border:0 !important;
    box-shadow:0 -8px 20px rgba(0,0,0,.22) !important;
    z-index:45 !important;
  }

  .main-nav .navbtn{
    position:relative !important;
    flex:1 !important;
    min-width:0 !important;
    max-width:250px !important;
    height:52px !important;
    padding:0 14px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;

    border:1px solid rgba(93,188,245,.42) !important;
    border-radius:14px 14px 0 0 !important;
    background:linear-gradient(180deg, #0f5e96 0%, #0b4c7b 52%, #083d64 100%) !important;
    color:#f7fbff !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 -6px 16px rgba(0,0,0,.18) !important;

    font-size:13px !important;
    font-weight:800 !important;
    letter-spacing:.15px !important;
  }

  .main-nav .navbtn:hover,
  .main-nav .navbtn:focus-visible{
    background:linear-gradient(180deg, #1777b4 0%, #105f95 52%, #0b4c78 100%) !important;
    border-color:rgba(126,213,255,.72) !important;
    outline:none !important;
  }

  .main-nav .navbtn::before{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:13px 13px 0 0;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
    pointer-events:none;
  }

  .main-nav .navbtn::after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    top:6px;
    height:2px;
    background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.90) 50%, transparent 100%) !important;
    border-radius:99px !important;
    opacity:.72 !important;
  }

  .main-nav .nav-icon{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:22px !important;
    height:22px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.12) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14) !important;
    font-size:12px !important;
    line-height:1 !important;
  }

  .main-nav .chev{
    margin-left:1px !important;
    font-size:11px !important;
    opacity:.86 !important;
  }

  .main-nav .menu{
    position:fixed !important;
    top:auto !important;
    bottom:calc(78px + env(safe-area-inset-bottom)) !important;
    min-width:220px !important;
    padding:8px !important;
    border-radius:12px 12px 0 0 !important;
    background:linear-gradient(180deg, #0a314e 0%, #07253a 100%) !important;
    border:1px solid rgba(78,170,224,.38) !important;
    box-shadow:
      0 -14px 30px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.05) !important;
  }

  .main-nav .menu button{
    width:100% !important;
    margin:0 !important;
    padding:12px 12px !important;
    border:0 !important;
    border-radius:8px !important;
    background:transparent !important;
    color:#eef8ff !important;
    font-size:14px !important;
    font-weight:700 !important;
    text-align:left !important;
  }

  .main-nav .menu button:hover,
  .main-nav .menu button:focus-visible{
    background:rgba(22,122,185,.22) !important;
    outline:none !important;
  }

  #contractorsMenu{
    left:10px !important;
    right:auto !important;
  }

  #customersMenu{
    right:10px !important;
    left:auto !important;
  }
}

/* SURGICAL CHANGE 026 - VENDORS NAVIGATION TAB ONLY. */
@media(min-width:761px){
  #vendorsMenu{
    left:418px !important;
    right:auto !important;
  }
}
@media(max-width:760px){
  .main-nav .navbtn{
    max-width:none !important;
  }
  #vendorsMenu{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%);
  }
}

/* SURGICAL CHANGE 027 - NAVIGATION ICON COLOR ONLY. */
.main-nav .nav-icon{
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.08) !important;
}

/* Contractors */
#contractorsBtn .nav-icon{
  color:#7dd3fc !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(125,211,252,.10) !important;
}

/* Customers */
#customersBtn .nav-icon{
  color:#86efac !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(134,239,172,.10) !important;
}

/* Vendors */
#vendorsBtn .nav-icon{
  color:#facc15 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(250,204,21,.10) !important;
}
/* FUNCTIONAL AUDIT 028 - interaction affordances only; no navigation/header redesign. */
.status-date-btn{display:block;width:100%;margin:2px 0 0;padding:0;border:0;background:transparent;color:#536575;font-size:9px;font-weight:800;cursor:pointer;text-align:center}
.status-date-btn:hover,.status-date-btn:focus-visible{color:#087dc3;text-decoration:underline;outline:none}
.approval-check{display:flex;align-items:center;gap:8px;margin-top:12px}.approval-check input{width:auto;margin:0}
.primary:disabled{opacity:.45;cursor:not-allowed}
.customer-item{text-align:left;cursor:pointer;background:#fff;color:#13222f}.customer-item strong,.customer-item span{display:block}.customer-item:hover,.customer-item:focus-visible{background:#f1f7fb;outline:2px solid rgba(8,125,195,.18);outline-offset:1px}
@media(max-width:760px){.status-date-btn{font-size:8px}}

/* SURGICAL CHANGE 030 - approved payment cleanup, professional icons, tighter board rows. */
.sc-icon,.head-icon,.menu-icon{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block;flex:0 0 auto}
.sc-icon{width:19px;height:19px}.head-icon{width:18px;height:18px}.menu-icon{width:18px;height:18px}
.main-nav .nav-icon{width:30px!important;height:30px!important;font-size:inherit!important}
.main-nav .navbtn{gap:9px!important}
.main-nav .menu button{display:flex!important;align-items:center!important;gap:10px!important}
.main-nav .menu button .menu-icon{color:#7dd3fc}
.th-label{display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;line-height:1.05}
.customer-head{color:#157a45}.payment-head,.final-head{color:#087dc3}.materials-head{color:#8a6410}.dumpster-head{color:#6b7280}.contractor-head{color:#0b6ea8}.status-head{color:#6d4bb8}
th{height:34px!important;padding:3px 5px!important;vertical-align:middle!important}
td{height:42px!important;padding:2px 4px!important;vertical-align:middle!important}
.dot{margin:0 auto}.marker-cell small,.status-cell small{margin-top:1px!important}
.status-date-btn{margin-top:1px!important;line-height:1.05!important}
.supplement-section{grid-column:1/-1;border:1px solid #d2dce3;border-radius:9px;padding:12px;background:#f7fafc}
.supplement-title{font-size:13px;font-weight:900;color:#06365a;margin-bottom:8px}.supplement-row{display:grid;grid-template-columns:150px 1fr 36px;gap:8px;align-items:center;margin:7px 0}.supplement-row input{width:100%;margin:0}.supp-remove{height:38px;border:1px solid #e0b4b4;border-radius:7px;background:#fff;color:#a41414;font-size:22px;cursor:pointer}.supplement-add{margin-top:7px!important}.supplement-total{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid #d2dce3;font-weight:800;color:#536575}.supplement-total strong{font-size:18px;color:#06365a}.supplement-empty{margin:5px 0}
@media(max-width:760px){.sc-icon{width:21px;height:21px}.head-icon{width:15px;height:15px}.menu-icon{width:20px;height:20px}.main-nav .nav-icon{width:32px!important;height:32px!important}.th-label{gap:3px;white-space:normal}.th-label span{font-size:8px}.head-icon{flex-basis:15px}th{height:31px!important;padding:2px!important}td{height:36px!important;padding:1px 2px!important}.supplement-row{grid-template-columns:105px 1fr 34px}}

/* SURGICAL CHANGE 031 - dropdown anchor correction only. */
@media(min-width:761px){
  #customersMenu{left:18px !important;right:auto !important;transform:none !important;}
  #contractorsMenu{left:218px !important;right:auto !important;transform:none !important;}
  #vendorsMenu{left:418px !important;right:auto !important;transform:none !important;}
}
@media(max-width:760px){
  #customersMenu{left:10px !important;right:auto !important;transform:none !important;}
  #contractorsMenu{left:50% !important;right:auto !important;transform:translateX(-50%) !important;}
  #vendorsMenu{left:auto !important;right:10px !important;transform:none !important;}
}

/* SURGICAL CHANGE 032 - board header emphasis only. Preserve 031 navigation anchors. */
.customer-head,.payment-head,.materials-head,.dumpster-head,.contractor-head,.status-head,.final-head{
  color:#1597e5 !important;
  font-weight:900 !important;
  text-shadow:0 0 4px rgba(21,151,229,.72),0 0 9px rgba(21,151,229,.32);
}
.customer-head .head-icon,.payment-head .head-icon,.materials-head .head-icon,.dumpster-head .head-icon,.contractor-head .head-icon,.status-head .head-icon,.final-head .head-icon{
  color:#fff !important;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.28));
}

/* BETA-02 APPROVED PROFESSIONAL BRAND PASS - visual-only navigation/board treatment. */
:root{--sc-navy:#031b31;--sc-navy2:#062d50;--sc-blue:#1597e5;--sc-blue-muted:#237fad;--sc-white:#fff;--sc-gray:#c7d2dc}
.main-nav .navbtn{
  background:var(--sc-navy2)!important;color:var(--sc-white)!important;
  border:1px solid var(--sc-blue-muted)!important;border-radius:2px!important;
  box-shadow:none!important;text-shadow:none!important;font-weight:800!important;
}
.main-nav .navbtn:hover,.main-nav .navbtn:focus-visible{background:#0a4266!important;border-color:var(--sc-blue)!important;box-shadow:none!important}
.main-nav .navbtn::before{display:none!important}.main-nav .navbtn::after{background:var(--sc-blue)!important;box-shadow:none!important;border-radius:0!important;height:2px!important}
.main-nav .nav-icon,#customersBtn .nav-icon,#contractorsBtn .nav-icon,#vendorsBtn .nav-icon{
  color:var(--sc-blue)!important;background:transparent!important;border:0!important;box-shadow:none!important;filter:none!important;border-radius:0!important
}
.main-nav .menu{border-radius:2px!important;box-shadow:0 10px 24px rgba(3,27,49,.22)!important}
.main-nav .menu button{border-radius:0!important}.main-nav .menu button .menu-icon{color:var(--sc-blue)!important;filter:none!important}
.customer-head,.payment-head,.materials-head,.dumpster-head,.contractor-head,.status-head,.final-head{
  color:var(--sc-blue)!important;font-weight:800!important;text-shadow:none!important;filter:none!important
}
.customer-head .head-icon,.payment-head .head-icon,.materials-head .head-icon,.dumpster-head .head-icon,.contractor-head .head-icon,.status-head .head-icon,.final-head .head-icon{
  color:var(--sc-blue)!important;filter:none!important
}
.primary,.secondary,.wide,.supp-remove{border-radius:2px!important;box-shadow:none!important;text-shadow:none!important}
.primary{background:var(--sc-navy2)!important;border-color:var(--sc-blue-muted)!important}.primary:hover,.primary:focus-visible{background:#0a4266!important;border-color:var(--sc-blue)!important}


/* BETA-03 - approved board refinements only. */
/* Crisp white column label text; StormCore-blue icons remain unchanged. */
.customer-head > span,.payment-head > span,.materials-head > span,.dumpster-head > span,.contractor-head > span,.status-head > span,.final-head > span{
  color:#fff!important;text-shadow:none!important;filter:none!important;
}
/* Compact row-number gutter instead of a full-width data column. */
#board .row-index-col{width:30px!important}
#board .row-index-head{width:30px!important;min-width:30px!important;padding:0!important}
#board td.row-index{width:30px!important;min-width:30px!important;padding:0 3px!important;font-size:11px!important;font-weight:700!important;color:#8fb2ca!important;background:#06243a!important;border-left:0!important;border-right:1px solid #315b75!important}
@media(max-width:760px){#board .row-index-col,#board .row-index-head,#board td.row-index{width:22px!important;min-width:22px!important}#board td.row-index{font-size:9px!important;padding:0 1px!important}}


/* BETA-05 - form organization and destructive-action safety */
.form-section-title{grid-column:1/-1;margin:10px 0 0;padding:10px 0 5px;border-top:1px solid rgba(21,151,229,.28);color:#fff;font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
.form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
button.danger{border:1px solid #a73b3b;background:#35191d;color:#fff;padding:10px 16px;font-weight:800;border-radius:4px;cursor:pointer}
button.danger:hover,button.danger:focus-visible{background:#4a2025;outline:none}

/* BETA-06 - quick customer board navigation */
.quick-customer-search{position:relative;display:flex;align-items:center;min-width:220px;max-width:320px;flex:1;margin-left:auto}
.quick-customer-search input,.mobile-quick-search-inner input{width:100%;height:40px;padding:0 12px 0 38px;border:1px solid #237fad;border-radius:3px;background:#061f35;color:#fff;font:inherit}
.quick-customer-search input::placeholder,.mobile-quick-search-inner input::placeholder{color:#9fb5c6}
.quick-search-icon{position:absolute;left:12px;width:17px;height:17px;fill:none;stroke:#1597e5;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.quick-search-results{position:absolute;z-index:1000;top:calc(100% + 5px);left:0;right:0;max-height:330px;overflow:auto;background:#061f35;border:1px solid #237fad;box-shadow:0 8px 20px rgba(0,0,0,.32)}
.quick-search-result{display:grid;width:100%;gap:2px;padding:10px 12px;text-align:left;border:0;border-bottom:1px solid rgba(143,178,202,.18);background:transparent;color:#fff;cursor:pointer}
.quick-search-result:hover,.quick-search-result:focus-visible{background:#0a3555;outline:none}
.quick-search-result strong{font-size:13px}.quick-search-result span,.quick-search-result small{color:#c7d2dc;font-size:11px}
.quick-search-empty{padding:12px;color:#c7d2dc;font-size:12px}
.mobile-search-btn,.mobile-quick-search-panel{display:none}
.customer-cell.customer-search-hit{animation:customerSearchHit 1.8s ease}
@keyframes customerSearchHit{0%,100%{box-shadow:none}20%,70%{box-shadow:inset 0 0 0 3px #1597e5;background:#0b3859}}
@media(max-width:760px){
  .desktop-quick-search{display:none}
  .mobile-search-btn{display:inline-flex}
  .mobile-quick-search-panel{position:sticky;top:0;z-index:900;padding:8px 10px;background:#031b31;border-bottom:1px solid #237fad}
  .mobile-quick-search-panel:not(.hidden){display:block}
  .mobile-quick-search-inner{position:relative;display:flex;align-items:center}
  .mobile-quick-search-inner .quick-search-results{top:calc(100% + 4px)}
}

/* BETA-08 - locked nav order/responsive search */
.main-nav #customersBtn{order:1}
.main-nav #customersMenu{order:1}
.main-nav #contractorsBtn{order:2}
.main-nav #contractorsMenu{order:2}
.main-nav #vendorsBtn{order:3}
.main-nav #vendorsMenu{order:3}
.main-nav .desktop-quick-search{order:4}
.main-nav #mobileQuickSearchBtn{order:4}

@media(min-width:761px){
  .main-nav .desktop-quick-search{display:flex}
  .main-nav #mobileQuickSearchBtn{display:none!important}
}
@media(max-width:760px){
  .main-nav .desktop-quick-search{display:none!important}
  .main-nav #mobileQuickSearchBtn{display:inline-flex}
}

/* BETA-09 - secure database authentication gate */
.auth-gate{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;background:#07111f;padding:24px}
.auth-gate.hidden{display:none}
.auth-card{width:min(420px,100%);background:#0d1a2b;border:1px solid #218bff;border-radius:12px;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.auth-card h1{margin:0;color:#fff;letter-spacing:.08em;text-align:center}
.auth-card p{margin:6px 0 22px;color:#b9c8da;text-align:center}
.auth-card input{display:block;width:100%;box-sizing:border-box;margin:10px 0;padding:13px 14px;border-radius:7px;border:1px solid #52657a;background:#fff;color:#101820;font-size:16px}
.auth-card button{width:100%;margin-top:10px;padding:12px 14px}
.auth-message{min-height:22px;margin-top:12px;color:#fff;text-align:center;font-size:14px}
.auth-card [hidden]{display:none!important}
.auth-card label{display:block;color:#dce8f5;font-size:14px;margin-top:12px}
.auth-card button:disabled{opacity:.55;cursor:wait}
.auth-card{max-height:calc(100vh - 48px);overflow-y:auto}
.auth-gate{grid-template-columns:minmax(320px,.95fr) minmax(480px,1.05fr);padding:0;background:#f4f6fa;overflow:auto}
.auth-brand{align-self:stretch;background:radial-gradient(ellipse at 0 100%,#153a66,transparent 65%),#0b182b;color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:space-between;min-height:100vh;box-sizing:border-box}
.auth-wordmark{font-size:26px;font-weight:800;letter-spacing:.14em}.auth-wordmark span{display:block;font-size:10px;letter-spacing:.3em;color:#8ea7c3;margin-top:10px}
.auth-brand-copy{margin:auto 0}.auth-eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;color:#547292}
.auth-brand .auth-eyebrow{color:#77b4ee}.auth-brand h2{font-size:clamp(34px,4vw,58px);line-height:1.12;letter-spacing:-.04em;margin:24px 0}
.auth-brand-copy p{max-width:340px;color:#aabed5;font-size:16px;line-height:1.7}.auth-brand-rule{width:48px;height:3px;background:#4697e9;margin:36px 0}.auth-brand-footer{color:#8ea7c3;font-size:12px}
.auth-panel{width:100%;display:grid;place-items:center;padding:42px 28px;box-sizing:border-box}.auth-card{width:min(440px,100%);max-height:none;overflow:visible;background:#fff;border:1px solid #dfe5ee;border-radius:18px;padding:38px;box-shadow:0 16px 48px #1634520d;box-sizing:border-box}
.auth-card h1{font-size:30px;letter-spacing:-.035em;line-height:1.2;color:#13253b;text-align:left;margin:14px 0 10px}.auth-card p{font-size:14px;line-height:1.6;color:#627387;text-align:left;margin:0 0 24px}
.auth-card label{color:#25374c;font-size:13px;font-weight:600;margin-top:18px}.auth-card input{border:1px solid #c4cfdd;border-radius:8px;padding:13px 14px;background:#fbfcfe;margin:8px 0;font-size:16px;min-height:48px}
.auth-card input:focus{outline:3px solid #2680d226;border-color:#2475c5}.auth-card button{border-radius:8px;min-height:46px;font-weight:600;font-size:14px;border:1px solid #1b66ac;background:#1b66ac;color:white;box-shadow:none}
.auth-card button.secondary{background:white;color:#28547d;border:1px solid #d7e1ec}.auth-card button:hover:enabled{filter:brightness(.95)}.auth-card button:focus-visible{outline:3px solid #82b9ee;outline-offset:3px}
.auth-card .auth-text-button{background:transparent;color:#42627f;border:0;min-height:28px;padding:4px 0;font-size:12px;font-weight:500;margin-top:5px;text-align:right}
.auth-card #stormcoreAuthSubmit{margin-top:22px}.auth-card #stormcoreRestartLogin{margin-top:18px;text-align:center;color:#64758a}
.auth-card .auth-message{color:#35516f;text-align:left;font-size:13px;line-height:1.6;min-height:0;margin-top:16px;overflow-wrap:anywhere}.auth-message:empty{display:none}
.auth-card .auth-message:not(:empty){background:#edf4fc;border:1px solid #d9e7f7;border-radius:8px;padding:12px}.auth-card .auth-message[data-kind="error"]{background:#fff1f0;border-color:#f0c6c3;color:#963f3a}
.auth-card .auth-field-hint{color:#67788c;font-size:12px;line-height:1.5}.auth-card .auth-footer-note{font-size:11px;color:#7a8999;text-align:center;margin:24px 0 0;padding-top:20px;border-top:1px solid #e8edf3}
.auth-mobile-brand{display:none}.auth-card[aria-busy="true"] #stormcoreAuthSubmit:before{content:'';display:inline-block;width:12px;height:12px;border:2px solid #ffffff60;border-top-color:#fff;border-radius:50%;margin-right:8px;vertical-align:-2px;animation:auth-spin .8s linear infinite}
@keyframes auth-spin{to{transform:rotate(360deg)}}
@media(max-width:800px){.auth-gate{grid-template-columns:1fr}.auth-brand{display:none}.auth-panel{min-height:100vh;padding:28px 18px}.auth-card{padding:30px 24px}.auth-mobile-brand{display:block;color:#18314e;font-size:20px;font-weight:800;letter-spacing:.12em;margin-bottom:28px}}
@media(prefers-reduced-motion:reduce){.auth-card[aria-busy="true"] #stormcoreAuthSubmit:before{animation:none}}
body.auth-locked{overflow:hidden}
html.auth-locked{overflow:hidden}

/* production-BETA-01: record forms, search and accessible status symbols */
#rows tr.customer-search-highlight>td{background:#fff6bc!important;box-shadow:inset 0 1px #e7c65f66,inset 0 -1px #e7c65f66}
#rows tr.customer-search-highlight select,#rows tr.customer-search-highlight .customer-expand{background:transparent!important}
.clear-search-highlight{border:0;background:#fff3b6;color:#635118;border-radius:6px;padding:5px 9px;font-size:11px;cursor:pointer;margin:4px 0}
.clear-search-highlight[hidden]{display:none}
.dot{display:inline-flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 25%,#ff8686,#d83242 72%);border-color:#a82435;box-shadow:inset 0 1px 2px #fff8,0 2px 4px #19354b26;padding:0}
.dot.green{background:radial-gradient(circle at 35% 25%,#67e6a2,#169855 72%);border-color:#087944}
.marker-symbol{width:64%;height:64%;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px #0002)}
.dot:focus-visible{outline:3px solid #468bf0;outline-offset:3px}
.record-form{padding-top:4px}.record-form h2{font-size:25px;letter-spacing:-.035em;padding-right:24px}
.record-form .formgrid{gap:18px 16px}.record-form label{position:relative;letter-spacing:.02em;font-size:12px;color:#48627b}
.record-form input,.record-form select{box-sizing:border-box;width:100%;min-height:45px;padding:11px 12px;border:1px solid #cbd8e5;border-radius:10px;background:#f6f9fd;color:#142a42;font-size:15px;margin-top:7px;box-shadow:inset 0 1px 2px #18395605}
.record-form input:focus,.record-form select:focus{outline:3px solid #2b98df22;border-color:#268dcc;background:#fff}
.record-form small,.form-hint{display:block;color:#718398;font-size:12px;font-weight:400;line-height:1.6;letter-spacing:0;margin:7px 0}
.record-form .form-section-title{grid-column:1/-1;border-top:1px solid #dde7ef;padding-top:18px;color:#2383b9;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.payment-preview{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;background:linear-gradient(120deg,#ecf6ff,#f3fbf9);border:1px solid #cde3f2;border-radius:12px;padding:16px;color:#58758c;font-size:12px}.payment-preview strong{display:block;color:#173e60;font-size:22px;margin-top:5px}
.record-form .form-actions{padding-top:18px;margin-top:20px;border-top:1px solid #dce6ef;justify-content:space-between;gap:16px}
.record-form .form-actions button{margin:0;min-height:44px;padding:12px 18px;border-radius:9px}.record-form .form-actions .danger{background:#fff3f3;color:#ae3445;border:1px solid #efc6ce}
.record-form .approval-check{margin-top:18px;display:flex;align-items:center;gap:10px}.record-form .approval-check input{width:18px;min-height:18px;margin:0}
.address-suggestions{position:absolute;top:100%;left:0;right:0;z-index:10;background:#fff;border:1px solid #c7dcec;border-radius:10px;box-shadow:0 12px 28px #15345224;overflow:hidden}
.address-suggestions[hidden]{display:none}.address-suggestions button{display:block;width:100%;border:0;background:white;text-align:left;padding:10px 12px;color:#183e5d;font-size:13px;cursor:pointer}.address-suggestions button:hover,.address-suggestions button:focus{background:#edf7ff}.address-suggestions small{margin:2px 0}
@media(max-width:420px){.payment-preview strong{font-size:18px}.record-form .form-actions button{width:100%}.record-form .form-actions .danger{order:2}}

.marker-payment-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0;padding:16px;border:1px solid #cddfec;border-radius:12px;background:#f1f7fc}
.marker-payment-summary span{display:block;font-size:12px;color:#587187;margin-bottom:6px}.marker-payment-summary strong{font-size:18px;color:#173f60;overflow-wrap:anywhere}
.marker-cost-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.marker-cost-fields input,#markerPaidAmount{box-sizing:border-box;padding:12px;border:1px solid #bdcedc;border-radius:8px}
.hover-info{max-width:min(340px,80vw);white-space:normal;width:max-content;text-align:left;line-height:1.6}
@media(max-width:420px){.marker-payment-summary{padding:12px;gap:8px}.marker-payment-summary strong{font-size:14px}.marker-cost-fields{grid-template-columns:1fr}}

.marker-floating-tooltip{position:fixed;z-index:1000;width:max-content;max-width:min(340px,calc(100vw - 32px));box-sizing:border-box;background:#071d2d;color:#fff;border:1px solid #3b8db8;border-radius:9px;padding:10px 12px;font-size:12px;font-weight:600;line-height:1.6;pointer-events:none;box-shadow:0 6px 20px #0003}.dot:hover .hover-info,.dot:focus .hover-info{opacity:0}

/* Compact job columns and subtle numbering within the customer cell. */
#board{min-width:960px}
#board col.customer{width:18%}
#board col.contractor{width:15%}
#board col.status{width:15%}
#board col.small{width:13%}
#board .customer-cell{position:relative;padding-left:24px}
#board .customer-row-number{position:absolute;left:5px;top:50%;transform:translateY(-50%);font-size:9px;font-weight:500;color:#748b9c;line-height:1;pointer-events:none;font-variant-numeric:tabular-nums}
#board .customer-select,#board .contractor-select{box-sizing:border-box;width:100%;min-width:0;max-width:100%;padding:9px 22px 9px 7px;font-family:inherit;font-size:13px;line-height:1.4;color:#17354b;background-color:#fff;letter-spacing:normal;text-transform:none;font-weight:600;text-overflow:ellipsis}
#board .contractor-select option,#board .customer-select option{color:#17354b;background:#fff;font:inherit}
#board .customer-expand{min-width:0;box-sizing:border-box;gap:3px}
#board .customer-expand span{min-width:0;flex:1}
#board .customer-expand b{flex-shrink:0}
@media(max-width:760px){
 #board{min-width:0}
 #board col.customer{width:20%}
 #board col.contractor{width:15%}
 #board col.status{width:15%}
 #board col.small{width:12.5%}
 #board .customer-cell{padding-left:17px}
 #board .customer-row-number{left:2px;font-size:8px}
 #board .contractor-select{font-size:10px;padding:7px 14px 7px 2px}
}
@media(max-width:420px){#board .contractor-select{font-size:9px}}

/* StormCore board controls, marker cards, scrollbar, and settings. */
:root{--sc-navy:#06243a;--sc-blue:#087dc3;--sc-teal:#157a75;--sc-gold:#cda448}
#board .customer-select,#board .contractor-select,#board .status-cell>select{box-sizing:border-box;width:100%;min-width:0;max-width:100%;padding:9px 22px 9px 7px;font:600 13px/1.4 system-ui,sans-serif;color:#17354b;background:#f8fbfd;border:1px solid #b7ccd9;border-radius:8px;text-overflow:ellipsis;letter-spacing:normal;box-shadow:0 1px 3px #06243a12}
#board .customer-select:focus,#board .contractor-select:focus,#board .status-cell>select:focus{outline:2px solid #087dc355;border-color:var(--sc-blue)}
#board .status-cell>select option{background:#fff;color:#17354b}
#board td.marker-cell{background:linear-gradient(180deg,#f8fbfe,#edf4f8);padding:9px 3px;vertical-align:middle}
#board .marker-balance{color:#294b62;font-size:10px;font-weight:600;line-height:1.3;margin-top:6px!important}
#board .marker-date{font-size:8px;font-weight:400;color:#758a98;line-height:1.3;margin-top:3px!important}
#board .dot{border-width:1px;box-shadow:inset 0 1px 2px #fff7,0 3px 6px #06243a22}
.board-wrap{scrollbar-color:var(--sc-blue) var(--sc-navy);scrollbar-width:auto}
.board-wrap::-webkit-scrollbar{width:12px;height:12px}.board-wrap::-webkit-scrollbar-track{background:var(--sc-navy);border-radius:8px}.board-wrap::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--sc-blue),var(--sc-teal));border:3px solid var(--sc-navy);border-radius:8px}.board-wrap::-webkit-scrollbar-thumb:hover{background:var(--sc-gold)}.board-wrap::-webkit-scrollbar-corner{background:var(--sc-navy)}
.main-nav .settings-btn{order:6;flex:0 0 auto;min-width:40px;padding:8px 12px;gap:7px}.settings-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}.settings-btn span{font-size:12px}
.settings-section{margin-top:22px;padding:18px;background:#f4f8fc;border:1px solid #d4e2ed;border-radius:12px}.settings-section h3{font-size:15px;color:#173f60;margin:0 0 12px}.settings-record-row{display:flex;align-items:center;gap:10px;padding:13px 0;border-top:1px solid #dce6ed}.settings-record-row>div{flex:1}.settings-record-row small{display:block;color:#758a99;font-size:11px;margin-top:5px}.settings-record-row button,.settings-upload{font:600 12px system-ui;border:1px solid #b6cfdf;color:#146291;background:white;border-radius:7px;padding:9px 12px;cursor:pointer}.settings-upload{position:relative;overflow:hidden;display:block}.settings-upload input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;margin:0;padding:0}.settings-upload:focus-within{outline:2px solid var(--sc-blue)}.account-details{display:grid;grid-template-columns:110px 1fr;gap:10px;font-size:12px;margin:0}.account-details dt{color:#668094}.account-details dd{margin:0;color:#193c55;overflow-wrap:anywhere}.import-preview{margin-top:14px;border:1px solid #bed7e8;border-radius:9px;padding:14px}.import-preview p,#importReview{font-size:12px;line-height:1.6;color:#254a64}.import-preview button{margin:6px 8px 0 0}
@media(max-width:760px){#board .customer-select{display:block}#board .customer-expand{display:none}#board .customer-select,#board .contractor-select,#board .status-cell>select{font-size:10px;padding:7px 14px 7px 2px}#board .marker-balance{font-size:8px}.main-nav .settings-btn{padding:7px;min-width:32px}.settings-btn span{display:none}}
@media(max-width:420px){#board .customer-select,#board .contractor-select,#board .status-cell>select{font-size:9px}.settings-section{padding:12px}.settings-record-row{gap:7px}.settings-record-row button,.settings-upload{padding:8px}.account-details{grid-template-columns:90px 1fr}}

@media(max-width:760px){#board .customer-expand{display:flex;position:absolute;right:3px;top:50%;transform:translateY(-50%);width:16px;padding:0;justify-content:center}#board .customer-expand span{display:none}#board .customer-select{width:calc(100% - 18px)}}

/* FINAL BUILD - job completion, phase assignments, and responsive customer expansion */
#board tr.job-complete > .customer-cell {background:rgba(38,174,83,.105)!important}
.assignment-grid,.earnings-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0}
.assignment-grid label,.earnings-list label {display:flex;flex-direction:column;gap:4px;min-width:0}
.assignment-grid select,.earnings-list input {max-width:100%;min-width:0}
.verification-list {display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}
.job-contractors {margin-top:16px;border-top:1px solid #526172;padding-top:12px}
.contractor-earnings {margin-top:16px}.contractor-earnings p {display:flex;justify-content:space-between;gap:12px}
@media(max-width:700px){
 #board .customer-expand {border:0;background:transparent;color:var(--sc-work-text);font-family:inherit}
  #board,#board tbody,#board tr {display:block;width:100%;min-width:0}
  #board thead,#board colgroup {display:none!important}
  #board tbody tr:not(.detail-row) {margin:0 0 8px;border:1px solid #526172;border-radius:8px;overflow:hidden}
  #board tbody tr:not(.detail-row)>td {display:none!important}
  #board tbody tr:not(.detail-row)>td.customer-cell {display:flex!important;width:100%;align-items:center;min-height:52px;box-sizing:border-box}
  #board .customer-expand {display:flex!important;align-items:center;justify-content:space-between;flex:1;min-width:0;min-height:44px}
  #board .customer-select {display:none!important}
  #board .detail-row:not(.hidden) {display:block!important;margin-bottom:10px}
  #board .detail-row:not(.hidden)>td {display:block!important;width:100%;box-sizing:border-box}
  .assignment-grid,.earnings-list {grid-template-columns:1fr}
}
.marker-floating-tooltip {max-width:calc(100vw - 16px);white-space:normal;overflow-wrap:normal;word-break:normal}

/* Office navigation: quiet surfaces and consistent controls. */
.main-nav {background:#eef2f5!important;border:0!important;border-bottom:1px solid #c8d3dc!important;box-shadow:none!important}
.main-nav .navbtn,.main-nav #settingsBtn,.main-nav #workflowFocusToggle {background:#f9fbfc!important;color:#243e53!important;border:1px solid #c5d1da!important;border-radius:5px!important;box-shadow:none!important;text-shadow:none!important;font-weight:600!important;letter-spacing:normal!important}
.main-nav .navbtn::before,.main-nav .navbtn::after {display:none!important}
.main-nav .navbtn:hover,.main-nav .navbtn:focus-visible {background:#e0eaf2!important;color:#143c5b!important;border-color:#849fb3!important;box-shadow:none!important}
.main-nav .navbtn:focus-visible {outline:2px solid #537e9e!important;outline-offset:2px}
.main-nav .nav-icon,#customersBtn .nav-icon,#contractorsBtn .nav-icon,#vendorsBtn .nav-icon {color:#4e718a!important;background:transparent!important;border:0!important;box-shadow:none!important;filter:none!important}
.main-nav .navbtn>svg {stroke:#4e718a}
.main-nav .chev {color:#6b8090!important}
.main-nav .quick-customer-search input,.mobile-quick-search-inner input {background:#fff;color:#243e53;border-color:#c5d1da;box-shadow:none}
.main-nav .quick-customer-search input::placeholder,.mobile-quick-search-inner input::placeholder {color:#647b8d}
.main-nav .quick-search-icon,.mobile-quick-search-inner .quick-search-icon {stroke:#4e718a}
.main-nav .menu,.quick-search-results {background:#fff!important;color:#243e53;border:1px solid #c5d1da!important;border-radius:6px!important;box-shadow:0 6px 16px #20394d1c!important}
.main-nav .menu button {color:#243e53!important;font-weight:500;box-shadow:none!important;text-shadow:none!important}
.main-nav .menu button .menu-icon {color:#4e718a!important;stroke:#4e718a!important;filter:none!important}
.main-nav .menu button:hover,.main-nav .menu button:focus-visible,.quick-search-result:hover,.quick-search-result:focus-visible {background:#e8eff5!important}
.quick-search-result {color:#243e53;border-bottom-color:#e0e7ed}
.quick-search-result span,.quick-search-result small,.quick-search-empty {color:#647b8d}
.mobile-quick-search-panel {background:#eef2f5;border-color:#c5d1da}
/* Desktop scrollbars stay quiet; touch devices retain native controls. */
/* BETA-23: transparent approved swirl and quiet office artwork. */
:root {--sc-row-white:#fff;--sc-row-baby-blue:#f3f5f7;--sc-work-white:#fff;--sc-work-blue:#f7f9fb;--sc-work-slate:#f3f5f7;--sc-work-border:#c8d3dc;--sc-work-text:#243e53;--sc-work-muted:#647b8d;--sc-work-accent:#4e718a}
body {background:#f3f5f7;color:#243e53}
.board-wrap {border-color:#c8d3dc;box-shadow:0 1px 3px #243e5308}
#board .board-heading>div {background:#eaf0f4!important;border-color:#c8d3dc;color:#243e53}
#board .th-label,#board .th-label>span {color:#243e53!important}
#board .th-label .head-icon {color:#648399!important;filter:none!important}
.pagebar {background:#f9fbfc;border-color:#c8d3dc;color:#526b7f;font-weight:500}
.board-page-controls button {background:#fff;border-color:#c5d1da;color:#243e53;font-weight:500}
#board .detail-panel {background:#f7f9fb}
#board .detail-grid>div {background:#fff}
.card {background:#fff}
.card .settings-section,.card .supplement-section,.card .marker-payment-summary {background:#f7f9fb;border-color:#d8e0e6}
.card .primary {background:#375e79!important;border-color:#375e79!important}
.card .primary:hover,.card .primary:focus-visible {background:#294c65!important}
.card .secondary {background:#eef2f5;border-color:#c5d1da;color:#243e53}
.hero {isolation:isolate}
.hero::after {content:'';position:absolute;inset:0 0 0 40%;z-index:-1;background:url('header-office-art.svg') right center / auto 100% no-repeat;opacity:.65;pointer-events:none}
.approved-swirl {object-fit:contain;background:transparent;border:0;border-radius:0;box-shadow:none}
@media(max-width:760px){.hero::after {left:65%;opacity:.35}}
/* BETA-22: retain all seven working columns on tablets. */
@media(min-width:701px) and (max-width:1100px){
 #board .board-heading,#board .job-row {grid-template-columns:minmax(0,1.8fr) repeat(3,minmax(0,.75fr)) minmax(0,1.5fr) minmax(0,1.4fr) minmax(0,.85fr)}
 #board .job-row>div {padding-left:3px;padding-right:3px}
 #board .job-row>.customer-cell {padding-left:18px}
 #board .job-row>.customer-cell>.record-picker {display:block}
 #board .job-row .customer-expand {display:none!important}
 #board .record-name {font-size:clamp(11px,1.3vw,14px);gap:3px;padding-left:1px;padding-right:1px}
 #board .record-chevron {width:10px;height:10px}
 #board .th-label {font-size:clamp(9px,1.15vw,12px)!important;gap:3px!important}
 #board .th-label .head-icon {width:11px!important;height:11px!important;min-width:11px!important}
 #board .customer-required {font-size:9px!important}
 #board .marker-cell small {font-size:8px;line-height:11px}
 #board .marker-cell .marker-date {font-size:8px}
 #board .record-picker-edit select:not([hidden]) {font-size:12px!important;padding:4px 1px!important}
 #board .detail-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 .main-nav .navbtn {flex:0 1 auto!important;width:auto!important;padding:0 10px!important;font-size:13px!important;gap:5px!important}
 .main-nav .desktop-quick-search {flex:1;max-width:none}
}
/* BETA-20: one control style throughout navigation and search. */
/* BETA-21: compact approved brand, with the work board taking priority. */
.hero {height:64px!important;min-height:64px!important;max-height:64px!important;padding:0!important;background:#f9fbfc!important;border-bottom:1px solid #d8e0e6!important}
.hero .approved-header {display:flex;align-items:center;gap:11px;height:64px!important;min-height:0!important;max-height:64px!important;width:100%;padding:10px 18px;background:none!important}
.approved-swirl {display:block;width:40px;height:40px;flex:none}
.compact-brand {min-width:0;color:#243e53}
.compact-brand>span {display:block;font:600 11px/1.3 system-ui,sans-serif;color:#647b8d;letter-spacing:.04em}
.compact-brand h1 {margin:2px 0 0;font:600 17px/1.3 system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-wrap {max-height:calc(100dvh - 190px)}
@media(max-width:700px){.board-wrap {max-height:none}}
@media(max-width:760px){
 .hero {height:56px!important;min-height:56px!important;max-height:56px!important}
 .hero .approved-header {height:56px!important;max-height:56px!important;padding:8px 12px;gap:9px}
 .approved-swirl {width:34px;height:34px}
 .compact-brand h1 {font-size:16px}
}
.main-nav .navbtn {min-height:44px!important;height:44px!important}
.main-nav #settingsBtn,.main-nav #workflowFocusToggle {height:44px!important}
.main-nav .quick-customer-search {align-items:center;gap:6px}
.main-nav .quick-customer-search input,.mobile-quick-search-inner input {height:44px;min-height:44px;border-radius:5px;padding-right:12px;font:400 14px/1.4 system-ui,sans-serif}
.main-nav .quick-customer-search input:hover,.mobile-quick-search-inner input:hover {border-color:#849fb3}
.main-nav .quick-customer-search input:focus,.mobile-quick-search-inner input:focus {outline:2px solid #537e9e;outline-offset:2px;border-color:#849fb3;box-shadow:none}
.main-nav .quick-search-icon {left:12px;width:17px;height:17px}
.main-nav .clear-search-highlight {margin:0;min-height:36px;border:1px solid #c5d1da;border-radius:5px;background:#e8eff5;color:#243e53;font:500 11px/1.3 system-ui,sans-serif;padding:6px 8px}
.main-nav .menu {padding:6px!important}
.main-nav .menu button {min-height:42px;border-radius:4px!important;font:500 13px/1.4 system-ui,sans-serif;letter-spacing:normal!important}
.main-nav .menu button:focus-visible {outline:2px solid #537e9e;outline-offset:-2px}
.quick-search-result {padding:12px;font:400 13px/1.4 system-ui,sans-serif}
.quick-search-result strong {font-weight:600}
.card .record-search-field {background:#fff;border-color:#c5d1da;border-radius:5px}
.record-search-field:focus-within {outline-color:#537e9e}
.record-search-field>svg {stroke:#4e718a}
.card .record-search .search-record {background:#f9fbfc;border-color:#c5d1da;border-radius:5px}
.record-search .search-record strong {font-weight:600}
.record-search .search-record svg {stroke:#4e718a}
.card .record-search .search-record:hover,.card .record-search .search-record:focus-visible {background:#e8eff5;border-color:#849fb3;outline-color:#537e9e}
@media(min-width:761px) and (hover:hover) and (pointer:fine){
 html,.board-wrap,.card,.customer-list,.quick-search-results {scrollbar-width:thin;scrollbar-color:#8a9ca9 #edf1f4}
 html::-webkit-scrollbar,.board-wrap::-webkit-scrollbar,.card::-webkit-scrollbar,.customer-list::-webkit-scrollbar,.quick-search-results::-webkit-scrollbar {width:8px;height:8px}
 html::-webkit-scrollbar-track,.board-wrap::-webkit-scrollbar-track,.card::-webkit-scrollbar-track,.customer-list::-webkit-scrollbar-track,.quick-search-results::-webkit-scrollbar-track {background:#edf1f4}
 html::-webkit-scrollbar-thumb,.board-wrap::-webkit-scrollbar-thumb,.card::-webkit-scrollbar-thumb,.customer-list::-webkit-scrollbar-thumb,.quick-search-results::-webkit-scrollbar-thumb {background:#8a9ca9;border:2px solid #edf1f4;border-radius:8px}
 html::-webkit-scrollbar-thumb:hover,.board-wrap::-webkit-scrollbar-thumb:hover,.card::-webkit-scrollbar-thumb:hover,.customer-list::-webkit-scrollbar-thumb:hover,.quick-search-results::-webkit-scrollbar-thumb:hover {background:#637b8c}
}
.mobile-job-controls {display:none}
@media(max-width:700px){
 #board .customer-expand {position:static!important;transform:none!important;width:auto!important;padding:8px!important}
 #board .customer-expand span {display:block!important}
 .mobile-job-controls {display:grid;gap:12px;margin:14px 0}
 .mobile-job-controls label {display:grid;gap:5px}
 .mobile-job-controls select {display:block!important;width:100%!important;font-size:16px!important}
 .mobile-markers {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .mobile-markers button {min-height:44px}
}

/* WORKFLOW FOCUS MODE - hides surrounding page chrome, preserves board and dialogs. */
.workflow-view-toolbar{display:flex;justify-content:flex-end;padding:8px 12px 4px}
#workflowFocusToggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid #3588b7;border-radius:6px;background:#092f49;color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
#workflowFocusToggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#workflowFocusToggle:focus-visible{outline:3px solid #7dd3fc;outline-offset:2px}
body.workflow-focus-mode > .hero,body.workflow-focus-mode > .main-nav,body.workflow-focus-mode > #mobileQuickSearchPanel{display:none!important}
body.workflow-focus-mode main{width:100%;max-width:none;margin:0;padding:0;min-height:100dvh;display:flex;flex-direction:column}
body.workflow-focus-mode .workflow-view-toolbar{flex:0 0 auto;padding:8px 12px}
body.workflow-focus-mode .board-wrap{flex:1 1 auto;width:100%;max-width:none;margin:0;overflow:auto}
body.workflow-focus-mode .pagebar{display:none!important}
@media(max-width:760px){.workflow-view-toolbar{padding:6px 8px}#workflowFocusToggle{font-size:12px;padding:8px 10px}}

/* ============================================================
   PRODUCTION BOARD - CANONICAL RESPONSIVE CSS GRID
   Desktop: seven columns. Phone: expandable customer-name list.
   The approved header is intentionally unaffected.
   ============================================================ */
#board {display:block;min-width:0;width:100%;}
#board .board-heading,#board .job-row {display:grid;grid-template-columns:minmax(180px,1.7fr) repeat(3,minmax(90px,.8fr)) minmax(145px,1.3fr) minmax(145px,1.3fr) minmax(90px,.8fr);align-items:stretch;width:100%;box-sizing:border-box;}
#board .board-heading>div {min-width:0;padding:10px 5px;text-align:center;}
#board .job-row>div {min-width:0;box-sizing:border-box;padding:8px 5px;border-bottom:1px solid #c8d8e4;}
#board .job-row>.customer-cell {padding-left:24px;}
#board .detail-row {display:block;grid-column:1/-1;width:100%;}
#board .detail-row.hidden {display:none!important;}
#board .detail-row>.detail-panel {box-sizing:border-box;width:100%;}
#board .job-row.job-complete>.customer-cell {background:rgba(38,174,83,.105)!important;}
#board .job-row .customer-expand {display:none;}
@media(max-width:700px){
 #board .board-heading {display:none!important;}
 #board .job-row {display:block!important;width:100%;min-width:0;margin:0 0 8px;border:1px solid #526172;border-radius:8px;overflow:hidden;}
 #board .job-row>div {display:none!important;}
 #board .job-row>.customer-cell {display:flex!important;align-items:center;min-height:52px;width:100%;padding:4px 10px;}
 #board .job-row .customer-expand {display:flex!important;position:static!important;transform:none!important;width:100%!important;min-height:44px;padding:8px!important;align-items:center;justify-content:space-between;}
 #board .job-row .customer-expand span {display:block!important;}
 #board .job-row .customer-select {display:none!important;}
 #board .detail-row:not(.hidden) {display:block!important;margin-bottom:10px;}
 #board .detail-row>.detail-panel {display:block!important;width:100%;}
}

/* BETA-05: lighter working surfaces and sharp status markers.
   Approved header, navigation, column order and data behavior are preserved. */
#board .job-row>div {background:var(--sc-work-slate);color:var(--sc-work-text);border-color:var(--sc-work-border)}
#board .detail-panel,.card {background:var(--sc-work-blue);color:var(--sc-work-text)}
#board .detail-grid>div,.card .customer-item {background:var(--sc-work-white);color:var(--sc-work-text);border-color:var(--sc-work-border)}
#board .detail-panel label,#board .detail-panel h3,.card label,.card .form-section-title {color:var(--sc-work-text)}
#board .detail-grid b,.card .muted,.card small,.card .form-hint,.card .account-details dt,.card .settings-record-row small {color:var(--sc-work-muted)}
#board .detail-panel input,#board .detail-panel select,.card input,.card select,.card textarea {background:var(--sc-work-white);color:var(--sc-work-text);border-color:var(--sc-work-border)}
#board .detail-panel input::placeholder,.card input::placeholder,.card textarea::placeholder {color:var(--sc-work-muted);opacity:1}
#board .customer-expand {color:var(--sc-work-text)}
#board .customer-expand b {color:var(--sc-work-accent)}
#board .job-contractors {border-color:var(--sc-work-border)}
.card .close {color:var(--sc-work-text)}
.card .secondary {background:#e0edf6;color:var(--sc-work-text);border-color:var(--sc-work-border)}
.card .primary {background:var(--sc-work-accent);color:#fff}
.card .settings-section,.card .marker-payment-summary,.card .supplement-section {background:var(--sc-work-slate);border-color:var(--sc-work-border)}
#board .marker-cell {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:104px;padding:12px 8px}
#board .marker-cell .dot {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;width:30px;height:30px;flex:none;border:1px solid #8f1828;background:radial-gradient(circle at 32% 24%,#ffb3b3 0%,#f15b65 18%,#d5263b 52%,#961426 100%);box-shadow:inset 0 2px 0 #ffffff80,inset 0 -3px 0 #00000030,0 2px 0 #68111d;filter:none}
#board .marker-cell .dot.green {border-color:#086136;background:radial-gradient(circle at 32% 24%,#b4f5d0 0%,#51cd8d 18%,#169855 52%,#096839 100%);box-shadow:inset 0 2px 0 #ffffff80,inset 0 -3px 0 #00000030,0 2px 0 #064b29}
#board .marker-symbol {width:18px;height:18px;filter:none}
#board .marker-cell small {position:absolute;left:4px;right:4px;top:calc(50% + 20px);margin:0!important;text-align:center;color:var(--sc-work-muted);font-size:10px;line-height:1.35}
#board .marker-cell .marker-date {top:calc(50% + 35px);font-size:9px}
#board .marker-cell:has(.marker-date) {min-height:104px}
#board .status-date-btn {color:var(--sc-work-muted);font-size:11px}
.mobile-markers button {display:flex;align-items:center;justify-content:center;gap:8px;background:var(--sc-work-white);color:var(--sc-work-text);border:1px solid var(--sc-work-border);border-radius:6px;font-weight:700;padding:8px}
.mobile-markers button::before {content:'';width:18px;height:18px;flex:none;border-radius:50%;border:1px solid #8f1828;background:radial-gradient(circle at 32% 24%,#ffb3b3,#d5263b 52%,#961426);box-shadow:inset 0 1px 0 #ffffff80,0 1px 0 #68111d}
.mobile-markers button[data-complete="true"]::before {border-color:#086136;background:radial-gradient(circle at 32% 24%,#b4f5d0,#169855 52%,#096839);box-shadow:inset 0 1px 0 #ffffff80,0 1px 0 #064b29}
@media(max-width:700px){
 #board .detail-grid b {font-size:11px}
 #board .detail-grid span {font-size:13px;color:var(--sc-work-text)}
 #board .detail-panel label {font-size:14px}
 #board .detail-panel input,#board .detail-panel select,.card input,.card select,.card textarea {font-size:16px}
 .card .marker-cost-fields {grid-template-columns:1fr}
 .card .settings-record-row {flex-wrap:wrap}
 .card .settings-record-row>div {flex-basis:100%}
}

/* BETA-06: near-white baby blue cells, StormCore navy borders, even spacing.
   Column header backgrounds remain unchanged. */
#board .job-row>div {min-height:104px;padding:12px 8px;border-right:1px solid var(--sc-work-border);border-bottom:1px solid var(--sc-work-border)}
#board .job-row>div:last-child {border-right:0}
#board .job-row>.customer-cell {display:flex;align-items:center;padding-left:26px}
#board .job-row>.contractor-cell {display:flex;align-items:center}
#board .job-row>.status-cell {display:flex;flex-direction:column;justify-content:center;gap:6px}
#board .customer-select,#board .contractor-select,#board .status-cell>select {margin:0;min-height:40px;border-color:var(--sc-work-border);background:var(--sc-work-white)}
#board .detail-panel {padding:16px;border-bottom:1px solid var(--sc-work-border)}
#board .detail-grid {gap:10px}
#board .detail-grid>div {padding:12px;border-color:var(--sc-work-border)}
#board .detail-grid b {margin-bottom:5px}
#board .detail-panel input,#board .detail-panel select {margin:0;width:100%;min-height:40px}
#board .verification-list input[type="checkbox"] {width:18px;min-height:18px;margin:0}
#board .verification-list label {display:flex;align-items:center;gap:6px}
#board .job-row.job-complete>.customer-cell {background:var(--sc-work-blue)!important}
@media(max-width:700px){
 #board .job-row {border-color:var(--sc-work-border)}
 #board .job-row>.customer-cell {min-height:52px;padding:4px 10px 4px 26px;border-right:0}
 #board .detail-panel {padding:12px}
 #board .detail-grid {gap:8px}
 #board .detail-grid>div {padding:10px}
}
/* BETA-07: header workflow toggle and tighter header-to-board spacing. */
.hero>.workflow-view-toolbar {position:absolute;right:12px;bottom:6px;padding:0;z-index:5;margin:0}
main {padding:4px 10px 10px}
.main-nav {margin-top:0!important;margin-bottom:0!important}
@media(min-width:761px){.main-nav {height:52px;min-height:52px}}
@media(max-width:760px){
 .hero>.workflow-view-toolbar {right:8px;bottom:4px;padding:0}
 main {padding:4px 8px 8px}
 .hero #workflowFocusToggle {padding:6px 10px;font-size:12px;min-height:44px}
}
body.workflow-focus-mode main>.workflow-view-toolbar {position:static;flex:0 0 auto;padding:6px 10px;margin:0}

/* BETA-08: adjacent Settings and workflow icon controls. */
.main-nav>.workflow-view-toolbar {order:7;display:flex;align-items:center;position:static;flex:0 0 auto;padding:0;margin:0;align-self:stretch}
.main-nav #settingsBtn,.main-nav #workflowFocusToggle {display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 44px!important;width:44px!important;min-width:44px!important;max-width:44px!important;padding:0!important;gap:0!important}
#settingsBtn>span,#workflowFocusToggle>span {display:none!important}
#settingsBtn svg,#workflowFocusToggle svg {width:20px;height:20px;flex:none}
body.workflow-focus-mode #workflowFocusToggle {width:44px;min-width:44px;min-height:44px;padding:0;justify-content:center}

/* BETA-09: compact rows, almost-white baby blue, viewport-filling workflow. */
:root {--sc-work-white:#f4faff;--sc-work-blue:#f4faff;--sc-work-slate:#f4faff}
#board .job-row>div {min-height:70px;padding:5px 7px;background:var(--sc-work-blue)}
#board .job-row>.customer-cell {padding-left:26px}
#board .marker-cell,#board .marker-cell:has(.marker-date) {min-height:70px}
#board .marker-cell .dot {top:21px;width:26px;height:26px}
#board .marker-cell small {top:39px;font-size:10px}
#board .marker-cell .marker-date {top:53px;font-size:9px}
#board .job-row>.status-cell {gap:3px}
#board .customer-select,#board .contractor-select,#board .status-cell>select {min-height:36px;padding-top:6px;padding-bottom:6px;background:var(--sc-work-blue)}
.record-picker {display:block;width:100%;min-width:0}
.record-name {display:block;width:100%;min-height:36px;padding:5px 3px;border:0;background:transparent;color:var(--sc-work-text);font:600 13px/1.4 system-ui,sans-serif;text-align:left;overflow-wrap:anywhere;cursor:pointer}
.record-name:focus-visible {outline:2px solid var(--sc-work-accent);outline-offset:1px}
.record-picker select[hidden],.record-picker button[hidden] {display:none!important}
.record-picker-edit select:not([hidden]) {display:block!important;width:100%!important}
body.workflow-focus-mode {margin:0!important;padding:0!important;overflow:hidden}
body.workflow-focus-mode main {position:fixed;inset:0;width:100vw!important;width:100dvw!important;height:100vh;height:100dvh;min-height:0!important;max-width:none!important;padding:0!important;margin:0!important;overflow:hidden;z-index:40;display:flex;flex-direction:column;background:var(--sc-work-blue)}
body.workflow-focus-mode main>.workflow-view-toolbar {padding:2px 8px;flex:0 0 48px;justify-content:flex-end}
body.workflow-focus-mode .board-wrap {flex:1 1 0;min-height:0!important;max-height:none!important;height:auto!important;width:100%!important;overflow:auto!important;margin:0;border-radius:0}
body.workflow-focus-mode #board {width:100%;min-height:100%}
@media(max-width:700px){
 #board .job-row>.customer-cell {min-height:48px;padding:2px 10px 2px 26px}
 #board .job-row>.customer-cell>.record-picker {display:none}
 .record-name {min-height:44px;font-size:16px}
 .record-picker-edit select:not([hidden]) {font-size:16px!important}
 body.workflow-focus-mode .board-wrap {padding-bottom:env(safe-area-inset-bottom)}
}

/* BETA-10: customer prerequisite labels and 100-row board pages. */
.customer-required {font-size:11px;font-weight:800;color:var(--sc-work-muted);line-height:1.4}
#board .job-row select[hidden],#board .detail-panel select[hidden] {display:none!important}
.board-page-controls {display:flex;align-items:center;gap:12px}
.board-page-controls button {min-height:36px;padding:6px 12px;border:1px solid #3588b7;border-radius:5px;background:#092f49;color:#fff;cursor:pointer;font-weight:700}
.board-page-controls button:disabled {opacity:.45;cursor:default}
body.workflow-focus-mode .pagebar {display:flex!important;flex:0 0 auto}
@media(max-width:420px){.pagebar {gap:8px;font-size:11px;padding:8px}.board-page-controls {gap:6px}.board-page-controls button {padding:6px 8px}}

/* BETA-11: polished 3-D status markers and tighter main rows. */
#board .job-row>div,#board .marker-cell {min-height:54px;padding-top:3px;padding-bottom:3px}
#board .marker-cell:has(.marker-date) {min-height:60px}
#board .marker-cell .dot {top:18px;width:24px;height:24px;border:1px solid #851325;background:radial-gradient(ellipse at 33% 19%,#fff5f5 0%,#ffa5ae 9%,#f44357 27%,#d91d37 57%,#8d1028 88%,#57091b 100%);box-shadow:inset 0 1px 0 #fff,inset 1px 0 1px #ffffff75,inset 0 -3px 2px #39000a80,0 2px 0 #711025,0 3px 2px #06243a35;isolation:isolate}
#board .marker-cell .dot.green {border-color:#075732;background:radial-gradient(ellipse at 33% 19%,#f0fff6 0%,#91eabc 9%,#34c579 27%,#13934d 57%,#086337 88%,#033c23 100%);box-shadow:inset 0 1px 0 #fff,inset 1px 0 1px #ffffff75,inset 0 -3px 2px #002c1780,0 2px 0 #054c2b,0 3px 2px #06243a35}
#board .marker-cell .dot::before {content:'';position:absolute;left:4px;right:4px;top:2px;height:7px;border-radius:50%;background:linear-gradient(#ffffffcc,#ffffff08);pointer-events:none;z-index:0}
#board .marker-cell .dot::after {content:'';position:absolute;inset:-10px;background:transparent;border-radius:50%}
#board .marker-symbol {position:relative;z-index:1;width:15px;height:15px;stroke-width:3;filter:none}
#board .marker-cell small {top:34px;font-size:10px;line-height:12px}
#board .marker-cell .marker-date {top:47px;font-size:9px;line-height:11px}
#board .job-row>.status-cell {gap:2px}
#board .customer-select,#board .contractor-select,#board .status-cell>select {min-height:32px;padding-top:4px;padding-bottom:4px}
#board .job-row .record-name {min-height:32px;padding-top:3px;padding-bottom:3px}
.mobile-markers button::before {background:radial-gradient(ellipse at 33% 19%,#fff5f5,#ffa5ae 9%,#f44357 27%,#d91d37 57%,#8d1028 88%,#57091b);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 1px #39000a80,0 2px 0 #711025}
.mobile-markers button[data-complete="true"]::before {background:radial-gradient(ellipse at 33% 19%,#f0fff6,#91eabc 9%,#34c579 27%,#13934d 57%,#086337 88%,#033c23);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 1px #002c1780,0 2px 0 #054c2b}
@media(max-width:700px){#board .job-row>.customer-cell {min-height:48px;padding-top:2px;padding-bottom:2px}}

/* BETA-12: bold centered names and simple empty-customer control. */
#board .record-name,#board .customer-expand:not(.customer-add-empty) {font-size:16px;font-weight:800;text-transform:uppercase;text-align:center;line-height:1.3}
#board .customer-expand:not(.customer-add-empty) span {text-align:center}
#board .record-add {display:flex;align-items:center;justify-content:center;gap:5px;width:100%;min-height:36px;border:0;background:transparent;color:var(--sc-work-muted);padding:3px;font:500 11px/1.4 system-ui,sans-serif;cursor:pointer}
#board .record-add svg {width:13px;height:13px;fill:none;stroke:var(--sc-work-accent);stroke-width:2.5;stroke-linecap:round;flex:none}
#board .record-add:focus-visible {outline:2px solid var(--sc-work-accent);outline-offset:1px}
#board .customer-add-empty {font-size:11px;font-weight:500;text-transform:none;justify-content:center!important;gap:5px}
#board .customer-add-empty span {flex:0 1 auto!important;text-align:center}
#board .customer-add-empty b {order:-1;font-size:15px}
.record-picker .record-add[hidden] {display:none!important}
@media(max-width:700px){#board .record-name {min-height:44px}#board .record-add {min-height:44px}}

/* BETA-14: consistent prerequisite memos and alternating work rows. */
:root {--sc-row-white:#ffffff;--sc-row-baby-blue:#dce1e6}
#board .job-row {--sc-row-background:var(--sc-row-white)}
#board .job-row.alternate-row {--sc-row-background:var(--sc-row-baby-blue)}
#board .job-row>div,#board .job-row.job-complete>.customer-cell {background:var(--sc-row-background)!important}
#board .job-row .customer-select,#board .job-row .contractor-select,#board .job-row .status-cell>select {background:var(--sc-row-background)}
#board .job-row>.contractor-cell>.customer-required,#board .job-row>.status-cell>.customer-required {display:block;width:100%;margin:0!important;padding:0;font:800 11px/1.4 system-ui,sans-serif!important;color:var(--sc-work-muted);text-align:center;letter-spacing:normal;text-transform:none}

/* BETA-16: matching text-only record and status dropdown cues. */
#board .record-name {display:flex;align-items:center;justify-content:center;gap:5px}
#board .record-name>span {min-width:0;overflow-wrap:anywhere}
#board .record-chevron {display:inline-block;width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
#board .customer-expand span .record-chevron {margin-left:5px}
#board .detail-panel .record-picker-edit select:not([hidden]) {display:block!important}
.record-search h2 {margin:0 32px 6px 0;font-size:24px;line-height:1.25}
.record-search-hint {margin:0 0 18px;color:var(--sc-work-muted);font-size:13px;line-height:1.5}
.record-search-field {display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid var(--sc-work-border);border-radius:9px;background:var(--sc-work-white)}
.record-search-field:focus-within {outline:2px solid var(--sc-work-accent);outline-offset:2px}
.record-search-field>svg {width:18px;height:18px;flex:none;fill:none;stroke:var(--sc-work-accent);stroke-width:2;stroke-linecap:round}
.card .record-search-field input {width:100%;min-width:0;min-height:46px;margin:0;padding:10px 0;border:0;border-radius:0;background:transparent;font:400 16px/1.4 system-ui,sans-serif;outline:none;box-shadow:none}
.record-search-count {margin:16px 0 8px;font-size:12px;font-weight:700;color:var(--sc-work-muted)}
.record-search .customer-list {gap:7px;max-height:48vh;overflow:auto;padding:3px}
.card .record-search .search-record {display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:52px;padding:13px 16px;border:1px solid #cbd8e1;border-radius:8px;text-align:left;transition:background .15s,border-color .15s}
.record-search .search-record strong {font:700 15px/1.4 system-ui,sans-serif;overflow-wrap:anywhere}
.record-search .search-record svg {width:14px;height:14px;flex:none;fill:none;stroke:var(--sc-work-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card .record-search .search-record:hover,.card .record-search .search-record:focus-visible {background:#e6f2fa;border-color:var(--sc-work-accent)}
.record-search .customer-list>.muted {padding:24px 12px;text-align:center;border:1px dashed #b7ccd9;border-radius:8px}

/* BETA-19: fluid tracks, earlier compact board, and contained components. */
main,.main-nav,.board-wrap,#board,#rows,.detail-panel,.card,#modalBody {min-width:0;max-width:100%}
/* The active marker tooltip is mounted on the body by app.js. */
#board .dot .hover-info {display:none}
#board .board-heading,#board .job-row {grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,.8fr)) minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,.8fr)}
#board .record-name,#board .customer-expand,#board .record-name>span {min-width:0;overflow-wrap:normal;word-break:normal}
#board .record-name,#board .customer-expand:not(.customer-add-empty) {font-weight:600;text-transform:none}
#board .record-name>span,#board .customer-expand>span {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#board .customer-expand>span {flex:1;text-align:center}
#board .customer-expand>b {flex:none}
#board .detail-grid {grid-template-columns:repeat(4,minmax(0,1fr))}
#board .detail-grid>div,#board .assignment-grid>* {min-width:0}
#board .detail-grid span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#board .detail-grid b {overflow-wrap:normal;word-break:normal}
#board .customer-required,#board .status-date-btn {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#board .job-row>.contractor-cell>.customer-required,#board .job-row>.status-cell>.customer-required,#board .customer-required {font-weight:400!important}
.th-label {max-width:100%;min-width:0;white-space:nowrap}
.th-label>span {min-width:0;overflow:hidden;text-overflow:ellipsis}
#board .th-label,#board .th-label>span {font-weight:600!important;text-transform:none!important;letter-spacing:normal!important;text-shadow:none!important}
@media(min-width:1101px) and (max-width:1500px){
 .th-label {font-size:clamp(10px,.9vw,13px)!important;gap:4px!important}
 .th-label .head-icon {width:14px!important;height:14px!important;min-width:14px!important}
}
.main-nav {width:100%;max-width:100%;gap:8px!important}
.main-nav .navbtn {min-width:0!important;white-space:nowrap}
.main-nav .desktop-quick-search {min-width:0;max-width:320px}
.main-nav .desktop-quick-search input {min-width:0}
.clear-search-highlight {flex:none;white-space:nowrap}
.modal {padding:16px}
.modal .card {width:min(650px,100%);max-width:100%;max-height:calc(100dvh - 32px)}
.formgrid {grid-template-columns:repeat(2,minmax(0,1fr))}
.formgrid>*,.marker-payment-summary>*,.settings-record-row>div {min-width:0}
.card input,.card select,.card textarea {min-width:0;max-width:100%}
.record-search .search-record strong,.customer-item strong,.customer-item span,.quick-search-result strong,.quick-search-result span,.quick-search-result small {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}
.payment-preview {flex-wrap:wrap}
.account-details dd {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(min-width:761px) and (max-width:700px){
 .main-nav .navbtn {flex:0 1 auto!important;width:auto!important;padding:0 10px!important;font-size:13px!important;gap:5px!important}
 .main-nav .desktop-quick-search {flex:1;max-width:none}
 #board .job-row>.customer-cell>.record-picker {display:none}
}
@media(max-width:700px){
 #board .detail-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 #board .customer-expand span .record-chevron {display:inline-block}
 #board .mobile-job-controls .record-picker {max-width:100%}
 .board-wrap {max-height:none}
 body.workflow-focus-mode .board-wrap {max-height:none}
}
@media(max-width:760px){
 .main-nav {display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px!important;padding:6px!important;height:64px!important;min-height:64px!important}
 .main-nav .navbtn,.main-nav #settingsBtn,.main-nav #workflowFocusToggle {width:100%!important;min-width:0!important;max-width:100%!important;min-height:44px!important;height:48px!important;padding:4px!important;margin:0!important;flex:none!important;gap:2px!important;font-size:10px!important}
 .main-nav>.workflow-view-toolbar {width:100%;min-width:0}
 .main-nav .navbtn>span:not(.nav-icon),.main-nav .navbtn .chev {display:none!important}
 .main-nav .nav-icon {flex:none!important}
 .main-nav .menu {max-width:calc(100vw - 20px)!important}
 .main-nav .menu button {width:100%;max-width:100%;white-space:normal}
 body {padding-bottom:70px}
 .formgrid {grid-template-columns:minmax(0,1fr)}
 .settings-record-row {flex-wrap:wrap}
 .settings-record-row>div {flex-basis:100%}
}
@media(max-width:420px){
 .modal {padding:10px}
 .modal .card {padding:20px 16px;max-height:calc(100dvh - 20px)}
 #board .detail-grid,.mobile-markers,.marker-payment-summary {grid-template-columns:minmax(0,1fr)}
 .marker-payment-summary strong {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
 .pagebar,.board-page-controls {flex-wrap:wrap}
}

/* Final office palette, after historical theme overrides. */
/* BETA-24: user-approved swirl marker icon set, with existing handlers. */
#board .marker-cell .dot,#board .marker-cell .dot.green {border:0;background:transparent;box-shadow:none;overflow:visible}
#board .marker-cell .dot::before {display:none}
#board .dot .swirl-marker {width:30px;height:30px;max-width:none;object-fit:contain;filter:hue-rotate(145deg) saturate(1.7) drop-shadow(0 0 2px #d9364960);pointer-events:none}
#board .dot.green .swirl-marker {filter:hue-rotate(285deg) saturate(1.4) drop-shadow(0 0 2px #15934c60)}
#board .dot:hover .swirl-marker,#board .dot:focus-visible .swirl-marker {filter:hue-rotate(145deg) saturate(1.7) brightness(1.08) drop-shadow(0 0 3px #d9364980)}
#board .dot.green:hover .swirl-marker,#board .dot.green:focus-visible .swirl-marker {filter:hue-rotate(285deg) saturate(1.4) brightness(1.08) drop-shadow(0 0 3px #15934c80)}
#board .mobile-markers button::before {width:26px;height:26px;border:0;border-radius:0;box-shadow:none;background:url('icons/stormcore-swirl-transparent.png') center / contain no-repeat;filter:hue-rotate(145deg) saturate(1.7) drop-shadow(0 0 2px #d9364960)}
#board .mobile-markers button[data-complete="true"]::before {border:0;box-shadow:none;background:url('icons/stormcore-swirl-transparent.png') center / contain no-repeat;filter:hue-rotate(285deg) saturate(1.4) drop-shadow(0 0 2px #15934c60)}
:root {--sc-row-white:#fff;--sc-row-baby-blue:#f3f5f7;--sc-work-white:#fff;--sc-work-blue:#f7f9fb;--sc-work-slate:#f3f5f7;--sc-work-border:#c8d3dc;--sc-work-text:#243e53;--sc-work-muted:#647b8d;--sc-work-accent:#4e718a}


/* BETA-26: retain the clean label while the native picker is open. */
#board .record-picker {position:relative}
#board .record-picker-edit select:not([hidden]) {position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;opacity:0!important;cursor:pointer;z-index:1}
#board .record-picker-edit {outline:2px solid #537e9e;outline-offset:2px;border-radius:4px}


/* BETA-26: stronger, compact office header. */
.hero {background:#19364c!important;border-bottom:1px solid #294c65!important}
.compact-brand {color:#fff}
.compact-brand>span {color:#bdceda;font-size:12px;font-weight:600;letter-spacing:.06em}
.compact-brand h1 {color:#fff;font-size:19px;font-weight:700}
.hero::after {opacity:.24}
@media(max-width:760px){.compact-brand h1 {font-size:17px}.hero::after {opacity:.16}}


/* BETA-27: prompt typography follows the available picker width. */
#board .record-picker {container-type:inline-size}
#board .record-name.record-prompt {font-size:clamp(9px,9cqi,14px);gap:3px;max-width:100%;padding-left:1px;padding-right:1px}
#board .record-name.record-prompt>span {flex:0 1 auto;min-width:0;max-width:calc(100% - 13px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#board .record-prompt .record-chevron {width:10px;height:10px;flex:0 0 10px}


/* Scale all board typography to its own cell, not only viewport width. */
#board .job-row>div,#board .board-heading>div,#board .detail-grid>div {container-type:inline-size}
#board .record-name {font-size:clamp(9px,9cqi,16px);max-width:100%;gap:3px}
#board .record-name>span {flex:0 1 auto;max-width:calc(100% - 15px);min-width:0}
#board .th-label {font-size:clamp(8px,9cqi,13px)!important;max-width:100%}
#board .customer-required {font-size:clamp(8px,8cqi,11px)!important}
#board .marker-cell small {font-size:clamp(8px,8cqi,10px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#board .marker-cell .marker-date {font-size:clamp(8px,7cqi,9px)}
#board .status-date-btn {font-size:clamp(8px,8cqi,11px)}
#board .detail-grid b {font-size:clamp(9px,6cqi,11px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#board .detail-grid span {font-size:clamp(10px,7cqi,14px)}
#board .customer-expand:not(.customer-add-empty) {font-size:clamp(11px,6cqi,16px)}
#board .mobile-markers button {min-width:0;font-size:clamp(11px,4cqi,14px)}


/* BETA-28: orderly lists with a single resource manager. */
#board .job-row{height:auto!important;min-height:54px;align-items:stretch}
#board .job-row>div{height:auto!important;min-width:0}
#board .resource-cell{display:flex!important;flex-direction:column;align-items:stretch;justify-content:center;gap:5px;padding:9px 6px!important;min-width:0;overflow:hidden}
#board .resource-cell .dot{position:relative!important;top:auto!important;left:auto!important;transform:none!important;align-self:center;flex-shrink:0}
#board .resource-cell .marker-balance{position:static!important;transform:none!important;width:100%;text-align:center}
#board .resource-line{min-width:0;width:100%;text-align:left;padding:3px 0;border-bottom:1px solid #e1e7ec}
#board .resource-line>span,#board .resource-line>small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:normal!important;overflow-wrap:normal!important;line-height:1.5}
#board .resource-line>span{font-size:clamp(9px,9cqi,14px);font-weight:500;color:#243e53}
#board .resource-line>small{font-size:clamp(8px,7cqi,11px);color:#647b8d}
.resource-link{display:flex;align-items:center;justify-content:center;gap:3px;max-width:100%;min-width:0;border:0;background:transparent;color:#456881;font-size:12px;font-weight:400;padding:5px 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
#board .resource-link{font-size:clamp(8px,8cqi,12px)}
.resource-link .record-chevron{width:10px;height:10px;flex:none}
#board .customer-cell{flex-wrap:wrap}
#board .customer-cell>.resource-link{flex-basis:100%;align-self:end}
.resource-tabs{display:flex;gap:5px;margin:18px 0;border-bottom:1px solid #d5dfe7;padding-bottom:8px}
.resource-tabs button{flex:1;min-width:0;border:1px solid #d5dfe7;background:#f5f7fa;padding:10px 5px;border-radius:6px;color:#486277;font:500 13px system-ui;cursor:pointer;white-space:nowrap}
.resource-tabs button[aria-selected=true]{background:#203f56;color:#fff;border-color:#203f56}
.resource-records{display:grid;gap:8px}
.resource-record{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;background:#f5f7fa;border:1px solid #dfe6ed;border-radius:7px;min-width:0}
.resource-record>div:first-child{min-width:0;flex:1}
.resource-record strong,.resource-record small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.resource-record strong{font-weight:500;font-size:14px;color:#243e53}
.resource-record small{color:#647b8d;font-size:12px;margin-top:4px}
.resource-actions{display:flex;gap:5px;flex:none}
.resource-actions button{padding:7px;font-size:12px}
.resource-total{padding:12px;background:#edf2f6;border-radius:6px;font-weight:500}
.resource-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.resource-form-grid label{min-width:0;display:flex;flex-direction:column;gap:5px;font-size:13px;color:#486277}
.resource-form-grid input,.resource-form-grid select{width:100%;min-width:0;box-sizing:border-box}
.resource-form-grid label[hidden]{display:none}
.resource-check{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;margin:8px 0}
.resource-check input{width:18px!important;flex:none}
#resourceForm h3{font-size:15px;font-weight:500;margin-top:22px}
.mobile-resource-summary{display:grid;gap:6px}
@media(max-width:700px){#board .job-row>.resource-cell{display:none!important}#board .customer-cell>.resource-link{display:none}.resource-form-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:420px){.resource-record{flex-wrap:wrap}.resource-record>div:first-child{flex-basis:100%}.resource-tabs button{font-size:11px;padding:10px 3px}.resource-tabs{gap:3px}}

#board .resource-line>small{position:static!important;left:auto;right:auto;top:auto;text-align:left;margin:0!important}
#board .resource-line>small{font-weight:400!important}

/* Workflow emblems share a baseline, with supporting labels beneath. */
#board .marker-cell[data-marker="deposit1"] {min-height:70px}
#board .marker-cell[data-marker="deposit1"]:has(.marker-date) {min-height:84px}
#board .job-row>.marker-cell .dot {position:absolute!important;left:50%!important;top:calc(50% - 14px)!important;transform:translate(-50%,-50%)!important;margin:0}
#board .job-row>.marker-cell .marker-balance {top:calc(50% + 4px)}
#board .job-row>.marker-cell .marker-date {top:calc(50% + 17px)}
#board .job-row>.marker-cell.resource-cell>.resource-link {position:absolute;top:calc(50% + 4px);left:0;right:0;margin:0 auto}

/* Customer and status menus share the board's office palette. */
#board .custom-board-picker>button {border:1px solid transparent;border-radius:6px;padding:6px 7px;min-height:32px}
#board .custom-board-picker>button:hover,#board .custom-board-picker>button[aria-expanded="true"] {background:#edf3f7;border-color:#bdcdd9}
#board .custom-board-picker>button:focus-visible {outline:2px solid #537e9e;outline-offset:2px}
.board-picker-panel {position:fixed;z-index:1200;box-sizing:border-box;display:flex;flex-direction:column;padding:8px;background:#fff;border:1px solid #bdcdd9;border-radius:10px;box-shadow:0 12px 32px #19364c26;color:#243e53;font:14px system-ui;overflow:hidden}
.board-picker-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:3px 4px 9px;flex:none}
.board-picker-heading strong {font-size:13px;font-weight:600}
.board-picker-close {border:0;background:transparent;color:#647b8d;font:22px system-ui;cursor:pointer;width:30px;height:30px;border-radius:5px}
.board-picker-close:hover {background:#edf3f7}
.board-picker-search {box-sizing:border-box;width:100%;min-height:40px;padding:9px 11px;border:1px solid #c8d3dc;border-radius:6px;background:#f7f9fb;color:#243e53;font:14px system-ui;margin-bottom:8px;flex:none}
.board-picker-options {overflow:auto;min-height:0;overscroll-behavior:contain;display:flex;flex-direction:column;gap:3px}
.board-picker-option {position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:none;width:100%;min-height:42px;padding:10px 34px 10px 12px;border:0;border-radius:6px;background:transparent;color:#243e53;text-align:left;font:14px system-ui;cursor:pointer}
.board-picker-option:hover,.board-picker-option:focus-visible {background:#edf3f7;outline:2px solid #537e9e;outline-offset:-2px}
.board-picker-option[aria-selected="true"] {background:#e8f0f6}
.board-picker-option-title {font-weight:500;overflow-wrap:anywhere}
.board-picker-option small {font-size:11px;color:#647b8d}
.board-picker-check {position:absolute;right:12px;top:12px;color:#365d79;font-weight:700}
.board-picker-option[data-status] {padding-left:24px}
.board-picker-option[data-status]::before {content:'';position:absolute;left:9px;top:16px;width:6px;height:6px;border-radius:50%;background:#8394a1}
.board-picker-option[data-status="In Progress"]::before {background:#087dc3}
.board-picker-option[data-status="On Hold"]::before {background:#a77a19}
.board-picker-option[data-status="Complete"]::before {background:#157a45}
.board-picker-option[data-status="In Collections"]::before {background:#b44354}
.board-picker-empty {font-size:12px;color:#647b8d;margin:8px 12px}

/* Job-Production-04: iOS-inspired light surfaces and blue accents. */
:root {--sc-row-white:#fff;--sc-row-baby-blue:#fafbff;--sc-work-white:#fff;--sc-work-blue:#f5f6fb;--sc-work-slate:#f2f2f7;--sc-work-border:#e0e5ef;--sc-work-text:#182a4b;--sc-work-muted:#617598;--sc-work-accent:#007aff;--ios-blue:#007aff;--ios-separator:#e0e5ef}
body {font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;background:#f2f2f7!important;color:var(--sc-work-text);background-image:linear-gradient(135deg,#f7f8fc,#eef1f8)!important}
button,input,select,textarea {font-family:inherit}
.hero {height:auto!important;min-height:80px!important;max-height:none!important;margin:16px 16px 12px;padding:0;background:rgba(255,255,255,.88)!important;border:1px solid #fff!important;border-radius:20px;box-shadow:0 4px 24px #23396806;isolation:isolate}
.hero::after {display:none}
.hero .approved-header {height:80px!important;max-height:80px!important;padding:16px 20px;gap:14px}
.approved-swirl {width:48px;height:48px}
.compact-brand {color:#142544}
.compact-brand>span {color:#617598;font-size:13px;font-weight:500;letter-spacing:.025em}
.compact-brand h1 {color:#142544;font-size:24px;font-weight:700;letter-spacing:-.025em;margin-top:2px}
.main-nav {background:transparent!important;border:0!important;box-shadow:none;justify-content:flex-start;padding:0 16px 12px!important;gap:10px!important;height:62px;min-height:62px}
.main-nav .navbtn,#workflowFocusToggle {background:rgba(255,255,255,.88)!important;border:1px solid #dee5f0!important;border-radius:13px!important;color:#314b70!important;box-shadow:0 3px 10px #243b6306;font-weight:600}
.main-nav .navbtn:hover,.main-nav .navbtn:focus-visible,#workflowFocusToggle:hover {background:#eaf3ff!important;border-color:#a7cdff!important;color:#007aff!important}
.main-nav:has(#customersMenu:not(.hidden)) #customersBtn,.main-nav:has(#contractorsMenu:not(.hidden)) #contractorsBtn,.main-nav:has(#vendorsMenu:not(.hidden)) #vendorsBtn {background:#e7f2ff!important;border-color:#b9d9ff!important;color:#007aff!important}
.main-nav .nav-icon,.main-nav .nav-icon svg {color:inherit;stroke:currentColor}
.main-nav .menu,.quick-search-results {background:rgba(255,255,255,.97)!important;border:1px solid #dee5f0!important;border-radius:15px!important;box-shadow:0 12px 32px #1c355b1a;backdrop-filter:blur(18px)}
.main-nav .menu button {color:#182a4b;border-radius:9px;font-weight:500;min-height:44px}
.main-nav .menu button:hover,.quick-search-result:hover {background:#eaf3ff!important;color:#007aff}
.main-nav .quick-customer-search input,.mobile-quick-search-inner input {background:rgba(255,255,255,.95);border-color:#dbe3ef;border-radius:13px;height:44px;color:#182a4b}
.quick-search-icon {color:#617598;stroke:#617598}
.mobile-quick-search-panel {background:#f2f2f7;border-color:#dee5f0}
main {padding:0 16px 16px}
.board-wrap {border:1px solid #e0e5ef;border-radius:16px 16px 0 0;background:#fff;box-shadow:0 6px 22px #22375908;max-height:calc(100dvh - 210px)}
#board .board-heading>div {background:#f5f6fa!important;color:#314b70;border-color:#e0e5ef;padding:14px 7px}
#board .th-label {color:#314b70!important;font-weight:600!important}
#board .th-label .head-icon {color:#617598;stroke:#617598}
#board .job-row>div {background:var(--sc-row-background,#fff)!important;border-color:#e0e5ef;color:#182a4b;min-height:96px;padding-top:8px;padding-bottom:8px}
#board .marker-cell[data-marker="deposit1"],#board .marker-cell[data-marker="deposit1"]:has(.marker-date) {min-height:96px}
#board .resource-cell {padding-top:8px!important;padding-bottom:8px!important}
#board .job-row>.customer-cell {padding-left:25px}
#board .customer-cell:has(.customer-select option:checked:not([value=""])) .record-name,#board .customer-cell:has(.customer-select option:checked:not([value=""])) .customer-expand:not(.customer-add-empty),#board .mobile-job-controls .record-picker:has(.customer-select option:checked:not([value=""])) .record-name {color:#007aff;font-weight:650}
#board .customer-cell .record-name,#board .customer-expand>span {text-align:left;justify-content:flex-start}
#board .customer-cell .record-name>span {flex:0 1 auto}
#board .customer-required,#board .resource-link,#board .marker-cell small,#board .status-date-btn {color:#617598;font-weight:400!important}
#board .resource-link:hover {color:#007aff}
#board .customer-row-number {color:#8e9bb0}
#board .resource-line {border-color:#e8ecf3}
#board .resource-line>span {color:#182a4b}
#board .resource-line>small {color:#617598}
#board .custom-board-picker>button {border-radius:10px;min-height:38px;padding:7px 9px}
#board .custom-board-picker>button:hover,#board .custom-board-picker>button[aria-expanded="true"] {background:#edf5ff;border-color:#b6d6ff}
#board .status-cell .custom-board-picker {width:100%}
#board .status-cell .record-name {background:linear-gradient(#fff,#f4f6fb);border:1px solid #d6dfec;border-radius:11px;justify-content:flex-start;box-shadow:0 2px 5px #1d355108;gap:6px;min-height:38px}
#board .status-cell .record-name::before {content:'';width:7px;height:7px;flex:none;border-radius:50%;background:#8394a1}
#board .status-cell .record-name[data-status="In Progress"] {background:#e7f2ff;border-color:#9ecbff}
#board .status-cell .record-name[data-status="In Progress"]::before {background:#007aff}
#board .status-cell .record-name[data-status="On Hold"]::before {background:#ae7800}
#board .status-cell .record-name[data-status="Complete"]::before {background:#23834b}
#board .status-cell .record-name[data-status="In Collections"]::before {background:#d13a46}
#board .status-cell .record-name>span {flex:1;max-width:calc(100% - 24px)}
.pagebar {background:rgba(255,255,255,.8)!important;color:#617598;border:1px solid #e0e5ef;border-top:0;border-radius:0 0 16px 16px;padding:13px 16px;font-weight:400;font-size:13px}
.board-picker-panel {background:rgba(255,255,255,.98);border:1px solid #dbe3ef;border-radius:16px;box-shadow:0 14px 36px #1c355b21;backdrop-filter:blur(20px);color:#182a4b;padding:8px}
.board-picker-heading {padding:4px 7px 10px}
.board-picker-close {color:#617598;border-radius:50%}
.board-picker-option {border-radius:9px;color:#182a4b}
.board-picker-option:hover,.board-picker-option:focus-visible,.board-picker-option[aria-selected="true"] {background:#eaf3ff;outline-color:#007aff}
.board-picker-option[aria-selected="true"] .board-picker-option-title,.board-picker-check {color:#007aff}
.board-picker-option small,.board-picker-empty {color:#617598}
.board-picker-option[data-status="In Progress"]::before {background:#007aff}
.board-picker-option[data-status="On Hold"]::before {background:#ae7800}
.board-picker-option[data-status="Complete"]::before {background:#23834b}
.board-picker-option[data-status="In Collections"]::before {background:#d13a46}
.board-picker-search {background:#f2f2f7;border:1px solid #e0e5ef;border-radius:10px;color:#182a4b}
.modal {background:#15233f55;backdrop-filter:blur(5px)}
.modal .card {background:#fff;border:1px solid #e5e9f1;border-radius:22px;box-shadow:0 24px 70px #14274526;color:#182a4b}
.card h2 {color:#142544;letter-spacing:-.025em}
.card input,.card select,.card textarea,#board .detail-panel input,#board .detail-panel select {border-color:#dbe3ef;border-radius:10px;background:#f9faff;color:#182a4b}
.card input:focus-visible,.card select:focus-visible,.card textarea:focus-visible,.board-picker-search:focus-visible {outline:2px solid #007aff;outline-offset:2px}
.card .primary {background:#007aff;border-radius:11px;font-weight:600}
.card .secondary,.card .settings-record-row button,.card .settings-upload {background:#f2f2f7;border-color:#e0e5ef;border-radius:11px;color:#244064;font-weight:500}
.card .settings-section,.card .marker-payment-summary,.card .supplement-section,.resource-record {background:#f5f6fa;border-color:#e0e5ef;border-radius:13px}
.resource-tabs button {background:#f2f2f7;border-color:#e0e5ef;border-radius:9px;color:#617598}
.resource-tabs button[aria-selected="true"] {background:#e7f2ff;border-color:#b9d9ff;color:#007aff}
#board .detail-panel {background:#f2f2f7;border-color:#e0e5ef;border-radius:0 0 14px 14px}
#board .detail-grid>div {background:#fff;border:1px solid #e0e5ef;border-radius:12px}
#board .mobile-markers button {border-color:#e0e5ef;border-radius:12px;background:#fff;color:#182a4b;font-weight:500}
.marker-floating-tooltip {background:#243653;color:#fff;border-color:#344a6c;border-radius:12px;box-shadow:0 8px 24px #15233f25}
@media(min-width:1101px){
 .main-nav .desktop-quick-search {position:absolute;right:128px;top:-76px;width:min(30vw,380px);max-width:380px}
 .main-nav #settingsBtn {position:absolute!important;left:auto!important;right:72px!important;top:-76px!important;height:44px}
 .main-nav>.workflow-view-toolbar {position:absolute;right:16px;top:-76px;height:44px;width:44px}
 .main-nav .menu {top:calc(100% - 8px)}
}
@media(max-width:1100px) and (min-width:761px){.compact-brand h1 {font-size:22px}.main-nav {padding-left:12px!important;padding-right:12px!important}}
@media(max-width:760px){
 .hero {margin:10px 10px 12px;min-height:72px!important;border-radius:17px}
 .hero .approved-header {height:72px!important;max-height:72px!important;padding:12px 14px;gap:10px}
 .approved-swirl {width:40px;height:40px}
 .compact-brand h1 {font-size:20px}.compact-brand>span {font-size:11px}
 main {padding:0 10px 12px}
 .main-nav {position:fixed;background:rgba(250,250,253,.96)!important;border-top:1px solid #e0e5ef!important;backdrop-filter:blur(20px);padding:7px 8px calc(7px + env(safe-area-inset-bottom))!important;height:calc(64px + env(safe-area-inset-bottom))!important;border-radius:16px 16px 0 0}
 .main-nav .navbtn,.main-nav #settingsBtn,.main-nav #workflowFocusToggle {border-radius:12px!important;background:#fff!important}
 body {padding-bottom:calc(76px + env(safe-area-inset-bottom))}
 .board-wrap {max-height:none}
 .pagebar {border-radius:0 0 14px 14px}
}
@media(max-width:700px){
 .board-wrap {border:0;background:transparent;box-shadow:none;border-radius:0}
 #board .job-row {border:1px solid #e0e5ef;border-radius:14px;margin-bottom:8px;background:#fff;box-shadow:0 3px 10px #23396805}
 #board .job-row>.customer-cell {min-height:60px;padding:6px 12px 6px 26px}
 #board .custom-board-picker>button {min-height:44px}
 #board .status-cell .record-name {min-height:44px}
 #board .detail-panel {padding:14px}
 .pagebar {border-top:1px solid #e0e5ef;border-radius:14px}
 .mobile-job-controls .custom-board-picker {width:100%}
 .board-picker-panel {border-radius:17px}
}
@media(prefers-reduced-transparency:reduce){.hero,.main-nav,.board-picker-panel,.modal .card,.main-nav .menu {backdrop-filter:none;background:#fff!important}}
@media(prefers-reduced-motion:reduce){* {scroll-behavior:auto!important}}

/* Job-Production-05: stronger row tracking and readable supporting text. */
:root {--sc-row-white:#fff;--sc-row-baby-blue:#edf2f8;--sc-work-muted:#465c7a;--ios-separator:#c4cfdf}
#board .job-row>div {border-right-color:#c4cfdf;border-bottom-color:#aabbd0}
#board .board-heading>div {background:#e8edf5!important;border-color:#bccadd;color:#243b5c}
#board .th-label {color:#243b5c!important}
#board .resource-line {border-color:#cbd6e5}
#board .customer-required,#board .resource-link,#board .marker-cell small,#board .status-date-btn,#board .resource-line>small {color:#465c7a}
#board .marker-cell .marker-balance,#board .marker-cell .marker-date {font-weight:500!important}
#board .customer-row-number {color:#526783}
.board-wrap {border-color:#bccadd}
.pagebar {border-color:#bccadd;color:#465c7a}
#board .detail-grid b,.board-picker-option small,.board-picker-empty {color:#465c7a}
@media(max-width:700px){
 #board .job-row {border-color:#b4c3d7}
 #board .detail-grid>div {border-color:#c4cfdf}
 #board .mobile-markers button {border-color:#c4cfdf}
}

/* Job-Production-06: decorative storm artwork behind unchanged branding. */
.hero {width:calc(100% - 32px)!important}
.hero::after {display:block;content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:url('header-storm-art.png') center / cover no-repeat;opacity:.8}
@media(max-width:760px){.hero {width:calc(100% - 20px)!important}.hero::after {inset:0;opacity:.35}}

/* Give floating menus a distinct surface above the light board. */
.board-picker-panel,.main-nav .menu,.quick-search-results {background:#e8eef7!important;border:1px solid #8ea5c2!important;box-shadow:0 12px 28px #18345730,0 2px 6px #1834571a!important;color:#182a4b}
.board-picker-heading {border-bottom:1px solid #bdcbdc;margin-bottom:7px}
.board-picker-heading strong {color:#243b5c}
.board-picker-option {border:1px solid transparent}
.board-picker-option[aria-selected="true"] {background:#fff;border-color:#8ebbf3}
.board-picker-option:hover,.board-picker-option:focus-visible {background:#d2e4fc;outline-color:#007aff}
.board-picker-search {background:#fff;border-color:#a9bdd5}
.board-picker-close:hover {background:#d2e4fc}
.main-nav .menu button:hover,.main-nav .menu button:focus-visible,.quick-search-result:hover,.quick-search-result:focus-visible {background:#d2e4fc!important;color:#0054ba;outline:2px solid #007aff;outline-offset:-2px}

/* Display-only job grouping and filters. */
.job-view-toolbar {display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;margin-bottom:8px;color:#465c7a;font-size:12px}
.job-view-actions {display:flex;gap:6px;flex-wrap:wrap;flex:none;margin-left:auto}
.job-view-actions button {border:1px solid #b7c8dd;border-radius:9px;background:#fff;color:#314b70;min-height:34px;padding:7px 10px;font-size:12px;cursor:pointer}
.job-view-actions button:hover,.job-view-actions button[aria-expanded="true"] {background:#e7f2ff;border-color:#8ebbf3;color:#0054ba}
.job-view-heading {display:inline-flex;align-items:center;justify-content:center;gap:5px;max-width:100%;border:0;border-radius:6px;background:transparent;color:#243b5c;padding:3px;font:inherit;cursor:pointer}
.job-view-heading .record-chevron {width:10px;height:10px;flex:none}
.job-view-heading:hover,.job-view-heading[aria-expanded="true"] {background:#d2e4fc}
.job-view-heading:focus-visible,.job-view-actions button:focus-visible {outline:2px solid #007aff;outline-offset:2px}
.job-group-heading {padding:9px 16px;background:#dfe8f4;border-bottom:1px solid #aabbd0;color:#243b5c;font:600 13px system-ui}
.job-view-empty {padding:28px 16px;background:#fff;color:#465c7a;text-align:center;font-size:14px}
.board-page-controls {display:flex;align-items:center;gap:10px}
.board-page-controls button {border:1px solid #b7c8dd;border-radius:7px;background:#fff;color:#314b70;padding:3px 10px;min-height:30px;cursor:pointer}
.board-page-controls button:disabled {opacity:.45;cursor:default}
@media(min-width:701px){.job-view-toolbar:has(#resetJobView[hidden]) {min-height:0;margin:0}.job-view-actions #statusViewButton,.job-view-actions #contractorViewButton {display:none}}
@media(max-width:700px){.job-view-toolbar {align-items:flex-start;flex-wrap:wrap}.job-view-actions {margin-left:0}.job-view-actions button {min-height:44px}.job-view-toolbar #jobViewSummary:empty {display:none}.job-view-toolbar #jobViewSummary:not(:empty) {flex-basis:100%}.job-group-heading {border-radius:10px;margin:6px 0}}

/* Job-Production-08: consistent iOS styling across every active app surface. */
:root {--ios-popup:#e8eef7;--ios-popup-border:#8ea5c2;--ios-hover:#d2e4fc;--ios-ink:#182a4b;--ios-muted:#465c7a}
.main-nav .menu {width:min(280px,calc(100vw - 20px));padding:8px!important;border-radius:16px!important;background:var(--ios-popup)!important;border-color:var(--ios-popup-border)!important;overflow:hidden}
.main-nav .menu button {display:flex!important;align-items:center;gap:11px;width:100%!important;min-height:46px;padding:12px 13px!important;margin:0;border:0;border-radius:10px!important;background:transparent;color:var(--ios-ink)!important;font:500 14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif!important;text-align:left;letter-spacing:normal;text-shadow:none;box-shadow:none}
.main-nav .menu button+button {margin-top:3px}
.main-nav .menu button span {font:inherit;color:inherit}
.main-nav .menu button .menu-icon {width:18px;height:18px;flex:none;color:#007aff!important;stroke:#007aff!important;fill:none;stroke-width:1.7;filter:none}
.main-nav .menu button:hover,.main-nav .menu button:focus-visible {background:var(--ios-hover)!important;color:#0054ba!important;outline:2px solid #007aff;outline-offset:-2px}
.quick-search-results {padding:8px;border-radius:16px!important}
.quick-search-result {width:100%;border:0;border-radius:10px;padding:12px;color:var(--ios-ink);background:transparent;min-height:48px;text-align:left;font:inherit}
.quick-search-result strong {font-weight:600;color:var(--ios-ink)}
.quick-search-result span,.quick-search-result small,.quick-search-empty {color:var(--ios-muted)}
.mobile-quick-search-panel {background:#f2f2f7!important;border-color:#c4cfdf;padding:10px}
.card {font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
.card h2 {font-size:24px;line-height:1.25;font-weight:700;margin-bottom:16px}
.card h3 {color:var(--ios-ink);font-size:16px;font-weight:600}
.card label,.card .date-label,.card .form-section-title {color:#314b70;font-weight:500}
.card .form-section-title {border-color:#c4cfdf;font-size:13px;letter-spacing:normal;text-transform:none}
.card input,.card select,.card textarea {font-family:inherit;font-size:16px;min-height:42px}
.card input[type="checkbox"],#board input[type="checkbox"] {accent-color:#007aff;min-height:18px}
.card .muted,.card small,.card .form-hint,.card .record-search-hint,.card .record-search-count,.card .account-details dt,.card .settings-record-row small {color:var(--ios-muted)}
.card .close {display:flex;align-items:center;justify-content:center;width:32px;height:32px;right:12px;top:12px;border-radius:50%;background:#edf1f7;color:#526783;font:24px/1 system-ui}
.card .close:hover,.card .close:focus-visible {background:#d2e4fc;color:#0054ba;outline:2px solid #007aff}
.card .primary {border-radius:11px!important;background:#007aff!important;color:#fff!important;font-family:inherit;font-weight:600;min-height:44px;box-shadow:none}
.card .secondary,.card .settings-record-row button,.card .settings-upload {border-radius:11px!important;background:#edf1f7;border:1px solid #b7c8dd;color:#314b70;font-family:inherit;font-weight:500;min-height:44px}
.card .primary:hover,.card .primary:focus-visible {background:#0065d8!important}.card .secondary:hover,.card .settings-record-row button:hover,.card .settings-upload:hover {background:#d2e4fc;border-color:#8ebbf3}
.card .danger,.card .supp-remove {border:1px solid #e6b4ba;border-radius:11px!important;background:#fff0f2;color:#b52738;font-family:inherit;font-weight:600;min-height:44px;padding:10px 14px;cursor:pointer}
.card .danger:hover,.card .supp-remove:hover {background:#ffe2e7}
.card .primary:focus-visible,.card .secondary:focus-visible,.card .danger:focus-visible,.card .supp-remove:focus-visible,.card .settings-upload:focus-within {outline:2px solid #007aff;outline-offset:2px}
.card .customer-item,.card .record-search .search-record {background:#f8faff;border:1px solid #c4cfdf;border-radius:12px;padding:13px 15px;color:var(--ios-ink);min-height:48px;text-align:left;font-family:inherit}
.card .customer-item strong,.card .record-search .search-record strong {color:#0054ba;font-weight:600}
.card .customer-item span,.card .customer-item .muted {color:var(--ios-muted)}
.card .customer-item:hover,.card .customer-item:focus-visible,.card .record-search .search-record:hover,.card .record-search .search-record:focus-visible {background:#e7f2ff;border-color:#8ebbf3;outline:2px solid #007aff;outline-offset:-2px}
.card .record-search-field {background:#f2f2f7;border:1px solid #a9bdd5;border-radius:12px}
.card .record-search-field input {background:transparent;border:0;border-radius:0;box-shadow:none;min-height:44px}
.card .record-search-field svg,.card .record-search .search-record svg {stroke:#617598}
.card .address-suggestions {background:var(--ios-popup);border:1px solid var(--ios-popup-border);border-radius:12px;padding:5px;box-shadow:0 8px 20px #18345724}
.card .address-suggestions button {border:0;border-radius:8px;background:transparent;color:var(--ios-ink);padding:10px;min-height:44px;font:14px system-ui;text-align:left}
.card .address-suggestions button:hover,.card .address-suggestions button:focus-visible {background:var(--ios-hover);outline:2px solid #007aff;outline-offset:-2px}
.card .payment-preview,.card .marker-payment-summary,.card .supplement-section,.card .settings-section,.card .import-preview {background:#f2f4f9;border:1px solid #c4cfdf;border-radius:13px;color:var(--ios-muted)}
.card .payment-preview strong,.card .marker-payment-summary strong,.card .supplement-total strong,.card .account-details dd {color:var(--ios-ink)}
.card .status-banner {border-radius:12px;font-weight:600;letter-spacing:.03em}
.card .status-banner.paid {background:#e5f5ed;color:#16643b}.card .status-banner.owed {background:#fff0f2;color:#a32838}
.card .resource-record {background:#f8faff;border:1px solid #c4cfdf;border-radius:12px}
.card .resource-record strong {color:var(--ios-ink);font-weight:600}.card .resource-record small {color:var(--ios-muted)}
.card .resource-total {background:#e7f2ff;border:1px solid #bad5f5;border-radius:12px;color:#244064;font-weight:500}
.card .resource-tabs {gap:4px;border:0;border-radius:11px;background:#e5eaf3;padding:4px}
.card .resource-tabs button {background:transparent;border:0;border-radius:8px;color:#465c7a;font-family:inherit;font-weight:500;min-height:40px}
.card .resource-tabs button[aria-selected="true"] {background:#fff;color:#0054ba;box-shadow:0 1px 4px #223b6520}
.card .resource-tabs button:focus-visible {outline:2px solid #007aff;outline-offset:-2px}
.card #importReview,.card .import-preview p {color:var(--ios-muted)}
#board .detail-panel h3,#board .detail-panel label {color:#314b70;font-weight:500}
#board .detail-panel input,#board .detail-panel select {font-family:inherit;min-height:44px}
.clear-search-highlight,.board-page-controls button {background:#edf1f7;border:1px solid #b7c8dd;border-radius:9px;color:#314b70;font-family:inherit;font-weight:500}
.board-page-controls button:not(:disabled):hover,.clear-search-highlight:hover {background:#d2e4fc;border-color:#8ebbf3}
@media(max-width:700px){.card h2 {font-size:22px}.card .resource-actions button {min-height:40px;padding:8px 10px}.card .resource-record strong,.card .resource-record small {white-space:normal;overflow-wrap:anywhere}.card .settings-record-row {gap:10px}}


/* Job-Production-10: approved Ice Blue header, flush with screen top. */
html,body {margin-top:0!important;padding-top:0!important}
.hero {
  width:100%!important;
  margin:0!important;
  padding:0!important;
  background:#edf7ff!important;
  border:0!important;
  border-radius:0;
  box-shadow:none;
}
.hero::after {
  opacity:1;
  border-radius:0;
  background:url('header-office-art.svg') right center / cover no-repeat;
}
.compact-brand,.compact-brand h1 {color:#102a50}
.compact-brand>span {color:#335474}
.main-nav {
  width:100%;
  margin:0 0 12px;
  padding:0 16px 12px!important;
  background:#deeeff!important;
  border-radius:0;
  box-shadow:0 1px 0 #c3dbf3;
}
.main-nav .navbtn,#workflowFocusToggle {
  background:#f5faff!important;
  border-color:#bfd7ef!important;
}
@media(min-width:1101px){
  .main-nav .desktop-quick-search,.main-nav #settingsBtn,.main-nav>.workflow-view-toolbar {top:-64px!important}
}
@media(max-width:760px){
  .hero {margin:0 0 12px!important;border-radius:0}
  .main-nav {
    width:100%;margin:0;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom))!important;
    background:#deeeff!important;
    border-top:1px solid #bfd7ef!important;
    border-radius:16px 16px 0 0;
  }
}

/* Job-Production-11: clearer record dialogs */
.modal:has(.record-form){background:#10243bb3}
.modal .card:has(.record-form){background:#e9eff6;border:2px solid #8298b0;box-shadow:0 24px 70px #071a4566}
.record-form h2{color:#fff;background:#173e65;border-radius:12px;padding:18px 42px 18px 18px;line-height:1.3;font-size:24px;margin-bottom:14px}
.modal:has(.record-form) .close{color:#fff;top:40px;right:35px;min-width:36px;min-height:36px;font-size:28px}
.record-form .formgrid{padding:16px;background:#f8fafc;border:1px solid #a9bacd;border-radius:12px;gap:18px 16px}
.record-form label{color:#243c55;font-size:13px;font-weight:700}
.record-form input,.record-form select{background:#fff;border:1.5px solid #8298b0;color:#162c43;box-shadow:none}
.record-form input::placeholder{color:#5d6d80;opacity:1}
.record-form input:focus,.record-form select:focus{outline:3px solid #1762a3;outline-offset:2px;border-color:#173e65}
.record-form .form-hint,.record-form small,.record-form .muted{color:#445970}
.record-form .form-section-title{background:#dce6f2;color:#173e65;border:0;border-left:4px solid #275b89;padding:10px 12px;border-radius:4px;font-size:12px;font-weight:800;letter-spacing:.05em}
.record-form .form-actions{position:sticky;bottom:-24px;background:#e9eff6;padding:16px 0;border-top:2px solid #8298b0;justify-content:flex-end;z-index:2}
.record-form .form-actions .primary{background:#174e86;color:#fff;order:3;border:1px solid #174e86}
.record-form .secondary{background:#fff;color:#243c55;border:1px solid #8298b0}
.record-form .form-actions .danger{order:0;margin-right:auto;background:#fff0f0;color:#92222f;border:1px solid #b35f68}
.record-form button:focus-visible,.record-notice button:focus-visible{outline:3px solid #1762a3;outline-offset:3px}
.record-form button:disabled{opacity:.65;cursor:wait}
.record-form .payment-preview,.record-form .supplement-section{background:#e4edf7;border:1px solid #8da7c1;color:#2f4c67}
.record-form .supp-remove{color:#92222f;background:#fff0f0;border:1px solid #b35f68;min-width:44px;min-height:44px}
.record-error{padding:12px;background:#fff0f0;color:#84212c;border:1px solid #b35f68;border-radius:8px}
.record-error[hidden]{display:none}
.record-notice{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:100;background:#e7f8ed;color:#164c2d;border:2px solid #287a47;border-radius:12px;box-shadow:0 8px 28px #10243b44;padding:16px;display:flex;gap:16px;align-items:center;width:min(560px,calc(100% - 32px));box-sizing:border-box;font-weight:700;line-height:1.5}
.record-notice button{background:#fff;color:#164c2d;border:1px solid #287a47;border-radius:8px;padding:10px;min-height:44px;cursor:pointer}
@media(max-width:420px){.record-form .formgrid{padding:12px}.record-form .form-actions{bottom:-20px;gap:8px}.record-form .form-actions .danger{order:4;margin:0}.record-notice{align-items:flex-start}.modal:has(.record-form) .close{top:34px;right:24px}}
/* Required minimal StormCore login */
[hidden],#stormcoreApp[hidden],#stormcoreAuthGate[hidden]{display:none!important}
.login-screen{position:fixed;inset:0;overflow:auto;z-index:10000;background:#eef2f6;color:#19324d;display:grid;place-items:center;padding:32px 16px;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}
.login-shell{width:min(420px,100%)}
.login-brand{display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:26px;font-size:23px;font-weight:800;letter-spacing:.1em;color:#173e65}
.login-brand small{font-size:11px;letter-spacing:.05em}
.login-card{background:#fff;padding:32px;border:1px solid #b8c8d9;border-radius:16px;box-shadow:0 12px 40px #173e6512}
.login-eyebrow{margin:0 0 12px;font-size:11px;font-weight:800;letter-spacing:.15em;color:#315d86}
.login-card h1{font-size:27px;line-height:1.25;letter-spacing:-.03em;margin:0 0 10px;color:#183650}
#stormcoreAuthDescription{color:#4e647b;font-size:14px;line-height:1.5;margin-bottom:26px}
.login-card label{display:block;font-size:13px;font-weight:700;margin-top:18px;color:#243c55}
.login-card input{box-sizing:border-box;width:100%;margin-top:7px;min-height:48px;padding:12px;border:1px solid #8298b0;border-radius:8px;background:#fff;color:#17324d;font-size:16px}
.login-card input:focus{outline:3px solid #1762a3;outline-offset:2px}
.login-hint{font-size:12px;color:#52667b;margin:8px 0 0;line-height:1.5}
.login-password{position:relative;display:block}.login-password input{padding-right:65px}.login-password button{position:absolute;right:5px;top:11px;min-height:40px;padding:8px;border:0;background:transparent;color:#194e7e;font-size:12px;font-weight:700;cursor:pointer}
#stormcoreAuthSubmit{width:100%;min-height:48px;background:#174e86;color:#fff;border:1px solid #174e86;border-radius:8px;font-size:15px;font-weight:700;padding:12px;cursor:pointer}
#stormcoreAuthSubmit:disabled{opacity:.65;cursor:wait}
.login-reset{display:block;margin:12px auto 0;min-height:44px;border:0;background:transparent;color:#194e7e;font-size:13px;cursor:pointer}
#stormcoreAuthMessage{font-size:13px;color:#244c71;line-height:1.5;margin:14px 0;min-height:0}#stormcoreAuthMessage:empty{margin:18px 0 0}#stormcoreAuthMessage[data-kind="error"]{background:#fff1f1;border-left:3px solid #aa3945;padding:10px;color:#84212c}
.login-crm-note{margin:20px 0 0;padding-top:18px;border-top:1px solid #d3dde7;text-align:center;font-size:12px;color:#52667b;line-height:1.7}
.login-footer{text-align:center;color:#52667b;font-size:11px;margin-top:24px}
.login-card button:focus-visible{outline:3px solid #1762a3;outline-offset:3px}
.account-bar{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px;margin:0 0 10px;font-size:12px;color:#304c68}.account-bar button{min-height:36px;background:white;border:1px solid #8298b0;color:#193e62;border-radius:8px;padding:7px 12px;cursor:pointer}
@media(max-width:420px){.login-screen{padding:20px 16px}.login-card{padding:24px}.login-card h1{font-size:25px}.login-brand{font-size:20px;margin-bottom:20px}.account-bar{justify-content:space-between;gap:8px}}
@media(max-height:650px){.login-screen{place-items:start center}.login-brand{margin-bottom:18px}.login-footer{margin-top:18px}}
/* Override the earlier global theme's important control colors within records only. */
.record-form .form-actions .primary{background:#174e86!important;color:#fff!important;border-color:#174e86!important;border-radius:11px}
.record-form .form-actions .secondary{border-radius:11px}
.modal:has(.record-form) .close{background:#245981!important;color:#fff!important;border:1px solid #88abc9!important}
/* Job-12: bright StormCore lightning banner, matching the light calculator theme. */
.hero{height:132px!important;min-height:132px!important;max-height:132px!important;background:#e4f2ff!important;overflow:hidden;border-bottom:1px solid #9fc5e6!important}
.hero::after{display:block;inset:0;opacity:1;background:linear-gradient(90deg,rgba(245,250,255,.88) 0%,rgba(237,247,255,.65) 30%,rgba(237,247,255,0) 64%),url('header-lightning.png') center 48% / cover no-repeat}
.hero .approved-header{height:132px!important;max-height:132px!important;padding:22px 28px;gap:18px;box-sizing:border-box;width:min(55%,660px)}
.hero .approved-swirl{width:74px;height:74px;filter:drop-shadow(0 3px 8px #31649622)}
.compact-brand>span{font-size:23px;font-weight:850;letter-spacing:.09em;color:#124c7c;line-height:1.2}
.compact-brand h1{font-size:24px;line-height:1.25;color:#15314d;margin-top:7px;font-weight:650;letter-spacing:-.025em}
.account-bar{padding:8px 18px;margin:0;background:#f2f7fc;border-bottom:1px solid #d0e0ef;box-sizing:border-box}
@media(min-width:1101px){.main-nav .desktop-quick-search,.main-nav #settingsBtn,.main-nav>.workflow-view-toolbar{top:-64px!important}}
@media(max-width:1100px){.hero .approved-header{width:100%;max-width:620px}.hero::after{background-position:center,right center}}
@media(max-width:760px){
 .hero{height:108px!important;min-height:108px!important;max-height:108px!important;margin:0 0 12px!important}
 .hero .approved-header{height:108px!important;max-height:108px!important;padding:18px 16px;gap:12px;width:100%}
 .hero .approved-swirl{width:58px;height:58px}
 .compact-brand>span{font-size:18px;letter-spacing:.06em}
 .compact-brand h1{font-size:19px;margin-top:5px}
 .hero::after{opacity:1;background:linear-gradient(90deg,rgba(245,250,255,.92),rgba(237,247,255,.66) 65%,rgba(237,247,255,.1)),url('header-lightning.png') 75% center / cover no-repeat}
 .account-bar{padding:8px 12px;font-size:11px}
}
@media(max-width:360px){.hero .approved-header{padding-left:12px;gap:9px}.hero .approved-swirl{width:46px;height:46px}.compact-brand>span{font-size:16px}.compact-brand h1{font-size:17px}}
/* Expose the same sorting/filtering controls on desktop as on phones. */
@media(min-width:701px){
 .job-view-toolbar,.job-view-toolbar:has(#resetJobView[hidden]){min-height:44px;margin:0 0 8px}
 .job-view-actions #statusViewButton,.job-view-actions #contractorViewButton{display:inline-flex;align-items:center;gap:6px;min-height:40px}
 .job-view-actions{margin-left:auto}
}

/* Job-13: blend the lightning banner into navigation. */
.hero{border-bottom:0!important}
.hero::before{content:'';position:absolute;inset:auto 0 0;height:64px;background:linear-gradient(to bottom,rgba(222,238,255,0),#deeeff);z-index:0;pointer-events:none}
.hero .approved-header{position:relative;z-index:1}
@media(max-width:760px){.hero{margin-bottom:0!important}.hero::before{height:48px}}

/* Job-15 workflow controls. */
.jpb-job-tabs{display:flex;gap:6px;overflow-x:auto;padding:0 0 10px;scrollbar-width:thin}
.jpb-job-tabs button{flex:none;min-height:44px;border:1px solid #b7c8dd;border-radius:10px;background:#fff;color:#314b70;padding:9px 13px;font:600 13px system-ui;cursor:pointer}
.jpb-job-tabs button[aria-selected="true"]{background:#174e86;border-color:#174e86;color:white}
.jpb-job-tabs span{margin-left:5px;font-size:11px;opacity:.85}
.jpb-contact-actions{display:inline-flex;gap:5px;justify-content:center;flex-wrap:wrap;margin:5px 0}
.jpb-contact-actions a{display:inline-flex;align-items:center;min-height:30px;padding:4px 8px;border:1px solid #bfd3e8;border-radius:7px;background:#f4f9ff;color:#165589;text-decoration:none;font:600 11px system-ui}
.jpb-contractor-edit{border:0;background:transparent;color:#124c7c;font:600 13px system-ui;text-align:left;padding:3px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.jpb-work-complete{display:flex;gap:5px;justify-content:center;align-items:center;font:11px system-ui;color:#314b70;margin-top:8px}
.jpb-work-complete input{width:16px!important;height:16px;min-height:0!important;margin:0;accent-color:#174e86}
#board .marker-cell .delivery-date{display:block!important;color:#405b70;font-size:10px;line-height:1.3;max-width:100%;padding:0 4px;overflow-wrap:anywhere}
.jpb-contact-actions a:focus-visible,.jpb-contractor-edit:focus-visible,.jpb-job-tabs button:focus-visible{outline:2px solid #007aff;outline-offset:2px}
@media(max-width:700px){.jpb-contact-actions a{min-height:40px}.jpb-work-complete{min-height:44px}.jpb-job-tabs{margin-bottom:4px}.mobile-markers .marker-date{display:block;width:100%;font-size:10px}}

/* Keep delivery dates directly below the centered icon, with actions beneath. */
#board .job-row>.marker-cell.resource-cell .delivery-date{position:absolute!important;top:calc(50% + 4px)!important;left:0!important;right:0!important;width:100%!important;transform:none!important;margin:0!important;text-align:center}
#board .job-row>.marker-cell.resource-cell>.resource-link{top:calc(50% + 22px)!important}
#board .job-row>.marker-cell.resource-cell{min-height:108px!important}

/* Job-15: stronger customer cards and detail dialogs on phones. */
.jpb-customer-address{display:none}
.card .customer-item,.card .record-search .search-record{border-left:4px solid #2783cb!important;background:linear-gradient(110deg,#edf6ff,#fff)!important;box-shadow:0 3px 12px #18345708}
.detail-panel .detail-grid>div{border-left:3px solid #5399d0!important;background:linear-gradient(115deg,#f0f7ff,#fff)!important}
.detail-panel .detail-grid>div:first-child{border-left-color:#1673b7!important;background:#e5f2ff!important}
.detail-panel .detail-grid>div:first-child strong{color:#124c7c;font-size:17px}
.record-form .formgrid{background:linear-gradient(135deg,#f4f9ff,#fff)!important;box-shadow:0 3px 15px #174e860b}
.record-form label{font-size:13px;letter-spacing:.015em;color:#254c70}
.record-form input,.record-form select{border-color:#9eb9d1!important;border-radius:10px!important;min-height:46px}
.record-form .form-section-title{background:linear-gradient(90deg,#d9ebfa,#edf5fc)!important;border-left-color:#1880c7!important;color:#164e7e!important;font-size:12px!important;padding:12px!important}
.card .customer-item strong,.card .record-search .search-record strong{font-weight:750!important;color:#124c7c!important}
@media(max-width:700px){
 #board .job-row .customer-cell{border:1px solid #b6cce2!important;border-left:4px solid #3a8dcc!important;background:linear-gradient(115deg,#eaf4ff,#fff 75%)!important;border-radius:14px!important;box-shadow:0 3px 10px #194e7a09;gap:6px}
 #board .job-row.alternate-row .customer-cell{background:linear-gradient(115deg,#dfedfc,#f5f9ff 80%)!important}
 #board .customer-expand{display:grid!important;grid-template-columns:minmax(0,1fr) 18px;gap:3px 7px!important;text-align:left!important;min-width:0;flex:1;padding:10px 4px 10px 7px!important}
 #board .customer-expand>span{display:flex;align-items:center;gap:8px;min-width:0;text-align:left!important;font-size:15px!important;font-weight:750!important;color:#124c7c!important;line-height:1.25}
 #board .customer-expand[data-initials]>span::before{content:attr(data-initials);display:none}
 #board .customer-expand[data-initials]::before{content:attr(data-initials);display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,#1d78b9,#164e86);color:white;font:750 12px system-ui;grid-column:1;grid-row:1 / span 2;box-shadow:0 2px 5px #164e8620}
 #board .customer-expand[data-initials]{grid-template-columns:34px minmax(0,1fr) 16px;column-gap:9px!important}
 #board .customer-expand[data-initials]>span{grid-column:2;grid-row:1;overflow-wrap:anywhere}
 #board .customer-expand[data-initials]>b{grid-column:3;grid-row:1 / span 2;align-self:center}
 #board .customer-expand .jpb-customer-address{display:block;grid-column:2;grid-row:2;font:10px/1.35 system-ui!important;color:#536e88!important;text-align:left;overflow-wrap:anywhere}
 #board .customer-cell .jpb-contact-actions{flex:none;gap:3px;margin:0}
 #board .customer-cell .jpb-contact-actions a{font-size:10px;padding:3px 6px;min-height:36px}
 #board .detail-panel{background:#eaf1f9!important;padding:12px!important;border-radius:0 0 14px 14px}
 #board .detail-grid>div{border-radius:12px!important;padding:14px!important;box-shadow:0 2px 7px #18345708}
 #board .detail-grid>div>small,#board .detail-grid>div>label{color:#47769c!important;font-size:10px!important;font-weight:750!important;letter-spacing:.08em}
 .modal .card:has(.record-form){border-radius:18px!important;padding:20px!important;background:#e8f1fa!important;border-color:#759bbd!important}
 .record-form h2{background:linear-gradient(110deg,#143d65,#1a6aa3)!important;font-size:23px!important;letter-spacing:-.02em;padding:20px 38px 20px 16px!important;box-shadow:0 4px 14px #163f6520}
 .record-form .formgrid{padding:15px!important;gap:17px!important}
 .record-form .form-actions{background:#e8f1fa!important}
 .record-form .form-hint,.record-form small{font-size:11px!important;line-height:1.45}
 .card .customer-item,.card .record-search .search-record{padding:15px!important;border-radius:12px!important}
}

@media(max-width:700px){
 #board .customer-expand,#board .customer-expand[data-initials]{display:flex!important;align-items:center!important;gap:9px!important;overflow:visible!important;width:auto!important}
 #board .customer-expand[data-initials]::before{flex:0 0 34px}
 #board .customer-expand>.jpb-customer-copy{display:block!important;flex:1;min-width:0!important;width:auto!important;overflow:visible!important;white-space:normal!important}
 #board .jpb-customer-copy strong{display:block!important;font:750 15px/1.3 system-ui!important;color:#124c7c!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
 #board .customer-expand .jpb-customer-address{display:block!important;margin-top:3px!important;font:10px/1.35 system-ui!important;white-space:normal!important}
 #board .customer-expand>b{flex:none}
 #board .customer-cell .jpb-contact-actions{flex-direction:column;gap:3px}
 #board .customer-cell .jpb-contact-actions a{min-height:30px!important}
}

/* Storage and legacy import belong in Settings only. */
.account-bar #legacyImport{display:none!important}

/* Job-17: compact consistent contact actions and clear selected view labels. */
.jpb-contact-actions{gap:6px;margin:6px 0;align-items:center}
.jpb-contact-actions a{justify-content:center;gap:5px;min-height:34px;padding:6px 9px;background:#f2f7fd;border:1px solid #b8cfe6;border-radius:8px;color:#1d5d90;line-height:1;box-shadow:none}
.jpb-contact-actions svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.jpb-contact-actions a:hover{background:#dceeff;border-color:#71a4cf}
#board .resource-line .jpb-contact-actions{justify-content:flex-start;margin:4px 0}
#board .customer-cell>.jpb-contact-actions{justify-content:center}
.job-view-actions button{display:inline-flex;align-items:center;gap:6px;max-width:min(46vw,300px);white-space:normal;text-align:left}
.job-view-actions .record-chevron{width:12px;height:12px;flex:none}
@media(max-width:700px){
 #board .customer-cell .jpb-contact-actions{flex-direction:row!important;gap:5px;margin:0 2px 0 3px}
 #board .customer-cell .jpb-contact-actions a{width:34px;height:36px;min-height:36px!important;padding:0!important;border-radius:9px}
 #board .customer-cell .jpb-contact-label{display:none}
 #board .customer-cell .jpb-contact-actions svg{width:16px;height:16px}
 #board .customer-expand,#board .customer-expand[data-initials]{padding:12px 3px 12px 5px!important;gap:7px!important}
 #board .customer-expand[data-initials]::before{width:30px;height:34px;flex-basis:30px}
 #board .jpb-customer-copy strong{font-size:14px!important}
 #board .customer-expand .jpb-customer-address{font-size:10px!important;line-height:1.4!important;margin-top:4px!important}
 .modal .jpb-contact-actions{gap:8px;margin:10px 0 14px}
 .modal .jpb-contact-actions a{min-height:40px;padding:9px 13px;font-size:12px}
}

/* Account identity and sign-out appear only in Settings. */
.account-bar{display:none!important}
.jpb-user-email{color:#164e7e;font-weight:650;overflow-wrap:anywhere}

/* Job-20: copyright and trademark notices. */
.jpb-legal p{margin:7px 0;line-height:1.5;font-size:11px;color:#526783}
.login-footer.jpb-legal{padding:0 8px;margin-top:20px}
.settings-section.jpb-legal{margin-top:18px}
.settings-section.jpb-legal h3{color:#164e7e}

/* Job-21: slightly stronger mobile navigation contrast. */
@media(max-width:760px){
 .main-nav{background:linear-gradient(145deg,#1d78b9,#164e86)!important;border-top:1px solid #478dbd!important;box-shadow:0 -3px 12px #164e8620!important}
 .main-nav .navbtn,.main-nav #settingsBtn,.main-nav #workflowFocusToggle{background:#f2f8fd!important;border:1px solid #98bbd9!important;color:#2c5d84!important;box-shadow:none}
 .main-nav .navbtn svg,.main-nav .nav-icon,.main-nav .chev,.main-nav .navbtn span{color:#2c5d84!important;stroke:#2c5d84!important}
 .main-nav .navbtn:hover,.main-nav .navbtn[aria-expanded="true"],.main-nav .navbtn[aria-pressed="true"]{background:#d6e8f7!important;border-color:#6e9dc3!important;color:#164d78!important}
 .main-nav .navbtn:focus-visible{outline:2px solid #3379af!important;outline-offset:2px}
}

/* Job-21: balanced mobile Status/Contractor grouping controls. */
/* WORK MODE: navigation lives inside the app wrapper, not directly under body. */
@media(max-width:760px){
 body.workflow-focus-mode #stormcoreApp > .main-nav,
 body.workflow-focus-mode #mobileQuickSearchPanel{display:none!important}
 body.workflow-focus-mode{padding-bottom:0!important}
}

@media(max-width:700px){
 .job-view-toolbar{gap:6px;margin:0 0 10px;padding:0;align-items:stretch}
 .job-view-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;width:100%;margin:0;flex:auto;min-width:0}
 .job-view-actions #statusViewButton,.job-view-actions #contractorViewButton{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;max-width:none;min-width:0;min-height:44px;margin:0;padding:10px 12px;border:1px solid #a5bfd8;border-radius:10px;background:#edf5fc;color:#285b83;font:600 12px/1.3 system-ui;box-sizing:border-box}
 .job-view-actions .jpb-view-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .job-view-actions .record-chevron{width:12px;height:12px;flex:none;stroke:#285b83}
 .job-view-actions #statusViewButton[aria-expanded="true"],.job-view-actions #contractorViewButton[aria-expanded="true"]{background:#d5e8f7;border-color:#6d9cc4}
 .job-view-actions #resetJobView{grid-column:1 / -1;justify-self:end;width:auto;max-width:none;min-height:34px;margin:0;padding:6px 10px;border-radius:8px;font-size:11px;justify-content:center}
 #jobViewSummary:not(:empty){font-size:11px;line-height:1.4;margin:0 0 2px}
}
/* FINAL03: readable blue text on both alternating board row backgrounds. */
#board .customer-cell:has(.customer-select option:checked:not([value=""])) .record-name,#board .mobile-job-controls .record-picker:has(.customer-select option:checked:not([value=""])) .record-name {color:#0054ba}
/* FINAL05: keep desktop/tablet navigation and its raised toolbar in view. */
html:not(.auth-locked),body:not(.auth-locked):not(.workflow-focus-mode){overflow-x:clip}
.quick-customer-search input,.mobile-quick-search-inner input{min-width:0;flex:1 1 0}
/* FINAL07: keep mobile search text at the same readable size as record inputs. */
@media(max-width:760px){.mobile-quick-search-inner input{font-size:16px}}
@media(min-width:761px){
 #stormcoreApp > .main-nav{position:sticky!important;top:76px!important;z-index:1000;background:#f4faff!important}
}

/* FINAL37: explicit destructive confirmation and consistent close controls. */
.modal .card .close,.modal:has(.record-form) .close{background:#edf5ff!important;color:#075fc7!important;border:1px solid #8bbcec!important;min-width:44px;min-height:44px}
.modal .card .close:hover,.modal .card .close:focus-visible{background:#dceeff!important;color:#064c9e!important;outline:2px solid #075fc7;outline-offset:2px}
.delete-confirm-form{padding:12px 4px 4px;color:#20364c}
.delete-confirm-form h2{padding-right:48px;margin:8px 0 16px}
.delete-eyebrow{font-size:11px;letter-spacing:.1em;font-weight:800;color:#587088}
.delete-target{padding:16px;background:#f0f5fa;border:1px solid #c7d6e5;border-radius:10px;font-weight:800;overflow-wrap:anywhere}
.delete-confirm-form label{display:block;font-size:14px;margin:20px 0 8px}
.delete-confirm-form input{box-sizing:border-box;width:100%;min-height:48px;font-size:16px}
.delete-confirm-form .form-actions{margin-top:24px;padding-top:18px;border-top:1px solid #c7d6e5;justify-content:flex-end;gap:12px}
.delete-confirm-form .form-actions button{margin:0;min-height:44px;padding:12px 18px;border-radius:10px;white-space:normal}
.delete-confirm-form .danger{background:#b42332;color:white;border:1px solid #981b29}
@media(max-width:420px){.delete-confirm-form .form-actions{display:grid;grid-template-columns:1fr}.delete-confirm-form .form-actions button{width:100%}}
.customer-roof-history{margin:20px 0;padding:16px;border:1px solid #b7c9dc;border-radius:10px;background:#f4f8fc}.customer-roof-history .customer-file-list{margin-top:12px}#roofHistoryForm label{display:block;margin:14px 0;font-weight:700}#roofHistoryForm input,#roofHistoryForm select{display:block;box-sizing:border-box;width:100%;min-height:44px;font-size:16px;margin-top:6px}#roofHistoryForm .form-actions button{min-height:44px;margin:0}

/* JPB-53 surgical customer contact actions */
.customer-list-card{display:flex;align-items:center;gap:10px;border-bottom:1px solid #d5e4f0;padding:6px 0}.customer-list-card .customer-item{flex:1;min-width:0}.customer-quick-actions{display:flex;flex-wrap:wrap;gap:6px}.customer-contact-link{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:8px 12px;border:1px solid #8caecb;border-radius:9px;background:#f1f8ff;color:#103c67;font-weight:700;text-decoration:none}.customer-contact-link:focus-visible{outline:3px solid #2166ab;outline-offset:2px}@media(max-width:520px){.customer-list-card{align-items:stretch;flex-direction:column}.customer-quick-actions{padding:0 8px 7px}.customer-contact-link{flex:1}}
#closeModal{background:#edf5ff;border:1px solid #8bbcec;border-radius:50%;color:#075fc7}#closeModal img{filter:none}

/* FINAL93: Approved dialog close button */
#modal #closeModal,
#modal .card .close,
#modal:has(.record-form) .close {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #b42318 !important;
}

#modal #closeModal:hover,
#modal #closeModal:focus-visible {
    background: #fff1f0 !important;
    outline: 2px solid #b42318;
    outline-offset: 2px;
}

#modal #closeModal img {
    filter: none !important;
}

/* FINAL93 COMPLETE DIALOG STANDARD */

#modal #closeModal {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer;
}

#modal #closeModal img {
    width: 36px;
    height: 36px;
    filter: none !important;
}

#modal #closeModal:hover,
#modal #closeModal:focus-visible {
    background: #fff1f0 !important;
    outline: 2px solid #b42318;
    outline-offset: 2px;
}

#modal .form-actions,
#modal .confirm,
#modal .module-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

#modal .form-actions > button,
#modal .confirm > button,
#modal .module-actions > button {
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    margin: 0;
}

#modal .delete-confirm-form .form-actions {
    justify-content: flex-end;
    margin-top: 22px;
}

#modal .delete-confirm-form .form-actions > button {
    min-width: 130px;
}

#modal .delete-confirm-form input {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    #modal .form-actions,
    #modal .confirm,
    #modal .module-actions {
        gap: 10px;
    }

    #modal .delete-confirm-form .form-actions > button {
        flex: 1 1 140px;
        min-width: 0;
    }
}

/* FINAL94 DELETE CONFIRMATION STATES */
#modal .delete-confirm-form #confirmDelete:disabled {
    opacity: .45;
    cursor: not-allowed;
}

#modal .delete-confirm-form #deleteConfirmText:focus-visible {
    outline: 2px solid #087dc3;
    outline-offset: 2px;
}