:root{
  --bg: #0b1220;
  --card: rgba(255,255,255,.04);
  --card2: rgba(255,255,255,.02);
  --text: #e9eefc;
  --muted: #a9b4d0;
  --border: rgba(255,255,255,.10);
  --focus: rgba(44,123,229,.35);
  --btn: #2c7be5;
  --btn2:#1f66c8;
  --danger: #ff6b6b;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 14px;
}

* { box-sizing: border-box; }

/* Generic show/hide toggle class (same convention as the local .hidden rule
   most other templates define inline) — missing here previously, so any
   element that relied on plain classList.toggle("hidden", ...) outside the
   handful of pre-existing compound/descendant .hidden selectors below
   (.iu-wrap .hidden, .modal-overlay.hidden, etc.) never actually hid. */
.hidden{ display: none !important; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(44,123,229,.18), transparent 60%),
    radial-gradient(900px 700px at 95% 45%, rgba(50,210,150,.10), transparent 55%),
    var(--bg);
}

.wrap{
  max-width: 980px;
  margin: 26px auto 70px;
  padding: 0 18px;
}

/* ── Full-viewport tool pages ──
   Use: <div class="wrap tool-page"> to get a full-height, wider layout
   instead of the narrow 980px form layout. The calendar fills the screen,
   panels scroll independently, and it adapts to mobile.
*/
.wrap.tool-page{
  max-width:1400px;margin:0 auto;padding:0;
  height:100vh;overflow:hidden;
  display:flex;flex-direction:column;
}
.wrap.tool-page .topbar{flex-shrink:0}
.wrap.tool-page .main{display:flex;flex:1;overflow:hidden;min-height:0}

/* Tool page — mobile: stack panels vertically */
@media(max-width:768px){
  .wrap.tool-page .main{flex-direction:column}
  .wrap.tool-page .main>.est-panel,
  .wrap.tool-page .main>[class*="-panel"]{
    width:100%!important;max-height:140px;
    border-right:none;border-bottom:1px solid var(--border);
    overflow-y:auto;flex-shrink:0;
  }
}
/* Tool page — tablet: narrower side panels */
@media(min-width:769px) and (max-width:1024px){
  .wrap.tool-page .main>.est-panel,
  .wrap.tool-page .main>[class*="-panel"]{width:180px!important}
}

.topbar{
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px 14px;
  margin-bottom: 16px;
}

.topbar h1{
  margin:0;
  font-size: 20px;
  letter-spacing: .2px;
}

.meta{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  color: var(--muted);
  font-size: 13px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(44,123,229,.15);
  border: 1px solid rgba(44,123,229,.30);
  color: var(--btn);
  font-weight: 600;
}

.field.full {
  grid-column: 1 / -1;
}

.card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card), var(--card2));
  box-shadow: var(--shadow);
  margin: 14px 0;
  overflow: visible;
}

.card-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.card-h .left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.icon{
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
  border-radius: 10px;
  background: rgba(44,123,229,.18);
  border: 1px solid rgba(44,123,229,.25);
  font-size: 18px;
  flex: 0 0 auto;
}

.htext{
  display:flex;
  flex-direction:column;
  gap: 2px;
  min-width: 0;
}

.htext .h1{
  font-weight: 750;
  font-size: 15px;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.htext .h2{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-b{
  padding: 14px 16px 16px;
}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}

@media (max-width: 780px){
  .grid{ grid-template-columns: 1fr; }
}

.field{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  border-radius: 12px;
  padding: 10px;
  min-width: 0;
}

.field-spaced{ margin-top: 14px; }

label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--text);
}

.req{
  color: var(--danger);
  font-size: 12px;
  font-weight: 800;
}

input[type="text"], input[type="number"], input[type="date"],
input[type="time"], input[type="tel"], textarea, select{
  width: 100%;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,16,30,.55);
  color: var(--text);
  padding: 10px 10px;
  outline: none;
  font-size: 14px;
  transition: box-shadow .15s ease, border-color .15s ease;
}

textarea{ min-height: 96px; resize: vertical; }

input:focus, textarea:focus, select:focus{
  border-color: rgba(44,123,229,.55);
  box-shadow: 0 0 0 4px var(--focus);
}

select{ background:#0a101e; }
select option{ background:#1e293b; color:#e2e8f0; }

/* input[type="time"] was missing from the rule above, so every time field in
   the portal rendered with the browser's default white box on the dark page.
   leave_request.html worked around it locally (.days-grid input[type="time"])
   rather than fixing it here; that override still wins where it applies.

   color-scheme is the other half: the parts the browser draws itself -- the
   AM/PM spinner and the clock picker glyph -- are dark by default and vanish
   against a dark field. It is set only on time inputs, not on the rule above,
   because date fields already have per-form handling further down and
   flipping them portal-wide is a separate change. */
input[type="time"]{ color-scheme: dark; }

.actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
  margin-top: 6px;
}

.btn{
  appearance:none;
  border:none;
  border-radius: 12px;
  padding: 12px 16px;
  background: var(--btn);
  color: white;
  font-weight: 800;
  cursor:pointer;
  box-shadow: 0 10px 20px rgba(44,123,229,.20);
}

.btn:hover{ background: var(--btn2); }

.btn-secondary{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:none;
  color: var(--text);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}

.btn-secondary:hover{ background: rgba(255,255,255,.12); }

.hint{
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}

.uploadbox{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
}

.uploadbox .t1{ font-weight: 800; }
.uploadbox .t2{ color: var(--muted); font-size: 13px; margin-top: 2px; }

/* SOW buttons */
[data-add-item], [data-del-area], [data-del-item], [data-dup-item], [data-add-area-scope]{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  cursor:pointer;
}
[data-add-item]:hover, [data-del-area]:hover, [data-del-item]:hover, [data-dup-item]:hover, [data-add-area-scope]:hover{
  background: rgba(255,255,255,.10);
}

/* Multi-scope SOW controls */
#sow_tpl_picker{ min-width:200px; }
#btn_add_scope{
  border:1px solid rgba(44,123,229,.3);
  background:rgba(44,123,229,.15);
  color: var(--text);
  border-radius:10px;
  padding:8px 14px;
  cursor:pointer;
  font-weight:700;
}
#btn_add_scope:hover{ background:rgba(44,123,229,.25); }

.sow-scope-block{
  border:2px solid rgba(44,123,229,.25);
  padding:14px;
  border-radius:14px;
  margin:14px 0;
  background:rgba(44,123,229,.04);
}
.sow-remove-scope{
  border:1px solid rgba(255,60,60,.3);
  background:rgba(255,60,60,.1);
  color:#ff6b6b;
  border-radius:10px;
  padding:6px 12px;
  cursor:pointer;
  font-size:13px;
}
.sow-remove-scope:hover{ background:rgba(255,60,60,.2); }

/* When qty is disabled (NO_QTY_SURFACES selected), make it look intentionally disabled */
input[disabled]{
  opacity: .55;
  cursor: not-allowed;
}

/* Revision banner */
.revision-banner{
  background: rgba(44,123,229,.12);
  border: 1px solid rgba(44,123,229,.35);
  color: #93c5fd;
  padding: 14px 16px;
  border-radius: var(--radius);
  margin-bottom: 14px;
  line-height: 1.45;
  font-weight: 600;
}

/* Server-side validation errors */
.error-banner{
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.35);
  color: #fca5a5;
  padding: 14px 16px;
  border-radius: var(--radius);
  margin-bottom: 14px;
  line-height: 1.45;
}
.error-banner strong{ color: #ff6b6b; }
.error-banner ul{ margin: 6px 0 0; padding-left: 18px; }

.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  border-color: rgba(239,68,68,.6);
  box-shadow: 0 0 0 3px rgba(239,68,68,.15);
}
.field-error{
  color: #fca5a5;
  font-size: 12px;
  margin-top: 4px;
}

/* Supplemental / Property Damage builder rows — missing required field
   highlighting on submit (DUP5.txt #1/#2 "highlight the missing fields"). */
.builder-invalid{
  border-color: rgba(239,68,68,.6) !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.15);
}

/* Multi-select dropdown */
.ms-wrap{
  position: relative;
}

.ms-trigger{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,16,30,.55);
  color: var(--text);
  cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.ms-trigger:focus,
.ms-wrap.open .ms-trigger{
  border-color: rgba(44,123,229,.55);
  box-shadow: 0 0 0 4px var(--focus);
}

.ms-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.ms-placeholder{
  color: var(--muted);
  font-size: 14px;
}

.ms-chip{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(44,123,229,.22);
  border: 1px solid rgba(44,123,229,.30);
  font-size: 12px;
  white-space: nowrap;
}

.ms-chip-x{
  cursor: pointer;
  opacity: .7;
  font-size: 14px;
  line-height: 1;
}
.ms-chip-x:hover{ opacity: 1; }

.ms-arrow{
  flex-shrink: 0;
  font-size: 12px;
  color: var(--muted);
  transition: transform .15s ease;
}
.ms-wrap.open .ms-arrow{ transform: rotate(180deg); }

.ms-dropdown{
  display: none;
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.15);
  background: #111827;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}

.ms-wrap.open .ms-dropdown{ display: block; }

.ms-option{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background .1s ease;
  margin-bottom: 0;
  justify-content: flex-start;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.ms-option:last-child{ border-bottom: none; }
.ms-option:hover{ background: rgba(255,255,255,.06); }

.ms-option input[type="checkbox"]{
  width: 16px;
  height: 16px;
  accent-color: var(--btn);
  flex-shrink: 0;
}

/* External select (searchable single-select dropdown) */
.es-wrap{ position: relative; }

.es-trigger{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,16,30,.55);
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.es-trigger:focus,
.es-wrap.open .es-trigger{
  border-color: rgba(44,123,229,.55);
  box-shadow: 0 0 0 4px var(--focus);
}

.es-selected{
  color: var(--muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.es-selected.has-value{ color: var(--text); }

.es-arrow{
  flex-shrink: 0;
  font-size: 12px;
  color: var(--muted);
  transition: transform .15s ease;
}
.es-wrap.open .es-arrow{ transform: rotate(180deg); }

/* Locked by a form variant: looks like a filled select, cannot be opened */
.es-trigger.es-fixed{ cursor: default; opacity: .8; }
.es-trigger.es-fixed .es-arrow{ font-size: 13px; }

.es-dropdown{
  display: none;
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.15);
  background: #111827;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  overflow: hidden;
}

.es-wrap.open .es-dropdown{ display: block; }

.es-search-box{
  padding: 8px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.es-search{
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,16,30,.55);
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.es-search::placeholder{ color: var(--muted); }
.es-search:focus{
  border-color: rgba(44,123,229,.55);
}

.es-options{
  max-height: 220px;
  overflow-y: auto;
}

.es-option{
  padding: 9px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background .1s ease;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.es-option:last-child{ border-bottom: none; }
.es-option:hover{ background: rgba(255,255,255,.06); }
.es-option.selected{ background: rgba(44,123,229,.15); }

/* Bid link ("this project came from a bid") — commercial intake variant only.
   The picker itself is .es-* above, reused whole; only the toggle, the hint
   and the two-line option need anything of their own. */
.bid-link-toggle{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.bid-link-toggle input[type="checkbox"]{
  width: 16px;
  height: 16px;
  accent-color: var(--btn);
  flex-shrink: 0;
  margin: 0;
}
.bid-link-hint{
  margin: 6px 0 12px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.bid-link-note{
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.bid-link-empty{
  padding: 10px 12px;
  font-size: 13px;
  color: var(--muted);
}
.bid-link-empty.is-err{ color: var(--danger); }
/* A bid name alone is often ambiguous — two phases of one project read almost
   identically — so every option carries its id, project and institution. */
.es-option .bid-opt-name{ display: block; color: var(--text); }
.es-option .bid-opt-sub{
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
}

/* Add-new option inside external_select dropdown */
.es-add-new{
  padding: 6px 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.es-add-btn{
  background: none; border: none; color: var(--accent,#7c5cff);
  font-size: 13px; cursor: pointer; padding: 6px 0; width: 100%; text-align: left;
}
.es-add-btn:hover{ text-decoration: underline; }
.es-add-form{
  display: flex; gap: 6px; align-items: center;
}
.es-add-input{
  flex: 1; padding: 6px 8px; font-size: 13px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px; color: #fff; outline: none;
}
.es-add-input:focus{ border-color: var(--accent,#7c5cff); }
.es-add-confirm{
  background: var(--accent,#7c5cff); color: #fff; border: none;
  padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer;
}
.es-add-confirm:hover{ opacity: .85; }
.es-add-cancel{
  background: none; border: none; color: var(--muted,#9ca3af);
  font-size: 12px; cursor: pointer;
}
.es-add-cancel:hover{ text-decoration: underline; }

/* Text combo: freely-typeable input + styled suggestions dropdown
   (like external_select, but keeps the value directly editable — for
   fields where a custom, not-yet-listed value must remain typeable). */
.combo-field{ position: relative; }

.combo-dropdown{
  display: none;
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.15);
  background: #111827;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  overflow: hidden;
}
.combo-field.open .combo-dropdown{ display: block; }

.combo-options{
  max-height: 220px;
  overflow-y: auto;
}

.combo-option{
  padding: 9px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background .1s ease;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.combo-option:last-child{ border-bottom: none; }
.combo-option:hover, .combo-option.combo-highlighted{ background: rgba(255,255,255,.06); }

/* Google Places Autocomplete dark theme */
.pac-container{
  background: #111827;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  font-family: inherit;
  margin-top: 4px;
  z-index: 60;
}

.pac-item{
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: #e9eefc;
  padding: 9px 12px;
  cursor: pointer;
  line-height: 1.4;
  font-size: 13px;
}

.pac-item:hover,
.pac-item-selected{
  background: rgba(255,255,255,.06);
}

.pac-icon{ display: none; }
.pac-item-query{ color: #e9eefc; font-weight: 600; }
.pac-matched{ font-weight: 700; color: var(--btn); }

/* Fixed affix glued to an input (config: prefix_label), e.g. the "+1" on the
   estimate-approval phone. Decorative only: it is not part of the submitted
   value, so the field's pattern rejects a typed "+1" and the estimator enters
   ten digits. Distinct from .prefix-input-wrap below, which is a SELECT whose
   choice becomes part of the value. */
.input-affix-wrap{
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.input-affix{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-right: none;
  border-radius: 10px 0 0 10px;
  background: rgba(255,255,255,.06);
  color: var(--muted);
  font-size: 14px;
  user-select: none;
  white-space: nowrap;
}
/* The input keeps every other property from the base rule; only the seam
   between the two is squared off. */
.input-affix-wrap input{
  border-radius: 0 10px 10px 0;
  min-width: 0;
}

/* Prefix + Input combo */
.prefix-input-wrap{
  display: flex; gap: 8px; align-items: center;
}
.prefix-input-wrap select.prefix-select{
  flex: 0 0 auto; width: auto; min-width: 110px; max-width: 140px;
}
.prefix-input-wrap input.prefix-value{
  flex: 1 1 auto; width: auto; min-width: 60px;
}

/* Side-by-side location panels (intersection + medical) */
.location-panels{
  display: flex; gap: 12px; margin-top: 10px;
}
@media (max-width: 700px){
  .location-panels{ flex-direction: column; }
}

/* Nearest Intersection panel */
.ni-panel{
  flex: 1;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  padding: 12px;
  overflow: hidden;
}
.ni-header{
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); margin-bottom: 6px;
}
.ni-text{
  font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px;
}
.ni-map{
  width: 100%; height: auto;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.08);
}

/* Nearest Medical Provider panel */
.mp-panel{
  flex: 1;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  padding: 12px;
  overflow: hidden;
}
.mp-header{
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); margin-bottom: 8px;
}
.mp-provider{
  margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mp-provider:last-child{ margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.mp-provider .mp-specialty{
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--accent); margin-bottom: 3px;
}
.mp-provider .mp-name{
  font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px;
}
.mp-provider .mp-addr{
  font-size: 12px; color: var(--muted); line-height: 1.3;
}
.mp-provider .mp-phone{
  font-size: 12px; color: var(--accent); text-decoration: none;
}
.mp-provider .mp-phone:hover{ text-decoration: underline; }
.mp-provider .mp-dist{
  font-size: 11px; color: var(--muted); margin-top: 2px;
}

/* Datetime row (input + Now button) */
.dt-row{display:flex;gap:8px;align-items:center}
.dt-row input{flex:1;min-width:0}
.btn-now{padding:8px 14px;font-size:13px;font-weight:700;background:rgba(44,123,229,.12);color:var(--btn);border:1px solid rgba(44,123,229,.3);border-radius:var(--radius);cursor:pointer;white-space:nowrap;font-family:inherit;line-height:1.4}
.btn-now:hover{background:rgba(44,123,229,.22)}
.dt-tz{font-size:12px;font-weight:600;opacity:.7;white-space:nowrap}
.dt-tz-warning{margin-top:6px;padding:8px 10px;font-size:12px;line-height:1.4;color:#fcd34d;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.4);border-radius:var(--radius)}

/* Flatpickr dark theme overrides */
.flatpickr-calendar{
  background: #111827 !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.5) !important;
  font-family: inherit !important;
}
.flatpickr-months,
.flatpickr-weekdays{
  background: transparent !important;
}
.flatpickr-months .flatpickr-month{
  color: #e9eefc !important;
  fill: #e9eefc !important;
}
span.flatpickr-weekday{
  color: var(--muted) !important;
  font-weight: 600 !important;
}
.flatpickr-day{
  color: #e9eefc !important;
  border-radius: 8px !important;
}
.flatpickr-day:hover{
  background: rgba(255,255,255,.08) !important;
  border-color: transparent !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover{
  background: var(--btn) !important;
  border-color: var(--btn) !important;
  color: #fff !important;
}
.flatpickr-day.today{
  border-color: var(--btn) !important;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{
  color: rgba(255,255,255,.25) !important;
}
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months{
  color: #e9eefc !important;
  background: transparent !important;
}
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm{
  color: #e9eefc !important;
  background: rgba(255,255,255,.05) !important;
  border: none !important;
  border-radius: 6px !important;
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover{
  background: rgba(255,255,255,.1) !important;
}
.flatpickr-time .flatpickr-time-separator{
  color: var(--muted) !important;
}
.numInputWrapper span{
  border: none !important;
}
.numInputWrapper span svg path{
  fill: rgba(255,255,255,.5) !important;
}
.numInputWrapper span:hover svg path{
  fill: #e9eefc !important;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg{
  fill: #e9eefc !important;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg{
  fill: var(--btn) !important;
}

/* Inline upload */
.iu-wrap{ width: 100%; }
.iu-wrap .hidden{ display: none !important; }
.iu-dropzone{
  border: 2px dashed rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.iu-dropzone:hover{
  border-color: var(--btn);
  background: rgba(44,123,229,.06);
}
.iu-placeholder{
  color: var(--muted);
  font-size: 13px;
}
.iu-hint{
  color: var(--muted);
  font-size: 11px;
  opacity: .6;
  margin-top: 4px;
}
.iu-dragover{
  border-color: var(--btn) !important;
  background: rgba(44,123,229,.1) !important;
}
.iu-wrap:focus{ outline: none; }
.iu-file{ display: none; }
.iu-preview{
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 10px 14px;
}
.iu-thumb{
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  background: rgba(0,0,0,.3);
}
.iu-info{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.iu-name{
  font-size: 13px;
  color: #e9eefc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.iu-remove{
  background: rgba(255,60,60,.15);
  color: #ff6b6b;
  border: none;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.iu-remove:hover{ background: rgba(255,60,60,.3); }
.iu-progress{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
}
.iu-bar{
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,.08);
  border-radius: 3px;
  overflow: hidden;
}
.iu-fill{
  height: 100%;
  width: 0;
  background: var(--btn);
  border-radius: 3px;
  transition: width .3s;
}
.iu-pct{
  font-size: 12px;
  color: var(--muted);
  min-width: 36px;
  text-align: right;
}
.iu-error{
  color: #ff6b6b;
  font-size: 12px;
  margin-top: 6px;
  padding: 8px 12px;
  background: rgba(255,60,60,.08);
  border-radius: 8px;
}

/* Non-blocking "already uploaded, skipped" notice under the file list */
.iu-notice{
  color: #fbbf24;
  font-size: 12px;
  margin-bottom: 8px;
  padding: 8px 12px;
  background: rgba(251,191,36,.1);
  border-radius: 8px;
}

/* Multi-file upload items */
.iu-file-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.iu-file-item{
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 8px 12px;
}
.iu-file-thumb{
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  background: rgba(0,0,0,.3);
}
.iu-file-icon{
  font-size: 24px;
  width: 40px;
  text-align: center;
}
.iu-file-name{
  flex: 1;
  font-size: 12px;
  color: #e9eefc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.iu-file-remove{
  background: rgba(255,60,60,.15);
  color: #ff6b6b;
  border: none;
  border-radius: 6px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.iu-file-remove:hover{ background: rgba(255,60,60,.3); }
.iu-multi .iu-dropzone{
  padding: 16px 12px;
}

/* Per-file uploading/failed status rows (DUP6.txt #4 — concurrent uploads
   with independent per-photo Uploading/Uploaded/Failed state + retry). */
.iu-file-status{
  font-size: 11px;
  color: var(--muted, #888);
  flex-shrink: 0;
}
.iu-file-uploading .iu-file-icon{ opacity: .7; }
.iu-file-error{
  border-color: rgba(239,68,68,.4);
  background: rgba(239,68,68,.08);
}
.iu-file-retry{
  background: rgba(59,130,246,.15);
  color: #93c5fd;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.iu-file-retry:hover{ background: rgba(59,130,246,.3); }

/* QR Mobile Upload */
.iu-phone-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;margin-top:8px;padding:10px 14px;
  border:1px dashed rgba(255,255,255,.15);border-radius:10px;
  background:rgba(255,255,255,.03);color:var(--muted);
  font-size:12px;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.iu-phone-btn:hover{background:rgba(44,123,229,.06);border-color:rgba(44,123,229,.3);color:var(--text)}
.qr-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9999;
  display:flex;align-items:center;justify-content:center;
}
.qr-modal{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:28px 24px;max-width:340px;width:90%;text-align:center;
}
.qr-modal h3{margin:0 0 6px;font-size:16px;color:var(--text)}
.qr-modal .qr-sub{font-size:12px;color:var(--muted);margin-bottom:18px}
.qr-canvas{margin:0 auto 16px;border-radius:10px;overflow:hidden;display:inline-block;border:4px solid #e9eefc}
.qr-status{font-size:13px;color:var(--muted);margin-top:4px;display:flex;align-items:center;justify-content:center;gap:6px}
.qr-dot{width:8px;height:8px;border-radius:50%;background:#38bdf8;animation:qrPulse 1.5s infinite}
@keyframes qrPulse{0%,100%{opacity:.3}50%{opacity:1}}
.qr-timer{font-size:11px;color:var(--muted);margin-top:6px}
.qr-cancel{margin-top:16px;padding:8px 20px;border:1px solid var(--border);border-radius:8px;
  background:transparent;color:var(--text);font-size:13px;cursor:pointer}
.qr-cancel:hover{background:rgba(255,255,255,.05)}
.qr-done{color:#4ade80;font-size:14px;font-weight:700;margin-top:8px}

/* Result page */
.result-icon{
  font-size: 48px;
  margin-bottom: 8px;
}

.result-title{
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 4px;
}

.result-sub{
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 18px;
}

.result-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 10px 12px;
  margin-top: 16px;
}

.data-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.data-row{
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  font-size: 13px;
  line-height: 1.4;
}

.data-row .dk{
  color: var(--muted);
  min-width: 140px;
  flex-shrink: 0;
  font-weight: 600;
}

.data-row .dv{
  word-break: break-word;
}

/* Estimate cards */
.est-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
  transition: border-color .2s;
}
.est-card:hover{ border-color: rgba(255,255,255,.18); }

.est-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.est-code{
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--btn);
}
.est-badge{
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 4px 10px;
  border-radius: 6px;
}
.est-approved{
  background: rgba(34,197,94,.15);
  color: #22c55e;
}
.est-pending{
  background: rgba(255,255,255,.08);
  color: var(--muted);
}

.est-body{ margin-bottom: 14px; }
.est-row{
  display: flex;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
  line-height: 1.5;
}
.est-label{
  color: var(--muted);
  min-width: 90px;
  flex-shrink: 0;
  font-weight: 600;
}
.est-value{ word-break: break-word; }
.est-amount{ font-weight: 700; font-size: 14px; }

.est-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-sm{
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 8px;
}
.btn-approve{
  background: rgba(34,197,94,.15);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,.3);
}
.btn-approve:hover{
  background: rgba(34,197,94,.25);
}
.btn-danger{
  background: rgba(255,60,60,.12);
  color: #ff6b6b;
  border: 1px solid rgba(255,60,60,.25);
}
.btn-danger:hover{
  background: rgba(255,60,60,.22);
}

.est-history-panel{
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.est-history-panel.hidden{ display: none; }

.est-history-list{ display: flex; flex-direction: column; gap: 6px; }
.est-history-item{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,.03);
}
.est-history-icon{ font-size: 14px; flex-shrink: 0; }
.est-history-text{ flex: 1; }
.est-history-date{ color: var(--muted); flex-shrink: 0; }

/* Modal overlay */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.hidden{ display: none; }

.modal-box{
  background: #111827;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0,0,0,.6);
  width: 100%;
  max-width: 420px;
  overflow: visible;
}

.modal-title{
  font-size: 16px;
  font-weight: 750;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.modal-body{
  padding: 16px 18px;
}

.modal-actions{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,.10);
}

/* Scope of Work Update modal — DUP6.txt #1/#2: content must scroll inside
   the modal itself (never the page behind it), with many photos selected,
   on both desktop and mobile touch. Scoped by ID rather than changing the
   shared .modal-box/.modal-overlay rules above, since form.css is reused
   by many unrelated modals across the app (ar_dashboard, control_dashboard,
   etc.) that must keep their current layout untouched. */
#scopeProgressModal .modal-box{
  display: flex;
  flex-direction: column;
  max-height: min(600px, calc(100vh - 40px));
  overflow: hidden;
}
#scopeProgressModal .modal-title,
#scopeProgressModal .modal-actions{
  flex-shrink: 0;
}
#scopeProgressModal .modal-body{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 0;
}

/* Company search (new company mode) */
.cs-new-mode{
  display: flex;
  gap: 8px;
  align-items: center;
}
.cs-new-input{
  flex: 1;
}
.cs-back-btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--muted);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.cs-back-btn:hover{
  background: rgba(255,255,255,.10);
  color: var(--text);
}

/* ── SDR Builder styles ──────────────────────────────────────────────── */

/* Card header right actions */
.card-h .right{ flex-shrink: 0; }

/* Small variant for builder dropdowns */
.es-wrap-sm .es-trigger{ min-height: 34px; padding: 6px 10px; font-size: 13px; }

/* Empty state */
.sdr-empty{
  color: var(--muted);
  font-size: 13px;
  padding: 8px 0;
  text-align: center;
}

/* Crew builder */
.crew-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.crew-row:last-of-type{ border-bottom: none; }
.crew-name{ flex: 1; min-width: 0; }
.crew-hours{ width: 80px; flex-shrink: 0; }
.crew-hours input{
  width: 100%;
  text-align: center;
  padding: 6px 8px;
  font-size: 13px;
}

/* Bag count (BagCount.txt) — label left, narrow right-aligned number input,
   same row shape as .crew-row/.crew-hours above but kept as its own class
   set since the two are unrelated domains. */
.sdr-bagcount-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sdr-bagcount-row:last-of-type{ border-bottom: none; }
.sdr-bagcount-label{ flex: 1; min-width: 0; }
.sdr-bagcount-input{ width: 80px; flex-shrink: 0; }
.sdr-bagcount-input input{
  width: 100%;
  text-align: right;
  padding: 6px 8px;
  font-size: 13px;
}

/* OT total bar */
.ot-total-bar{
  padding: 12px 20px;
  font-size: 14px;
  color: var(--text);
  text-align: right;
  border-top: 1px solid var(--border);
  background: rgba(44,123,229,.06);
  border-radius: 0 0 12px 12px;
}
.ot-total-bar strong{
  color: var(--btn);
  font-size: 15px;
}

/* OT dashboard cards */
.ot-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 12px;
}
.ot-card-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.ot-card-header .ot-project{
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}
.ot-card-header .ot-meta{
  font-size: 12px;
  color: var(--muted);
}
.ot-badge{
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.ot-badge-pending{ background: rgba(245,158,11,.15); color: #f59e0b; }
.ot-badge-approved{ background: rgba(34,197,94,.15); color: #22c55e; }
.ot-badge-rejected{ background: rgba(239,68,68,.15); color: #ef4444; }
.ot-detail-row{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--muted);
}
.ot-detail-row strong{ color: var(--text); }
.ot-emp-list{
  font-size: 13px;
  color: var(--text);
  margin: 8px 0;
}
.ot-justification{
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0;
  padding: 8px 12px;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  border-left: 3px solid var(--btn);
}
.ot-actions{
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.ot-history{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.ot-event{
  font-size: 12px;
  color: var(--muted);
  padding: 4px 0;
}
.ot-event strong{ color: var(--text); }
.ot-empty{
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 14px;
}

/* Icon buttons */
.btn-icon{
  appearance: none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--muted);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 14px;
}
.btn-icon:hover{ background: rgba(255,255,255,.10); color: var(--text); }
.btn-icon.btn-remove{ border-color: rgba(255,60,60,.2); color: #ff6b6b; background: rgba(255,60,60,.08); }
.btn-icon.btn-remove:hover{ background: rgba(255,60,60,.18); }
.btn-icon.btn-remove-sm{ width: 26px; height: 26px; font-size: 12px; }

/* Small buttons */
.btn-xs{
  appearance: none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
}
.btn-xs:hover{ background: rgba(255,255,255,.10); }

/* Area builder */
.area-block{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  background: rgba(255,255,255,.02);
}

.area-header{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.area-name-input{
  flex: 1;
  font-weight: 700;
  font-size: 14px;
}

.area-item-row{
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.item-task{ flex: 2; min-width: 0; font-size: 13px; }
.item-pct{ width: 75px; flex-shrink: 0; font-size: 13px; padding: 8px 6px; }
.item-material{ flex: 1; min-width: 0; font-size: 13px; }

.area-actions{
  margin-top: 8px;
}

/* Photos */
.area-photos{ margin-top: 10px; }
.photo-upload-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.photo-upload-label{ cursor: pointer; }
.photo-count{ font-size: 12px; color: var(--muted); }

.photo-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.photo-thumb{
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
}
.photo-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-remove{
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0,0,0,.65);
  color: #ff6b6b;
  border: none;
  border-radius: 4px;
  width: 20px;
  height: 20px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-remove:hover{ background: rgba(255,60,60,.4); }

.photo-grid-sm .photo-thumb{ width: 52px; height: 52px; }
.photo-thumb-sm .photo-remove{ width: 16px; height: 16px; font-size: 10px; }

/* Photo button in supp items */
.photo-btn{
  cursor: pointer;
  font-size: 16px;
  border-color: rgba(44,123,229,.25);
  color: var(--btn);
}
.photo-btn:hover{ background: rgba(44,123,229,.12); }

/* Supplemental builder */
.supp-block{
  border: 2px solid rgba(44,123,229,.2);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  background: rgba(44,123,229,.03);
}

.supp-header{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.supp-name-input{
  flex: 1;
  font-weight: 700;
  font-size: 14px;
}

.supp-area{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  background: rgba(255,255,255,.02);
}

.supp-area-header{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.supp-area-name{
  flex: 1;
  font-weight: 600;
  font-size: 13px;
}

/* Supplemental item — two-row layout */
.supp-item-block{
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
  background: rgba(255,255,255,.02);
}

.si-row-top{
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.si-row-top .si-desc{
  flex: 1;
  min-width: 0;
  font-size: 13px;
  resize: vertical;
  min-height: 80px;
}
.si-top-actions{
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.si-row-bottom{
  display: flex;
  gap: 6px;
  align-items: center;
}
.si-row-bottom input[type="text"],
.si-row-bottom input[type="number"],
.si-row-bottom select{ width: auto; padding: 6px 8px; height: 32px; font-size: 13px; box-sizing: border-box; }
input[type="text"].si-mat{ flex: 1; min-width: 60px; width: auto; }
input[type="number"].si-qty{ width: 72px; flex: 0 0 72px; text-align: center; }
select.si-unit{ width: 72px; flex: 0 0 72px; }

.supp-area-actions, .supp-actions{ margin-top: 8px; }

/* Documentation upload button (prominent, full-width) */
.doc-upload-btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin-top: 10px;
  padding: 16px 12px;
  border: 2px dashed rgba(59,130,246,.5);
  border-radius: 10px;
  background: rgba(59,130,246,.06);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  text-align: center;
}
.doc-upload-btn:hover, .doc-upload-btn:focus-within{
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.8);
}
.doc-upload-icon{ font-size: 28px; line-height: 1; }
.doc-upload-text{
  font-size: 15px;
  font-weight: 600;
  color: #93c5fd;
}
.doc-upload-hint{
  font-size: 12px;
  color: #f87171;
  font-weight: 500;
}
.doc-upload-count{
  text-align: center;
  font-size: 13px;
  color: #22c55e;
  margin-top: 6px;
  font-weight: 500;
}
.doc-upload-btn-sm{
  padding: 12px 10px;
  margin-top: 8px;
}
.doc-upload-btn-sm .doc-upload-icon{ font-size: 22px; }
.doc-upload-btn-sm .doc-upload-text{ font-size: 13px; }
.doc-upload-btn-sm .doc-upload-hint{ font-size: 11px; }

/* Previously Reported Property Damages — compact expandable list */
.prev-damage-row{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(255,255,255,.02);
}
.prev-damage-summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.prev-damage-name{ font-size: 13px; font-weight: 600; color: var(--text); }
.prev-damage-details{ margin-top: 10px; font-size: 13px; color: var(--muted); }
.prev-damage-details.hidden{ display: none; }
.prev-damage-details p{ margin: 0 0 8px; }

/* Project Stage checkboxes (still used by the production Superintendent
   Daily Report — templates/sdr_form.html; removed from the Dev TEST form
   by DailyUpdateAfterRev1.txt, but this shared stylesheet's rule stays). */
.stage-checkboxes{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.stage-check{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  font-size: 13px;
  margin-bottom: 0;
  transition: background .15s, border-color .15s;
}
.stage-check:hover{ background: rgba(255,255,255,.06); }
.stage-check input[type="checkbox"]{
  width: 16px;
  height: 16px;
  accent-color: var(--btn);
  margin: 0;
}
.stage-check input:checked + span{ color: var(--btn); font-weight: 700; }

/* Clearance Request > Clearance Type — a two-row segmented selector (not
   the flex-wrap .stage-checkboxes above): row 1 is Asbestos/Lead/Mold in 3
   equal sections, row 2 is Air Samples/Visual in 2 equal sections (JS keeps
   those mutually exclusive, see clearance-request-builder.js). Asbestos and
   the whole second row share the same subtle gray tint because the Air
   Samples/Visual method applies to Asbestos (Lead/Mold never pair with
   Visual) — a visual cue only, no selection/validation logic lives here. */
.cr-type-selector{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  overflow: hidden;
}
.cr-type-row{ display: flex; }
.cr-type-row + .cr-type-row{ border-top: 1px solid rgba(255,255,255,.12); }
.cr-type-cell{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 0;
  transition: background .15s;
}
.cr-type-cell:not(:last-child){ border-right: 1px solid rgba(255,255,255,.12); }
.cr-type-cell:hover{ background: rgba(255,255,255,.05); }
.cr-type-cell input[type="checkbox"]{
  width: 16px;
  height: 16px;
  accent-color: var(--btn);
  margin: 0;
  flex-shrink: 0;
}
.cr-type-cell input:checked + span{ color: var(--btn); font-weight: 700; }
.cr-type-cell-tinted,
.cr-type-row-tinted .cr-type-cell{ background: rgba(148,163,184,.10); }
.cr-type-cell-tinted:hover,
.cr-type-row-tinted .cr-type-cell:hover{ background: rgba(148,163,184,.16); }

@media (max-width: 480px){
  .cr-type-cell{ padding: 10px 4px; gap: 4px; font-size: 12.5px; }
}

/* Clearance Request > "Areas to be tested" checkboxes from the project's
   Scope of Work — a single-column list, checkbox then name, left-aligned
   (overrides the global label's space-between); same checkbox look as
   .cr-type-cell. Long names wrap under themselves, not under the box. */
.cr-area-list{
  display: flex; flex-direction: column;
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius);
  overflow: hidden;
}
.cr-area-item{
  display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px;
  margin: 0; padding: 11px 14px; text-align: left; line-height: 1.35;
  cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.06);
}
.cr-area-item:last-child{ border-bottom: none; }
.cr-area-item:hover{ background: rgba(255,255,255,.05); }
.cr-area-item input[type="checkbox"]{
  width: 16px; height: 16px; accent-color: var(--btn); margin: 1px 0 0; flex-shrink: 0;
}
.cr-area-item span{ min-width: 0; overflow-wrap: anywhere; }
.cr-area-item input:checked + span{ color: var(--btn); font-weight: 700; }
@media (max-width: 480px){
  /* Bigger touch targets on phones. */
  .cr-area-item{ padding: 13px 12px; gap: 12px; font-size: 14px; }
  .cr-area-item input[type="checkbox"]{ width: 18px; height: 18px; margin-top: 0; }
}

/* Clearance Request > per-material testing method row (Asbestos/Mold only,
   never Lead) — the label makes clear which material the row underneath
   belongs to; the row itself reuses .cr-type-selector/.cr-type-row/
   .cr-type-cell (same 2-cell segmented control, just one row instead of
   the old combined 2-row selector). */
.cr-method-label{
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px;
}

/* PM Daily Control Center > Upload Results popup ------------------------ */

/* Auto-populated project fields — two columns on desktop, stacked on
   mobile. Uses the portal's existing .field styling for each input. */
.cr-results-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px){
  .cr-results-grid{ grid-template-columns: 1fr; }
}

/* One row per tracked clearance type — material name (+ inherited method,
   never re-selected here) beside a Passed/Failed toggle. Reuses
   .cr-type-selector/.cr-type-row/.cr-type-cell (same segmented-control
   shape as Clearance Type), with green/red states instead of the neutral
   one. */
.cr-result-row{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.cr-result-row:last-of-type{ border-bottom: none; }
.cr-result-row-head{ flex: 1 1 140px; min-width: 120px; display: flex; align-items: baseline; gap: 6px; }
.cr-result-material{ font-weight: 700; font-size: 14px; }
.cr-result-method-tag{ font-size: 12px; color: var(--muted); }
.cr-result-selector{ flex: 0 0 auto; width: 220px; max-width: 100%; }
.cr-result-cell.cr-result-cell-checked.cr-result-passed{ background: rgba(74,222,128,.14); }
.cr-result-cell.cr-result-cell-checked.cr-result-passed span{ color: #4ade80; font-weight: 800; }
.cr-result-cell.cr-result-cell-checked.cr-result-failed{ background: rgba(248,113,113,.14); }
.cr-result-cell.cr-result-cell-checked.cr-result-failed span{ color: #f87171; font-weight: 800; }

/* A resolved clearance type is a locked, non-interactive badge instead of
   the Passed/Failed toggle — same footprint (.cr-result-selector's width)
   so the row doesn't reflow between locked/unlocked states. */
.cr-result-locked{
  flex: 0 0 auto; width: 220px; max-width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 8px; border-radius: var(--radius);
  font-weight: 800; font-size: 13px; letter-spacing: .3px;
  border: 1px solid rgba(255,255,255,.12); cursor: help;
}
.cr-result-locked.cr-result-passed{ background: rgba(74,222,128,.14); color: #4ade80; }
.cr-result-locked.cr-result-failed{ background: rgba(248,113,113,.14); color: #f87171; }

.cr-complete-notice{
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: rgba(148,163,184,.12); color: var(--muted);
  font-size: 12.5px; line-height: 1.5;
}

@media (max-width: 560px){
  .cr-result-row{ flex-direction: column; align-items: stretch; }
  .cr-result-selector, .cr-result-locked{ width: 100%; }
}

/* "+ Add Clearance Type" — intentionally a plain text-style link/button
   (secondary, low-emphasis) rather than a filled .btn, since it's meant to
   be used rarely. */
.cr-add-type-btn{
  background: none; border: none; color: var(--btn); font-size: 12.5px;
  font-weight: 700; cursor: pointer; padding: 6px 0; margin-top: 4px;
}
.cr-add-type-btn:hover{ color: #6ea8f0; text-decoration: underline; }
.cr-add-type-menu{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.cr-add-type-option{
  padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.04); font-size: 13px; cursor: pointer; color: var(--text);
}
.cr-add-type-option:hover{ background: rgba(255,255,255,.08); }

/* End date friendly label */
.end-date-friendly{
  font-size: 14px;
  font-weight: 700;
  color: var(--btn);
  margin-bottom: 6px;
}

/* Estimated End Date change history (Progress Details card, ST Daily
   Report Dev TEST) — the field itself now shows the latest submitted date
   directly, so there's no separate "Previous Estimated End Date" reminder. */
.end-date-history{
  list-style: disc;
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--muted);
}
.end-date-history li{ margin-bottom: 4px; }

/* Without appearance:none, the browser renders the native OS date-picker
   widget (day/month/year segments sized by the OS, not by CSS), which
   ignores the width/box-sizing rules every other input follows and can
   render wider than its box on some mobile browsers. Resetting appearance
   makes it lay out exactly like a text input; the calendar icon is then
   redrawn as an invisible full-box overlay below so the whole field stays
   clickable.

   Scoped to the Safety & QC forms (the mobile date-field overflow this was
   written for) plus ST Daily Report (Dev TEST) — DailyUpdateDUP2.txt hit the
   same Report Date overflow there and reuses this exact fix — rather than
   every input[type="date"] in the portal. Also applied to the Complementary
   ST Daily Report form (ComplimUpdate2.txt #1 — its Report Date field hit
   the identical overflow, being outside #sdrForm). */
#safetyQcForm input[type="date"],
#qcRequestForm input[type="date"],
#mandaysReviewForm input[type="date"],
#discrepancyIssuesForm input[type="date"],
#patForm input[type="date"],
#writeupForm input[type="date"],
#sdrForm input[type="date"],
#complementaryFormContainer input[type="date"]{
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
#safetyQcForm input[type="date"]::-webkit-calendar-picker-indicator,
#qcRequestForm input[type="date"]::-webkit-calendar-picker-indicator,
#mandaysReviewForm input[type="date"]::-webkit-calendar-picker-indicator,
#discrepancyIssuesForm input[type="date"]::-webkit-calendar-picker-indicator,
#patForm input[type="date"]::-webkit-calendar-picker-indicator,
#writeupForm input[type="date"]::-webkit-calendar-picker-indicator,
#sdrForm input[type="date"]::-webkit-calendar-picker-indicator,
#complementaryFormContainer input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:0; position:absolute; inset:0; width:100%; cursor:pointer;
}

/* "Daily Update Already Submitted" choice modal (ComplimUpdate2.txt #3) —
   both buttons full-width, stacked, and centered. .btn-secondary's
   inline-flex layout (used elsewhere for icon+text buttons) left-aligns
   its label without an explicit justify-content, which is what made
   "Submit New Report" look off-center here; fix scoped to this modal only
   so every other .btn-secondary in the portal is untouched. */
#dailyChoiceModal .modal-actions{
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
#dailyChoiceModal .modal-actions .btn{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Actions card (submit button) */
.actions-card{
  text-align: center;
  padding: 16px 0;
}

/* Gallery */
.gallery-day{ margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.gallery-day:last-child{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.gallery-day-header{
  font-size: 14px; font-weight: 600; color: #93c5fd;
  margin-bottom: 14px; padding: 8px 12px;
  background: rgba(59,130,246,.08); border-radius: 8px;
}
.gallery-section{ margin-bottom: 20px; }
.gallery-section:last-child{ margin-bottom: 0; }
.gallery-section-title{ font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.gallery-grid{ display: flex; flex-wrap: wrap; gap: 8px; }
.gallery-thumb{
  display: block; width: 120px; height: 120px;
  border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  cursor: pointer; transition: opacity .15s;
}
.gallery-thumb:hover{ opacity: .8; }
.gallery-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* Lightbox */
.lightbox{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.92);
  display: none; align-items: center; justify-content: center;
  z-index: 9999; cursor: pointer;
}
.lightbox.active{ display: flex; }
/* Hide all by default, show via class toggle. .show-video (ComplimUpdate2.txt
   #4/#5) is for plain blob-URL videos (Final Video / Additional Media, now
   uploaded via the same .iu-wrap system as photos) — distinct from
   .show-mux, which is for Mux-hosted videos (Supplementals) elsewhere. */
.lightbox img, .lightbox mux-player, .lightbox video{ display: none; }
.lightbox.show-img img{ display: block; }
.lightbox.show-mux mux-player{ display: block; }
.lightbox.show-video video{ display: block; }
.lightbox img{
  max-width: 92vw; max-height: 92vh;
  border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.lightbox mux-player{
  width: 92vw; height: 80vh;
  max-width: 920px; max-height: 80vh;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.lightbox video{
  max-width: 92vw; max-height: 92vh;
  border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.lightbox .lb-close{
  position: absolute; top: 12px; right: 12px;
  font-size: 28px; background: rgba(0,0,0,.6); color: #fff;
  border: none; border-radius: 50%; width: 44px; height: 44px;
  cursor: pointer; z-index: 1;
  display: flex; align-items: center; justify-content: center;
}
.lightbox .lb-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 42px; background: rgba(0,0,0,.5); color: #fff;
  border: none; border-radius: 12px; padding: 8px 14px;
  cursor: pointer; z-index: 1;
}
.lightbox .lb-prev{ left: 16px; }
.lightbox .lb-next{ right: 16px; }
@media (max-width: 600px){
  .lightbox .lb-nav{ font-size: 32px; padding: 6px 10px; }
  .lightbox .lb-prev{ left: 8px; }
  .lightbox .lb-next{ right: 8px; }
}

/* Video badge (play icon on thumbnails) */
.video-thumb{ position: relative; }
.video-badge{
  position: absolute; bottom: 4px; left: 4px;
  background: rgba(0,0,0,.7); color: #fff;
  font-size: 10px; padding: 2px 6px;
  border-radius: 4px; pointer-events: none;
}

/* Upload placeholder (spinner while uploading) */
.upload-placeholder{
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(44,123,229,.1);
  border: 1px dashed rgba(44,123,229,.4);
}
.upload-spinner{
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,.15);
  border-top-color: var(--btn);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.upload-label{
  font-size: 9px; color: var(--muted);
  margin-top: 4px; text-align: center;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ── Superintendent Dashboard ─────────────────────────── */
.dash-stage-section{ margin-bottom: 28px; }
.dash-stage-header{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; margin-bottom: 14px;
  border-left: 4px solid #6b7280;
  background: rgba(255,255,255,.03); border-radius: 0 8px 8px 0;
}
.dash-stage-label{ font-size: 16px; font-weight: 700; color: var(--text); }
.dash-stage-count{
  font-size: 12px; font-weight: 600; color: var(--muted);
  background: rgba(255,255,255,.08); padding: 2px 8px; border-radius: 10px;
}
.dash-stage-empty{ color: var(--muted); font-size: 13px; padding: 0 16px; }
.dash-cards-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.dash-project-card{
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color .15s;
}
.dash-project-card:hover{ border-color: rgba(255,255,255,.22); }
.dash-card-top{ display: flex; flex-direction: column; gap: 6px; flex: 1; }
.dash-card-name{ font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3; }
.dash-card-address{ font-size: 13px; color: var(--muted); line-height: 1.3; }
.dash-badge{
  display: inline-block; width: fit-content;
  font-size: 11px; font-weight: 700; color: #fff;
  padding: 3px 10px; border-radius: 12px; margin-top: 4px;
  text-transform: uppercase; letter-spacing: .3px;
}
.dash-card-btn{
  display: block; text-align: center;
  padding: 10px 16px; border-radius: 8px;
  background: var(--btn); color: #fff;
  font-size: 14px; font-weight: 600;
  text-decoration: none; transition: background .15s;
}
.dash-card-btn:hover{ background: var(--btn2); }
.dash-card-btns{ display: flex; gap: 8px; }
.dash-card-btns .dash-card-btn{ flex: 1; font-size: 13px; padding: 9px 10px; }
.dash-btn-live{
  background: rgba(99,102,241,.15) !important; color: #818cf8 !important;
  border: 1px solid rgba(99,102,241,.3);
}
.dash-btn-live:hover{ background: rgba(99,102,241,.25) !important; }

/* ── Searchable dropdown ──────────────────────────────── */
.search-select{ position: relative; }
.search-dropdown{
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  margin-top: 4px; max-height: 240px; overflow-y: auto;
  background: #1a2332; border: 1px solid var(--border);
  border-radius: 10px; z-index: 50;
  box-shadow: var(--shadow);
}
.search-dropdown.open{ display: block; }
.search-dropdown-item{
  padding: 10px 14px; font-size: 14px; color: var(--text);
  cursor: pointer; transition: background .1s;
}
.search-dropdown-item:hover{ background: rgba(44,123,229,.15); }
.search-dropdown-item:first-child{ border-radius: 10px 10px 0 0; }
.search-dropdown-item:last-child{ border-radius: 0 0 10px 10px; }

/* User bar (auth) */
.user-bar{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  font-size: 13px;
  color: var(--muted);
}
.user-bar a{
  color: var(--btn);
  text-decoration: none;
  font-size: 12px;
}
.user-bar a:hover{ text-decoration: underline; }

/* Scope of Work checklist (Superintendent Daily Report — Dev TEST) */
.scope-item-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--text);
}
.scope-item-row.scope-item-done{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.35);
}
.scope-item-text{
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
}
.scope-item-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.scope-more-wrap{
  position: relative;
  /* Inline-block so this wrap is only as wide as the "More Options" button
     itself (DUP_imp2.txt #2) — as a full-width block, .scope-dropdown's
     right:0 anchor was flush with the popup's right edge instead of the
     button, making it appear far to the right of where it was opened. */
  display: inline-block;
}
.scope-dropdown{
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: #111827;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  z-index: 20;
  min-width: 160px;
  max-height: 240px;
  overflow-y: auto;
}
/* Flip upward when there isn't enough room below the button in the
   viewport (DUP_imp2.txt #2) — toggled by sdr-test-builder.js. */
.scope-dropdown.scope-dropdown-up{
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 4px;
}
.scope-dropdown-item{
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}
.scope-dropdown-item:hover{ background: rgba(255,255,255,.08); }

.scope-item-row.scope-item-red{
  background: rgba(255,80,80,.16);
  border-color: rgba(255,80,80,.4);
}

/* "In Progress" line-item state (orange), and its button — matches the
   green .scope-item-done / .btn-approve pairing used for Completed. */
.scope-item-row.scope-item-inprogress{
  background: rgba(245,158,11,.16);
  border-color: rgba(245,158,11,.4);
}
.btn-warning{
  background: rgba(245,158,11,.15);
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,.3);
}
.btn-warning:hover{
  background: rgba(245,158,11,.25);
}

/* Permanent Project Summary card — always the first card in the Scope of
   Work list (see scopeSummaryCardHtml in sdr-test-builder.js). Same box as
   a normal .scope-item-row, darker gray than a plain line item so it reads
   as a project-level header rather than a line item; not clickable, no
   actions. */
.scope-item-row.scope-summary-row{
  background: #d1d5db;
  border-color: #9ca3af;
  color: #111827;
}
.scope-summary-stats{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
/* Desktop only (DailyUpdateDUP3.txt) — center the remaining 3 metrics
   instead of leaving them left-aligned with empty space on the right.
   Mobile keeps its current left-aligned wrap, untouched. */
@media (min-width: 601px){
  .scope-summary-stats{
    justify-content: center;
  }
}
.scope-summary-stat{ white-space: nowrap; }
.scope-summary-label{ color: #4b5563; margin-right: 4px; }
.scope-item-text-plain{
  color: var(--muted);
  font-style: italic;
}

/* AREA-based checklist (DailyUpdateDUP1.txt) */
.scope-sow-block{
  margin-bottom: 20px;
}
.scope-sow-block:last-child{
  margin-bottom: 0;
}
.scope-sow-title{
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin: 4px 0 10px;
}
.scope-sow-version{
  text-transform: none;
  font-weight: 500;
  letter-spacing: normal;
}
.scope-area-block{
  margin-bottom: 8px;
  border-radius: 10px;
  overflow: hidden;
}
.scope-area-header{
  margin-bottom: 0;
  border-radius: 0;
}
.scope-area-items{
  list-style: disc;
  margin: 0;
  padding: 8px 14px 10px 42px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-top: none;
  font-size: 13px;
  color: var(--muted);
}
.scope-area-item-line{
  padding: 2px 0;
}
/* Task completion %, shown next to the Area name once set (DUP_imp1.txt #1) */
.scope-area-pct{
  font-weight: 500;
  color: var(--muted);
}
/* "Update needed today" badge — Areas that were In Progress before today
   and still haven't received a valid update (DUP_imp3.txt). Same orange
   accent as .scope-item-inprogress/.btn-warning, just as inline text next
   to the Area name rather than recoloring the whole row. */
.scope-area-needs-update{
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #f59e0b;
}
/* Reused inside the Update popup's "View last update" panel below. */
.scope-area-note{
  margin: 0 0 8px;
  color: var(--text);
  white-space: pre-wrap;
}

/* Update popup — "Line items worked today" (DUP_imp1.txt #2) */
.scope-items-worked-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
  padding: 8px 10px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.scope-items-worked-row{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.scope-items-worked-row input[type="checkbox"]{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.scope-items-worked-empty{
  font-size: 13px;
  color: var(--muted);
}

/* Update popup — "No progress has been recorded today" (DUP_imp3.txt), only
   shown for an Area that currently needs a daily update. Same
   checkbox+label shape as .scope-items-worked-row above. */
.scope-no-progress-label{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.scope-no-progress-label input[type="checkbox"]{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Update popup — "View last update" on-demand panel (DailyUpdateDUP3.txt) */
.scope-last-update-panel{
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
}
.scope-last-update-label{
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted);
  margin-bottom: 6px;
}

/* Smaller Update button on mobile — the Area header row was too crowded
   (DailyUpdateDUP2.txt; DailyUpdateDUP3.txt reduced this to a single
   button, but the same mobile sizing still applies). Scoped to the Scope
   of Work actions specifically, not .btn-sm everywhere else in the portal;
   desktop sizing is untouched. */
@media (max-width: 600px){
  .scope-item-actions .btn-sm{
    padding: 5px 8px;
    font-size: 11px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Management Dashboard / PM Daily Control Center — shared .mgmt-* table,
   badge, progress-bar, modal, and MD Used popup styling (PR2_Fixes.txt #9:
   these two independent-by-design dashboards — see pm_daily_control_center.py's
   module docstring — never shared data/state, but their markup was built by
   copying one template into the other, so ~95% of each file's <style> block
   was byte-for-byte identical. Consolidated here since both already load
   form.css; each template's own <style> block now holds only what's
   genuinely unique to it (Management Dashboard's Reviewed checkbox; PM
   Daily Control Center's PM filter, Float MD toggle, and Pend. Doc.
   badges), plus each page's own `.wrap` max-width, which — like several
   other unrelated tool pages — is a per-page layout choice, not shared
   component styling.
   ═══════════════════════════════════════════════════════════════════════ */

/* Tabs */
.mgmt-tabs { display:flex; gap:0; margin-bottom:16px; border-bottom:2px solid var(--border); }
.mgmt-tab { padding:10px 22px; font-size:14px; font-weight:600; color:var(--muted); cursor:pointer;
            border-bottom:3px solid transparent; margin-bottom:-2px; transition:color .15s, border-color .15s; }
.mgmt-tab:hover { color:var(--text); }
.mgmt-tab.active { color:#38bdf8; border-bottom-color:#38bdf8; }
.mgmt-tab-content { display:none; }
.mgmt-tab-content.active { display:block; }

/* Toolbar: search + filters */
.mgmt-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.mgmt-search { flex:1; min-width:220px; max-width:340px; }
.mgmt-search input { width:100%; }
.mgmt-count { font-size:13px; color:var(--muted); white-space:nowrap; margin-left:auto; }
.mgmt-filters-note { font-size:11px; color:var(--muted); }
/* Real toolbar filters (Overtime tab, OT1.txt) — Date/Status/Reviewer/Branch.
   Shared here (not the per-dashboard <style> block) since any future
   dashboard tab that needs a real server-side filter row can reuse these. */
.mgmt-filter-group { display:flex; align-items:center; gap:6px; }
.mgmt-filter-label { font-size:12px; color:var(--muted); white-space:nowrap; }
.mgmt-filter-input {
  padding:7px 10px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:13px;
}
.mgmt-legend { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); white-space:nowrap; }
.mgmt-legend-dot { width:10px; height:10px; border-radius:3px; flex:none; display:inline-block; }
.mgmt-legend-dot.blue { background:#38bdf8; }

.mgmt-table-footnote { margin:8px 2px 0; font-size:11px; line-height:1.4; color:var(--muted);
                       font-style:italic; max-width:100%; word-wrap:break-word; }

/* Table — page scrolls, header stays put */
.mgmt-table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:10px; }
.mgmt-table { width:100%; border-collapse:collapse; font-size:13px; min-width:1000px; }
.mgmt-table th { text-align:left; padding:11px 12px; background:#0f172a; border-bottom:1px solid var(--border);
                 font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.3px;
                 position:sticky; top:0; z-index:2; white-space:nowrap; }
.mgmt-table th[data-sort] { cursor:pointer; user-select:none; }
.mgmt-table th[data-sort]:hover { color:var(--text); }
.mgmt-table th .sort-arrow { font-size:9px; margin-left:3px; opacity:.7; }
.mgmt-table td { padding:11px 12px; border-bottom:1px solid rgba(255,255,255,.06); vertical-align:top; color:var(--text); }
.mgmt-table tbody tr:hover { background:rgba(255,255,255,.03); }
.mgmt-table tr:last-child td { border-bottom:none; }
.mgmt-table tbody tr[data-key] { cursor:pointer; }
.mgmt-amt { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.mgmt-note-cell { max-width:320px; white-space:normal; word-break:break-word; color:var(--muted); font-size:12.5px; }
.mgmt-muted { color:var(--muted); font-style:italic; font-size:12px; }
#safetyTable.mgmt-table { min-width:1050px; }
#notesTable.mgmt-table { min-width:760px; }

/* Completion % progress bar — purple track (darker) + fill (lighter) */
.mgmt-progress { display:flex; align-items:center; gap:8px; min-width:120px; }
.mgmt-progress-track { flex:1; height:8px; border-radius:6px; background:rgba(168,85,247,.15); overflow:hidden; }
.mgmt-progress-fill { height:100%; border-radius:6px; background:#c084fc; }
.mgmt-progress-label { font-size:12px; color:var(--text); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Theo. Comp. % progress bar — same shape as Completion %, cyan instead of purple */
.mgmt-progress-track.mgmt-theo-track { background:rgba(34,211,238,.15); }
.mgmt-progress-fill.mgmt-theo-fill { background:#22d3ee; }

/* Hazard badges */
.mgmt-hazards { display:flex; flex-wrap:wrap; gap:4px; max-width:220px; }
.mgmt-hazard { display:inline-block; padding:2px 8px; border-radius:8px; font-size:10.5px; font-weight:600;
               background:rgba(251,146,60,.15); color:#fb923c; white-space:nowrap; }

/* Requested Inspection badges — same chip shape as Safety Hazard, colored by reason */
.mgmt-requests { display:flex; flex-wrap:wrap; gap:4px; max-width:220px; }
.mgmt-request-badge { display:inline-block; padding:2px 8px; border-radius:8px; font-size:10.5px; font-weight:600;
                      white-space:nowrap; }
.mgmt-request-badge.mgmt-request-safety    { background:rgba(248,113,113,.15); color:#f87171; }
.mgmt-request-badge.mgmt-request-execution { background:rgba(244,114,182,.15); color:#f472b6; }
.mgmt-request-badge.mgmt-request-mandays   { background:rgba(56,189,248,.15);  color:#38bdf8; }

/* Inspection Performed badges — same chip shape, colored by team */
.mgmt-inspections { display:flex; flex-wrap:wrap; gap:4px; max-width:220px; }
.mgmt-inspection-badge { display:inline-block; padding:2px 8px; border-radius:8px; font-size:10.5px; font-weight:600;
                         white-space:nowrap; }
.mgmt-inspection-badge.mgmt-inspection-sqc { background:rgba(34,197,94,.15); color:#22c55e; }
.mgmt-inspection-badge.mgmt-inspection-ops { background:rgba(251,146,60,.15); color:#fb923c; }

/* Safety table — subtle risk tint by hazard count (text color untouched) */
#safetyTable tbody tr.mgmt-risk-0 td { background:rgba(74,222,128,.05); }
#safetyTable tbody tr.mgmt-risk-0:hover td { background:rgba(74,222,128,.09); }
#safetyTable tbody tr.mgmt-risk-1 td { background:rgba(251,191,36,.06); }
#safetyTable tbody tr.mgmt-risk-1:hover td { background:rgba(251,191,36,.1); }
#safetyTable tbody tr.mgmt-risk-2 td { background:rgba(248,113,113,.06); }
#safetyTable tbody tr.mgmt-risk-2:hover td { background:rgba(248,113,113,.1); }
/* A reminder due today still wins over the risk tint (same #safetyTable
   specificity, declared last) — it's the more urgent signal. */
#safetyTable tbody tr.mgmt-row-due td { background:rgba(251,191,36,.06); }
#safetyTable tbody tr.mgmt-row-due:hover td { background:rgba(251,191,36,.1); }

/* Execution table — subtle celeste tint for high-value projects (>= $10,000) */
#execTable tbody tr.mgmt-row-high-amount td { background:rgba(56,189,248,.07); }
#execTable tbody tr.mgmt-row-high-amount:hover td { background:rgba(56,189,248,.12); }

/* Reminder indicator (Execution/Safety) + due-today badge (Notes) */
.mgmt-reminder-icon { margin-left:5px; font-size:12px; cursor:help; }
.mgmt-due-badge { display:inline-block; margin-left:8px; padding:2px 9px; border-radius:8px;
                  font-size:10px; font-weight:700; letter-spacing:.2px; white-space:nowrap;
                  background:rgba(251,191,36,.18); color:#fbbf24; }
.mgmt-table tbody tr.mgmt-row-due td { background:rgba(251,191,36,.06); }
.mgmt-table tbody tr.mgmt-row-due:hover td { background:rgba(251,191,36,.1); }

/* Status badge (Execution) — On Track green / Review orange / Off Track red /
   Data Error grey (status couldn't be computed — see db.get_management_todays_projects) */
.mgmt-status-badge { display:inline-block; padding:3px 10px; border-radius:8px; font-size:11px; font-weight:700;
                     white-space:nowrap; }
.mgmt-status-badge.mgmt-status-ontrack   { background:rgba(74,222,128,.15); color:#4ade80; }
.mgmt-status-badge.mgmt-status-review    { background:rgba(251,146,60,.15);  color:#fb923c; }
.mgmt-status-badge.mgmt-status-offtrack  { background:rgba(248,113,113,.15); color:#f87171; }
.mgmt-status-badge.mgmt-status-dataerror { background:rgba(148,163,184,.15); color:#94a3b8; }
.mgmt-status-badge.mgmt-status-pending   { background:rgba(148,163,184,.15); color:#94a3b8; }

/* Clickable column header (Status help popup) */
.mgmt-clickable-header { cursor:pointer; text-decoration:underline dotted; }
.mgmt-clickable-header:hover { color:var(--text); }

/* Status Logic help modal */
.mgmt-status-help p { margin:0 0 10px; font-size:13px; line-height:1.5; color:var(--text); }
.mgmt-status-help p strong { color:var(--text); }
.mgmt-status-help ul { margin:0 0 14px; padding-left:20px; font-size:13px; line-height:1.6; color:var(--text); }
.mgmt-status-help p.mgmt-status-help-note { color:var(--muted); font-size:12.5px; font-style:italic; }
.mgmt-status-help p.mgmt-status-help-note:last-child { margin-bottom:0; }

/* Slack channel button — same look as the Scheduling tab's Slack button */
.mgmt-slack-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:6px;
                  font-size:11px; background:rgba(74,21,75,.18); color:#e01e5a; border:1px solid rgba(224,30,90,.2);
                  text-decoration:none; font-weight:600; white-space:nowrap; }
.mgmt-slack-btn:hover { background:rgba(74,21,75,.32); }

/* Loading skeleton */
.mgmt-skel { display:inline-block; height:12px; width:100%; border-radius:4px; background:rgba(255,255,255,.08);
             position:relative; overflow:hidden; }
.mgmt-skel::after { content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation: mgmt-shimmer 1.2s infinite; }
@keyframes mgmt-shimmer { 100% { transform:translateX(100%); } }

.mgmt-empty { text-align:center; padding:44px 20px; color:var(--muted); font-size:14px; }
.mgmt-error { text-align:center; padding:36px 20px; color:#f87171; font-size:13px; }
.mgmt-error .btn { margin-top:10px; }

@media (max-width: 780px){
  .mgmt-toolbar { flex-direction:column; align-items:stretch; }
  .mgmt-count { margin-left:0; }
}

/* Project details modal */
.mgmt-modal-overlay { position:fixed; inset:0; background:rgba(5,10,20,.65); z-index:1000;
                      display:none; align-items:center; justify-content:center; padding:20px; }
.mgmt-modal-overlay.open { display:flex; }
.mgmt-modal { position:relative; width:100%; max-width:480px; max-height:90vh; overflow-y:auto;
             background:#151b2b; border:1px solid var(--border);
             border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 22px 18px; }
.mgmt-modal-close { position:absolute; top:14px; right:14px; width:28px; height:28px; border:none;
                   border-radius:8px; background:rgba(255,255,255,.08); color:var(--text);
                   font-size:18px; line-height:1; cursor:pointer; }
.mgmt-modal-close:hover { background:rgba(255,255,255,.14); }
.mgmt-modal-title { margin:0 34px 18px 0; font-size:17px; font-weight:750; }
.mgmt-modal-section { margin-bottom:16px; }
.mgmt-modal-section label { display:block; font-size:12px; color:var(--muted); text-transform:uppercase;
                            letter-spacing:.3px; margin-bottom:6px; }
.mgmt-modal-reminder-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.mgmt-modal-reminder-row input[type="date"] { flex:1; min-width:150px; }
.mgmt-modal-reminder-confirm { margin-top:8px; font-size:12px; color:#4ade80; }
.mgmt-modal-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:6px; }
.mgmt-modal-status { font-size:12px; color:var(--muted); }
.mgmt-modal-status.error { color:#f87171; }

@media (max-width: 480px){
  .mgmt-modal { padding:18px 16px 16px; }
}

/* MD Used cell + breakdown modal */
.mgmt-mdused-btn { background:none; border:none; padding:0; margin:0; color:inherit; font:inherit;
                   text-decoration:underline dotted; cursor:pointer; }
.mgmt-mdused-btn:hover { color:#38bdf8; }
.mgmt-mdused-total { display:flex; justify-content:space-between; gap:12px; padding:10px 0 0;
                     margin-top:6px; border-top:2px solid var(--border); font-weight:700; font-size:13.5px; }
.mgmt-mdused-empty, .mgmt-mdused-loading { color:var(--muted); font-size:13px; font-style:italic; padding:8px 0; }

/* MD Used popup — per-employee drill-down (click an employee row to expand) */
.mgmt-mdused-emp-toggle { display:flex; width:100%; background:none; border:none; padding:7px 0;
                          border-bottom:1px solid rgba(255,255,255,.06); font:inherit; color:inherit;
                          cursor:pointer; text-align:left; }
.mgmt-mdused-emp:last-child .mgmt-mdused-emp-toggle { border-bottom:none; }
.mgmt-mdused-emp-toggle:hover { color:#38bdf8; }
.mgmt-mdused-emp-toggle span:first-child { flex:1; text-decoration:underline dotted; }
.mgmt-mdused-detail { padding:2px 0 8px 14px; }
.mgmt-mdused-detail-row { display:flex; justify-content:space-between; gap:12px; padding:4px 0;
                          font-size:12px; color:var(--muted); }
.mgmt-mdused-detail-empty { font-size:12px; color:var(--muted); font-style:italic; padding:4px 0; }

/* Checklist tool (Superintendents + Project Compliance shared submodule) —
   checklist.html / checklist-builder.js, plus the read-only Checklist tab
   and "Assign to Checklist" picker in Project Summary. */
/* Config card (Checklist Type selector + progress) — Checklist2.txt #2:
   gray so it visually reads as configuration, distinct from item cards. */
.chk-config-card .card-b{
  background: rgba(255,255,255,.035);
  border-radius: 10px;
}
.chk-type-select{
  width: auto;
  min-width: 260px;
}
.chk-progress-wrap{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.chk-copy-pending-btn{ flex-shrink: 0; white-space: nowrap; margin-left: auto; }
.chk-progress-track{
  flex: 1;
  height: 10px;
  border-radius: 6px;
  background: var(--card2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.chk-progress-fill{
  height: 100%;
  background: rgba(34,197,94,.65);
  transition: width .2s ease;
}
.chk-progress-label{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

/* Checklist2.txt #3/#4: three large containers — Project Checklist, Safety
   Checklist, Paperwork — each with its own subtle background tint so users
   can immediately tell where one ends and the next begins. */
.chk-container{
  border-radius: 14px;
  padding: 18px 16px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
}
.chk-container-project{ background: rgba(59,130,246,.05); }
.chk-container-safety{ background: rgba(245,158,11,.06); }
.chk-container-paperwork{ background: rgba(148,163,184,.06); }
.chk-container-title{
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.chk-subgroup-title{
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted);
  margin: 14px 0 6px;
}
.chk-subgroup-title:first-of-type{ margin-top: 0; }

.chk-item-row{
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--text);
}
.chk-item-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.chk-item-text{ flex: 1; min-width: 200px; font-size: 14px; line-height: 1.4; }

/* Checklist2.txt #5: the item number is visually emphasized as a badge,
   distinct from the description text next to it. */
.chk-item-key{
  display: inline-block;
  font-weight: 700;
  font-size: 12px;
  background: rgba(59,130,246,.15);
  color: #93c5fd;
  border-radius: 6px;
  padding: 2px 7px;
  margin-right: 8px;
  vertical-align: middle;
}

/* Checklist2.txt #7: polished, tappable, with clear hover/active states;
   wraps to its own row on narrow screens instead of squeezing (flex-wrap
   on .chk-item-head above handles the wrap itself). */
.chk-complete-btn{
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.chk-complete-btn:hover{ background: rgba(255,255,255,.08); }
.chk-complete-btn:active{ transform: scale(.97); }
.scope-item-done .chk-complete-btn{
  border-color: rgba(34,197,94,.5);
  color: #22c55e;
  background: rgba(34,197,94,.1);
}
.scope-item-done .chk-complete-btn:hover{ background: rgba(34,197,94,.18); }

/* The two per-item buttons (Mark as Completed / Mark as N/A) stack vertically
   on the right of the item head, same width/size as each other — flex-wrap
   on .chk-item-head still handles wrapping the whole group to its own row
   on narrow screens. */
.chk-item-actions{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  flex-shrink: 0;
}

/* Mark as N/A — same size as Mark as Completed (there's room for both to sit
   stacked at full size), just a quieter color so it still reads as the
   secondary action. Only rendered for "(if applicable)" items (item.if_applicable). */
.chk-na-btn{
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.chk-na-btn:hover{ background: rgba(255,255,255,.06); color: var(--text); }
.chk-na-btn:active{ transform: scale(.97); }
.chk-na-btn.chk-na-active{
  border-color: rgba(217,119,6,.5);
  color: #f2b53c;
  background: rgba(217,119,6,.12);
}
.chk-na-btn.chk-na-active:hover{ background: rgba(217,119,6,.2); }

/* Badge next to the item key when status is N/A — distinct amber color so
   Completed (green) / N/A (amber) / Incomplete (default) stay visually
   unambiguous at a glance. */
.chk-na-badge{
  display: inline-block;
  font-weight: 700;
  font-size: 11px;
  background: rgba(217,119,6,.15);
  color: #f2b53c;
  border-radius: 6px;
  padding: 2px 7px;
  margin-left: 6px;
  vertical-align: middle;
  cursor: help;
}

/* Item row tint for N/A, parallel to .scope-item-done's green tint but amber
   so the two compliant-but-different states never look identical. */
.chk-item-row.chk-item-row-na{
  border-color: rgba(217,119,6,.35);
  background: rgba(217,119,6,.05);
}

.chk-item-body{ margin-top: 10px; }
.chk-media-hint{
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--muted);
  margin-bottom: 6px;
}
.chk-upload-row{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chk-upload-btn{
  width: auto;
  flex: 0 0 auto;
  margin-top: 0;
  padding: 8px 12px;
  flex-direction: row;
  gap: 6px;
}
.chk-upload-btn .doc-upload-icon{ font-size: 16px; }
.chk-upload-btn .doc-upload-text{ font-size: 12px; }

.chk-empty-media{ font-size: 12px; color: var(--muted); }
.chk-media-grid{ display: flex; flex-wrap: wrap; gap: 8px; }
.chk-thumb{
  position: relative;
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
}
.chk-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.chk-thumb .ps-photo-video-badge{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  background: rgba(0,0,0,.25);
}
.chk-media-del{
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0,0,0,.65);
  color: #ff6b6b;
  border: none;
  border-radius: 4px;
  width: 18px;
  height: 18px;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chk-media-del:hover{ background: rgba(255,60,60,.4); }

/* Photo the Photo Reuse review confirmed as reused: it can't complete its
   item (checklist-upload.js rejectedPhotoHtml / itemNoticeHtml). */
.chk-thumb.chk-thumb-rejected{ border: 2px solid #ef4444; }
.chk-thumb.chk-thumb-rejected img{ opacity: .55; }
.chk-reuse-rejected{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px 0;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #fff;
  background: rgba(220,38,38,.92);
  cursor: help;
}
.chk-reuse-notice{
  font-size: 12px;
  color: #fca5a5;
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.35);
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 8px;
}
.chk-sync-note{
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}
.photo-thumb.photo-thumb-rejected{ outline: 2px solid #ef4444; }
.photo-thumb .chk-reuse-rejected{ font-size: 10px; }

/* In-flight uploads (Checklist3.txt #1) — each file gets its own visible
   loading state right in the media grid, alongside already-uploaded media. */
.chk-thumb-pending{
  background: rgba(59,130,246,.1);
  border-color: rgba(59,130,246,.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: default;
}
.chk-thumb-pending-spinner{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: #93c5fd;
  animation: chk-spin .7s linear infinite;
}
@keyframes chk-spin{ to{ transform: rotate(360deg); } }
.chk-thumb-pending-label{
  font-size: 10px;
  font-weight: 700;
  color: #93c5fd;
  text-align: center;
  padding: 0 4px;
}
.chk-thumb-pending.chk-thumb-error{
  background: rgba(255,80,80,.12);
  border-color: rgba(255,80,80,.4);
  cursor: pointer;
}
.chk-thumb-pending.chk-thumb-error .chk-thumb-pending-label{ color: #ff6b6b; }

.chk-daily-group{ margin-bottom: 10px; }
.chk-daily-date{
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}

/* Checklist2.txt #6/#7/#9: mobile usability is a priority — bigger, easier
   to tap "Mark as Completed" button, and a full-width row on narrow
   screens instead of a cramped inline fit. */
@media (max-width: 480px){
  .chk-complete-btn, .chk-na-btn{
    width: 100%;
    padding: 10px 14px;
    text-align: center;
  }
  .chk-item-actions{ width: 100%; }
  .chk-container{ padding: 14px 12px; }
}

/* Project Summary -> Checklist quick actions (Checklist4.txt) — the tab
   stays primarily a review view; these two per-item buttons are
   deliberately smaller/quieter than the standalone tool's own "Mark as
   Completed" control (Checklist4.txt #1: "less prominent than the main
   actions in the original Checklist form"). */
.chk-item-row-ps{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.chk-item-row-ps .chk-item-main{ flex: 1; min-width: 0; }
.chk-quick-actions{
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.chk-quick-btn{
  display: block;
  width: 122px;  /* fits "Add Photos & Videos" */
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}
.chk-quick-btn:hover{ background: rgba(255,255,255,.08); color: var(--text); }
.chk-item-row-ps.scope-item-done .chk-quick-complete{
  border-color: rgba(34,197,94,.5);
  color: #22c55e;
  background: rgba(34,197,94,.1);
}
.chk-quick-btn.chk-quick-na-active{
  border-color: rgba(217,119,6,.5);
  color: #f2b53c;
  background: rgba(217,119,6,.12);
}

@media (max-width: 480px){
  /* Checklist4.txt #5: reposition below the content instead of squeezing
     into a side column, so the buttons never crowd the description or
     media thumbnails on narrow screens. */
  .chk-item-row-ps{
    flex-direction: column;
  }
  .chk-quick-actions{
    flex-direction: row;
    width: 100%;
    margin-top: 8px;
  }
  .chk-quick-btn{ flex: 1; width: auto; padding: 8px; font-size: 11px; }
}

/* Copy Pending Items feedback toast — shared by checklist.html and
   project_summary.html (both include #chkToast, driven by
   ChecklistUpload.showToast() in checklist-upload.js). */
.chk-toast{
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #111827;
  color: var(--text);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  z-index: 9999;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.chk-toast.show{ opacity: 1; transform: translateY(0); }

/* Photo Gallery -> "Assign to Checklist" item picker */
.pg-item-picker{
  position: sticky;
  bottom: 0;
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--surface, #1e1e2e);
  border: 1px solid var(--border, #333);
  border-radius: 10px;
  max-height: 320px;
  display: flex;
  flex-direction: column;
}
.pg-item-picker-h{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.pg-item-picker-close{
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}
.pg-item-picker-search{
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border, #333);
  border-radius: 8px;
  color: var(--text);
  font-size: 16px; /* 16px keeps iOS Safari from zooming the page on focus */
}
.pg-item-picker-search::placeholder{ color: var(--muted); }
.pg-item-picker-empty{
  padding: 10px;
  font-size: 13px;
  color: var(--muted);
}
.pg-item-picker-list{ overflow-y: auto; }
.pg-item-picker-group{
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted);
  margin: 10px 0 4px;
}
.pg-item-picker-row{
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.pg-item-picker-row:hover{ background: rgba(255,255,255,.08); }

/* Select chevron -- one arrow for every dropdown in the portal.
   The browser's own arrow sits flush against the right border and cannot be
   moved (padding does not reach it), so it is replaced by a drawn chevron with
   room on both sides. Longhands with !important on purpose: dozens of page
   rules set the `background:` SHORTHAND on selects (form.css above,
   project-viewer.css, inline <style> blocks), and a shorthand silently resets
   background-image -- without !important the native arrow would be gone and
   no chevron drawn in its place.
   Left alone: list boxes ([multiple], [size]) have no arrow, and
   .si-pres-sel (schedule_input.html) already draws its own.
   Opt out with class="native-select". */
select:not([multiple]):not([size]):not(.si-pres-sel):not(.native-select){
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px 12px !important;
  padding-right: 30px !important;
  cursor: pointer;
}
select:not([multiple]):not([size]):not(.si-pres-sel):not(.native-select):disabled{
  cursor: not-allowed;
}
select:not([multiple]):not([size])::-ms-expand{ display: none; }

/* Project Compliance > Checklist Audits — the list page
   (templates/checklist_audits.html) and the audit panel the Checklist page
   shows in audit mode (templates/checklist.html). Status badges reuse
   .mgmt-status-badge (Pending grey / Confirmed green / Nonconformity red). */
.ca-filters{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.ca-filter{ background: rgba(255,255,255,.06); border: 1px solid var(--border); color: var(--text); border-radius: 999px;
            padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.ca-filter.active{ background: rgba(44,123,229,.18); border-color: rgba(44,123,229,.5); }
.ca-filter .ca-count{ color: var(--muted); font-weight: 500; margin-left: 4px; }
.ca-search{ flex: 1 1 200px; min-width: 0; }
.ca-table.mgmt-table{ min-width: 820px; }
.ca-table td:first-child{ min-width: 220px; }
.ca-project-name{ font-weight: 700; }
.ca-sub{ color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.ca-changed{ display: inline-block; margin-top: 5px; padding: 2px 8px; border-radius: 8px; font-size: 10.5px; font-weight: 600;
             background: rgba(56,189,248,.15); color: #38bdf8; white-space: nowrap; }
.ca-nc-text{ margin-top: 4px; font-size: 12px; color: #f87171; white-space: normal; word-break: break-word; max-width: 420px; }
.ca-audit-btn{ white-space: nowrap; text-decoration: none; display: inline-block; }

.ca-panel .ca-panel-status{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; }
.ca-panel-actions{ display: flex; flex-wrap: wrap; gap: 8px; }
.ca-btn-confirm{ background: #16a34a; }
.ca-btn-nc{ background: #dc2626; }
.ca-panel-note{ margin-top: 10px; font-size: 12px; color: var(--muted); }
.ca-history{ margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.ca-history-title{ font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; margin-bottom: 6px; }
.ca-history-row{ padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13px; }
.ca-history-row:last-child{ border-bottom: none; }
.ca-history-meta{ color: var(--muted); font-size: 12px; margin-left: 6px; }
@media (max-width: 600px){
  .ca-panel-actions .btn{ flex: 1 1 100%; }
}

/* Platform-property multiselect chips (Project Viewer, CRM cards, Workflow
   project). pms-* so they never touch the dynamic form's .ms-* picker. */
.pms-chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.pms-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:14px;
  font-size:.78rem;font-weight:500;background:rgba(56,189,248,.1);color:#38bdf8;
  border:1px solid rgba(56,189,248,.2)}
.pms-chip-remove{cursor:pointer;opacity:.6;font-size:.7rem;margin-left:2px;line-height:1}
.pms-chip-remove:hover{opacity:1}
.pms-add-wrap{position:relative;display:inline-block}
.pms-add-btn{background:none;border:1px dashed var(--border);color:var(--muted);
  padding:3px 10px;border-radius:14px;font-size:.78rem;cursor:pointer}
.pms-add-btn:hover{border-color:#38bdf8;color:#38bdf8}
.pms-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#151b2b;
  border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.4);
  max-height:200px;overflow-y:auto;z-index:100;min-width:180px;display:none}
.pms-dropdown.open{display:block}
.pms-dropdown-item{padding:6px 12px;cursor:pointer;font-size:.82rem}
.pms-dropdown-item:hover{background:rgba(56,189,248,.08)}
.pms-field{display:block}
.pms-field .pms-chips{min-height:30px}
.pms-empty{color:var(--muted);font-size:.78rem}