/* ============================================================
   Villa Plumbing Field Portal — Bid Tracker In-RFP Upload Zone
   Visible drop target rendered at the top of a bid detail panel.
   Matches the palette of lily_bid_intake_upload.css so it
   reads as the same Lily-side workflow.
   ============================================================ */

.btuz-zone{
  display:flex; align-items:center; gap:14px;
  border:2px dashed #ffb84d;
  background:#fff7e6;
  border-radius:14px;
  padding:14px 18px;
  margin:0 0 12px 0;
  font-family:'Barlow', system-ui, sans-serif;
  color:#1a2e2b;
  transition:background .15s, border-color .15s;
}
.btuz-zone.btuz-dragging{
  background:#ffe7b3;
  border-color:#e9c46a;
  box-shadow:0 6px 18px rgba(233,196,106,.35);
}

/* The whole prompt is a <label> wrapping a hidden file input so
   click anywhere inside opens the OS file picker. */
.btuz-target{
  display:flex; align-items:center; gap:14px;
  flex:1; cursor:pointer;
}
/* The file input is visually hidden but remains a real, focusable
   DOM node so Playwright / programmatic .click() / native label
   semantics all work. We deliberately do NOT set pointer-events:
   none here — Playwright's setInputFiles can't operate on an
   element that an automation engine treats as fully inert, and
   real users tapping the label area still pass through the
   <label> wrapper. The clip-path keeps it offscreen without
   removing it from the accessibility tree. */
.btuz-file{
  position:absolute !important;
  width:1px; height:1px;
  opacity:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
  padding:0;
  margin:-1px;
}

.btuz-icon{
  font-size:32px; line-height:1;
  flex:0 0 auto;
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  background:#ffd591; color:#8a4b00;
  border-radius:12px;
}
.btuz-success .btuz-icon{
  background:#b6dcd4; color:#0d3b32;
}

.btuz-prompt{ flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.btuz-headline{
  font-family:'Barlow Condensed', sans-serif;
  font-size:16px; font-weight:700;
  color:#1a2e2b;
}
.btuz-headline .btuz-meta{ font-weight:500; color:#4a6b65; font-size:13px; }
.btuz-sub{ font-size:13px; color:#4a6b65; }
.btuz-foot{ font-size:11px; color:#8a4b00; margin-top:4px; }

.btuz-actions{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;
}
.btuz-btn{
  font-family:inherit; font-size:13px;
  padding:6px 14px; border-radius:10px; border:1px solid transparent;
  cursor:pointer; line-height:1.2;
  display:inline-flex; align-items:center; gap:4px;
}
.btuz-btn-p{ background:#FF6B00; color:#fff; border-color:#247c70; }
.btuz-btn-p:hover{ background:#247c70; }
.btuz-btn-o{ background:#fff; color:#8a4b00; border-color:#ffd591; }
.btuz-btn-o:hover{ background:#ffe7b3; }
.btuz-btn-ghost{ background:#fff; color:#1a2e2b; border-color:#c8d5d1; }
.btuz-btn-ghost:hover{ background:#f3f7f6; }

.btuz-explain{
  margin-top:8px; padding:6px 10px;
  background:#fff; color:#8a4b00;
  border:1px solid #ffd591; border-radius:8px;
  font-size:12px;
}
.btuz-explain[hidden]{ display:none !important; }

@media (max-width:600px){
  .btuz-zone{ flex-direction:column; align-items:stretch; padding:14px; }
  .btuz-target{ flex-direction:column; align-items:flex-start; }
  .btuz-icon{ width:40px; height:40px; font-size:24px; }
  .btuz-actions{ width:100%; }
  .btuz-btn{ width:100%; justify-content:center; }
}