/* ============================================================
   Villa Plumbing Field Portal — Equipment & Tools (foundation)
   Build marker: Equipment & Tools Foundation May 17

   Foundation + active starter module styles for the Equipment /
   Tools Management vertical. Mirrors the Fleet Management
   foundation styling so the two verticals feel consistent.

   Active-looking elements route, filter, expand, or explain;
   passive items render flat / muted so users don't mistake them
   for live controls. Layout uses responsive grid + flex-wrap so
   mobile screens never overflow horizontally.
   ============================================================ */

#vEquipmentTools{
  display:none;
  padding:18px 14px 80px;
  max-width:1100px;
  margin:0 auto;
  color:var(--tx, #1a2e2b);
  box-sizing:border-box;
  width:100%;
  overflow-x:hidden;
}
#vEquipmentTools.et-show{display:block;}

#vEquipmentTools *,
#vEquipmentTools *::before,
#vEquipmentTools *::after{box-sizing:border-box;}

/* When the Equipment & Tools working area is active, make sure no
   peer view shows behind it. Mirrors the data-et-active body flag
   the shell sets on open() and clears on close(). */
body[data-et-active="1"] #vHome,
body[data-et-active="1"] #vPlanHub,
body[data-et-active="1"] #vService,
body[data-et-active="1"] #vScheduler,
body[data-et-active="1"] #vProjects,
body[data-et-active="1"] #vCategory,
body[data-et-active="1"] #vFleetManagement{
  display:none !important;
}

/* Sticky working-area bar — pins a clear "Equipment & Tools" label
   and a Back to Home action above the hero so the user always
   knows they are inside a dedicated working area. */
.et-workarea-bar{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  background:var(--white, #fff);
  border:1px solid var(--bd, #d8e8e5);
  border-radius:12px;
  padding:8px 10px;
  margin-bottom:10px;
  box-shadow:0 2px 10px rgba(20,19,16,.06);
}
.et-workarea-title{
  font-family:'Barlow Condensed', sans-serif;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--navy, #141310);
  font-weight:700;
}
.et-back-btn{
  background:var(--navy, #141310);
}
.et-back-btn:hover{background:var(--navy-md, #1A1916);}

.et-hero{
  background:linear-gradient(135deg, var(--navy, #141310), var(--navy-md, #1A1916));
  color:#fff;
  border-radius:18px;
  padding:22px 22px 24px;
  margin-bottom:18px;
  box-shadow:0 8px 24px rgba(20,19,16,.12);
}
.et-hero-eyebrow{
  display:inline-block;
  font-family:'Barlow Condensed', sans-serif;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  background:rgba(233,196,106,.18);
  color:#e9c46a;
  padding:4px 10px;
  border-radius:999px;
  margin-bottom:10px;
}
.et-hero h1{
  font-family:'Barlow Condensed', sans-serif;
  font-size:28px;
  font-weight:700;
  margin:0 0 6px;
  letter-spacing:.01em;
}
.et-hero p{
  font-size:14px;
  line-height:1.55;
  color:#cfe2dd;
  margin:0 0 6px;
  max-width:760px;
}

/* Section nav — active jump buttons that scroll & highlight. */
.et-section-nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}
.et-jump-btn{
  background:var(--white, #fff);
  border:1px solid var(--bd, #d8e8e5);
  border-radius:999px;
  padding:6px 12px;
  font-family:'Barlow Condensed', sans-serif;
  font-size:13px;
  font-weight:600;
  color:var(--navy, #141310);
  cursor:pointer;
  transition:background .12s, border-color .12s;
}
.et-jump-btn:hover{
  background:var(--bd-lt, #eef4f3);
  border-color:var(--teal, #FF6B00);
}

.et-section{
  background:var(--white, #fff);
  border:1px solid var(--bd, #d8e8e5);
  border-radius:14px;
  padding:16px 18px;
  margin-bottom:14px;
  transition:box-shadow .25s;
}
.et-section h2{
  font-family:'Barlow Condensed', sans-serif;
  font-size:18px;
  font-weight:700;
  margin:0 0 8px;
  color:var(--navy, #141310);
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.et-section p{
  font-size:13px;
  line-height:1.55;
  color:var(--tx-md, #4a6b65);
  margin:0 0 10px;
}
.et-section-highlight{
  box-shadow:0 0 0 3px rgba(255,107,0,.45);
}

.et-demo-tag{
  display:inline-block;
  font-family:'Barlow Condensed', sans-serif;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:rgba(255,107,0,.12);
  border:1px solid var(--teal, #FF6B00);
  color:var(--teal-dk, #D95A00);
  padding:2px 8px;
  border-radius:999px;
}

/* Forms — responsive grid that stacks on mobile. */
.et-form{
  background:var(--bd-lt, #eef4f3);
  border:1px solid var(--bd, #d8e8e5);
  border-radius:10px;
  padding:12px;
  margin-bottom:12px;
}
.et-form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
  margin-bottom:10px;
}
.et-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.et-field>span{
  font-size:12px;
  font-weight:600;
  color:var(--navy, #141310);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.et-field input,
.et-field select{
  border:1px solid var(--bd, #d8e8e5);
  border-radius:8px;
  padding:8px 10px;
  font-size:14px;
  color:var(--tx, #1a2e2b);
  background:#fff;
  width:100%;
  max-width:100%;
}
.et-field-wide{grid-column:1 / -1;}

/* Rows — used for tools, assignments, maintenance. */
.et-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.et-row{
  border:1px solid var(--bd, #d8e8e5);
  border-radius:10px;
  background:#fff;
  padding:10px 12px;
}
.et-row-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
}
.et-row-title{
  font-weight:600;
  font-size:14px;
  color:var(--navy, #141310);
  flex:1 1 200px;
  min-width:0;
  word-break:break-word;
}
.et-row-meta{
  font-weight:400;
  font-size:13px;
  color:var(--tx-md, #4a6b65);
}
.et-row-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.et-chip{
  display:inline-block;
  font-family:'Barlow Condensed', sans-serif;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:var(--bd-lt, #eef4f3);
  border:1px solid var(--bd, #d8e8e5);
  color:var(--tx-md, #4a6b65);
  padding:2px 8px;
  border-radius:999px;
  white-space:nowrap;
}
.et-chip-status[data-status="available"],
.et-chip-status[data-status="ready"],
.et-chip-status[data-status="scheduled"]{
  background:rgba(255,107,0,.12);
  border-color:var(--teal, #FF6B00);
  color:var(--teal-dk, #D95A00);
}
.et-chip-status[data-status="in_use"],
.et-chip-status[data-status="reminder_window"],
.et-chip-status[data-status="due_soon"]{
  background:rgba(233,196,106,.18);
  border-color:var(--amber, #e9c46a);
  color:#7a5a14;
}
.et-chip-status[data-status="out_of_service"],
.et-chip-status[data-status="overdue"],
.et-chip-status[data-status="pending"]{
  background:rgba(231,111,81,.16);
  border-color:#e76f51;
  color:#9c3b1f;
}

.et-row-detail{
  margin-top:8px;
  padding-top:8px;
  border-top:1px dashed var(--bd, #d8e8e5);
}
.et-row-detail-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:8px 14px;
  margin-bottom:6px;
}
.et-detail-k{
  display:block;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tx-md, #4a6b65);
  font-weight:600;
}
.et-detail-v{
  display:block;
  font-size:13px;
  color:var(--tx, #1a2e2b);
  word-break:break-word;
}
.et-detail-notes{
  font-size:13px;
  color:var(--tx, #1a2e2b);
  margin:6px 0;
}
.et-detail-foot{
  font-size:12px;
  color:var(--tx-md, #4a6b65);
  margin:6px 0 0;
  font-style:italic;
}
.et-empty{
  font-size:13px;
  color:var(--tx-md, #4a6b65);
  padding:10px 12px;
  border:1px dashed var(--bd, #d8e8e5);
  border-radius:10px;
  background:var(--bd-lt, #eef4f3);
}

/* Link / expand button — text-only active control. */
.et-link-btn{
  background:transparent;
  border:none;
  color:var(--teal-dk, #D95A00);
  font-family:'Barlow Condensed', sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  cursor:pointer;
  padding:4px 6px;
  text-decoration:underline;
}
.et-link-btn:hover{color:var(--teal, #FF6B00);}

/* Lily intake dropzone. */
.et-dropzone{
  border:2px dashed var(--teal, #FF6B00);
  background:rgba(255,107,0,.06);
  border-radius:12px;
  padding:16px;
  text-align:center;
  margin-bottom:12px;
  cursor:pointer;
  transition:background .12s, border-color .12s;
}
.et-dropzone-hover{
  background:rgba(255,107,0,.16);
  border-color:var(--teal-dk, #D95A00);
}
.et-dropzone-ic{
  font-size:28px;
  margin-bottom:6px;
}
.et-dropzone-copy{
  font-size:14px;
  color:var(--tx, #1a2e2b);
  margin-bottom:4px;
}
.et-dropzone-foot{
  font-size:12px;
  color:var(--tx-md, #4a6b65);
}
.et-dropzone-browse{cursor:pointer;}

/* Lily review card. */
.et-review-card{
  border:1px solid var(--bd, #d8e8e5);
  border-left:3px solid var(--amber, #e9c46a);
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
  margin-bottom:8px;
}
.et-review-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin-bottom:8px;
}
.et-review-title{
  font-weight:600;
  font-size:14px;
  color:var(--navy, #141310);
  word-break:break-word;
}
.et-review-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:6px 12px;
  margin-bottom:8px;
}
.et-review-advisory{
  background:rgba(233,196,106,.16);
  border-left:3px solid var(--amber, #e9c46a);
  padding:6px 10px;
  border-radius:0 8px 8px 0;
  font-size:12.5px;
  color:var(--tx, #1a2e2b);
  margin:6px 0;
}
.et-review-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

/* Passive item — preview-only, not a button. Deliberately flat. */
.et-passive-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border:1px dashed var(--bd, #d8e8e5);
  border-radius:10px;
  background:var(--bd-lt, #eef4f3);
  color:var(--tx-md, #4a6b65);
  margin:6px 0;
  cursor:default;
  user-select:text;
}
.et-passive-row[aria-disabled="true"]{opacity:.85;}
.et-passive-ic{
  font-size:18px;
  line-height:1;
  flex:0 0 auto;
}
.et-passive-body{flex:1 1 auto; min-width:0;}
.et-passive-title{
  font-weight:600;
  font-size:13.5px;
  color:var(--navy, #141310);
  margin-bottom:2px;
  word-break:break-word;
}
.et-passive-note{
  font-size:12px;
  color:var(--tx-md, #4a6b65);
  word-break:break-word;
}
.et-passive-tag{
  display:inline-block;
  font-family:'Barlow Condensed', sans-serif;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:#fff;
  border:1px solid var(--bd, #d8e8e5);
  color:var(--tx-lt, #8aada8);
  padding:2px 8px;
  border-radius:999px;
  margin-left:8px;
}

/* Active control — used for explicit active controls. */
.et-active-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--teal, #FF6B00);
  color:#fff;
  font-family:'Barlow Condensed', sans-serif;
  font-size:14px;
  font-weight:700;
  border:none;
  border-radius:10px;
  padding:10px 16px;
  cursor:pointer;
  transition:background .15s;
}
.et-active-btn:hover{background:var(--teal-dk, #D95A00);}
.et-secondary-btn{
  background:var(--navy, #141310);
}
.et-secondary-btn:hover{background:var(--navy-md, #1A1916);}

.et-future-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
  margin-top:8px;
}

[data-et-advisory="1"]{
  background:rgba(233,196,106,.16);
  border-left:3px solid var(--amber, #e9c46a);
  padding:8px 10px;
  border-radius:0 8px 8px 0;
  font-size:12.5px;
  color:var(--tx, #1a2e2b);
}

/* ------------------------------------------------------------
   Asset profile picker + requirements summary card.
   Trade-agnostic — no plumbing-specific styling.
   ------------------------------------------------------------ */
.et-profile-card,
.et-profile-req-card{
  background:rgba(255,255,255,.6);
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  padding:14px 16px;
  margin:10px 0 14px;
  width:100%;
  box-sizing:border-box;
}
.et-profile-card-head,
.et-profile-req-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:6px;
}
.et-profile-card-title{
  font-weight:600;
  font-size:15px;
  color:var(--tx, #1a2e2b);
}
.et-profile-card-note{
  font-size:13px;
  line-height:1.45;
  margin:4px 0 10px;
  color:var(--tx-mute, #4b5e5b);
}
.et-profile-card-foot{
  font-size:12px;
  color:var(--tx-mute, #4b5e5b);
  margin-top:10px;
  font-style:italic;
}
.et-profile-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.et-profile-chip{
  padding:5px 10px;
  font-size:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:999px;
  cursor:pointer;
  color:var(--tx, #1a2e2b);
}
.et-profile-chip:hover{background:#f6faf8;}
.et-profile-chip-active{
  background:#e6f3ee;
  border-color:#FF6B00;
  color:#0a4742;
  font-weight:600;
}

/* Requirements summary card. */
.et-req-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:8px 0 12px;
}
.et-req-meta .et-detail-k{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--tx-mute, #4b5e5b);
  margin-bottom:4px;
}
.et-req-groups{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.et-req-group{
  background:rgba(0,0,0,.025);
  border-radius:10px;
  padding:10px 12px;
}
.et-req-group-title{
  font-size:13px;
  font-weight:600;
  color:var(--tx, #1a2e2b);
  margin-bottom:6px;
}
.et-req-group-count{
  font-weight:400;
  color:var(--tx-mute, #4b5e5b);
  font-size:12px;
}
.et-req-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.et-req-chip{
  padding:3px 8px;
  font-size:11.5px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  border-radius:999px;
  color:var(--tx, #1a2e2b);
  white-space:normal;
}

/* ------------------------------------------------------------
   Trade pack row + recommended/full-catalog sections.
   Preview / onboarding simulation — clearly demarcated from the
   live profile chips so the user understands the trade selector
   is a demo of the future onboarding/company-settings surface.
   ------------------------------------------------------------ */
.et-trade-row{
  background:rgba(0,0,0,.025);
  border:1px dashed rgba(0,0,0,.12);
  border-radius:10px;
  padding:10px 12px;
  margin:8px 0 12px;
  width:100%;
  box-sizing:border-box;
}
.et-trade-row-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--tx-mute, #4b5e5b);
  margin-bottom:6px;
}
.et-trade-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.et-trade-chip{
  padding:5px 10px;
  font-size:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:999px;
  cursor:pointer;
  color:var(--tx, #1a2e2b);
}
.et-trade-chip:hover{background:#f6faf8;}
.et-trade-chip-active{
  background:#dff1ea;
  border-color:#1f8675;
  color:#0a4742;
  font-weight:600;
}
.et-trade-row-desc{
  font-size:12px;
  color:var(--tx-mute, #4b5e5b);
  margin:8px 0 0;
  line-height:1.4;
}
.et-profile-section{
  margin:10px 0 8px;
  width:100%;
  box-sizing:border-box;
}
.et-profile-section-title{
  font-size:12px;
  font-weight:600;
  color:var(--tx, #1a2e2b);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:6px;
}
.et-profile-section-count{
  font-weight:400;
  color:var(--tx-mute, #4b5e5b);
  font-size:12px;
  text-transform:none;
  letter-spacing:0;
}
.et-profile-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin:8px 0 4px;
}
.et-link-btn-strong{
  font-weight:600;
  color:#0a4742;
}
.et-empty-inline{
  font-size:12px;
  color:var(--tx-mute, #4b5e5b);
  padding:4px 0;
}
.et-profile-select-fallback{
  margin-top:10px;
}

/* PR #101 — registry edit affordances, custom profile card, and
   persistence status card. */
.et-row-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.et-form-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.et-form-title{
  margin:0;
  font-size:15px;
  color:var(--navy, #141310);
}
.et-form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:8px;
}
.et-section-inset{
  background:var(--bd-lt, #eef4f3);
  border:1px solid var(--bd, #d8e8e5);
  border-radius:10px;
  padding:14px;
  margin-bottom:12px;
}
.et-section-subtitle{
  margin:0 0 8px;
  font-size:15px;
  color:var(--navy, #141310);
}
.et-row-compact{
  padding:8px 10px;
}
.et-persistence-card{
  background:var(--bd-lt, #eef4f3);
  border:1px solid var(--bd, #d8e8e5);
  border-radius:10px;
  padding:12px;
  margin-bottom:12px;
}
.et-persistence-head{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  justify-content:space-between;
  margin-bottom:6px;
}
.et-persistence-title{
  font-weight:600;
  color:var(--navy, #141310);
}
.et-persistence-note{
  font-size:13px;
  color:var(--ink, #1c2c44);
  margin:0 0 8px;
}
.et-persistence-meta{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:8px;
}
.et-status-live{
  background:#cdebda;
  border-color:#7dc8a3;
  color:#1c5a3a;
}
.et-status-preview{
  background:#f1e9c8;
  border-color:#d6c285;
  color:#5a4716;
}

/* PR #102 — assignment refusal banner + inset check-in form. */
.et-refusal{
  background:#fbe4e0;
  border:1px solid #e6a59a;
  border-radius:10px;
  padding:10px 12px;
  margin-bottom:12px;
  color:#7a1f12;
  font-size:13px;
}
.et-refusal strong{
  color:#5a1208;
}
.et-form-inset{
  margin-top:10px;
  background:#f6fbfa;
  border-style:dashed;
}
[data-status="overdue"]{
  background:#fbe4e0;
  border-color:#e6a59a;
  color:#7a1f12;
}
[data-status="due_today"]{
  background:#fdebc7;
  border-color:#e6c98a;
  color:#5a4716;
}
[data-status="on_track"]{
  background:#cdebda;
  border-color:#7dc8a3;
  color:#1c5a3a;
}
[data-status="returned"],
[data-status="outcome-ok"],
[data-status="outcome-returned_clean"]{
  background:#e0eaf3;
  border-color:#9bb2c8;
  color:#1c3650;
}
[data-status="outcome-missing"],
[data-status="outcome-damaged"]{
  background:#fbe4e0;
  border-color:#e6a59a;
  color:#7a1f12;
}
[data-status="outcome-needs_service"]{
  background:#fdebc7;
  border-color:#e6c98a;
  color:#5a4716;
}

/* Mobile tightening — narrow screens reduce horizontal padding so
   cards never overflow horizontally. */
@media (max-width: 640px){
  #vEquipmentTools{padding:12px 10px 80px;}
  .et-hero{padding:18px 16px 20px; border-radius:14px;}
  .et-hero h1{font-size:24px;}
  .et-section{padding:14px 12px; border-radius:12px;}
  .et-form-grid{grid-template-columns:1fr;}
  .et-row-head{gap:6px;}
  .et-jump-btn{font-size:12px; padding:5px 10px;}
  .et-future-grid{grid-template-columns:1fr;}
  .et-profile-card,
  .et-profile-req-card{padding:12px 12px;}
  .et-req-meta{grid-template-columns:1fr;}
  .et-trade-row{padding:10px 10px;}
  .et-profile-actions{gap:8px;}
  .et-persistence-meta{grid-template-columns:1fr;}
  .et-row-actions{gap:6px;}
}