/* ============================================================
   Villa Plumbing Field Portal — Approval Workflow (Open My Day)
   Build marker: Approval Workflow May 4
   ============================================================ */
.appr-wrap{padding:1rem 1.25rem;display:flex;flex-direction:column;gap:14px;max-width:1300px;margin:0 auto}
.appr-banner{background:linear-gradient(135deg,#141310,#1A1916);color:#fff;border-radius:14px;padding:14px 18px;font-size:13px;line-height:1.5}
.appr-banner h3{font-family:'Barlow Condensed',sans-serif;font-size:18px;margin:0 0 4px}
.appr-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:14px}
@media (max-width:980px){.appr-grid{grid-template-columns:1fr}}
.appr-preview{background:#fff;border:1px solid #d8e8e5;border-radius:14px;padding:1rem 1.25rem;min-height:360px;display:flex;flex-direction:column;gap:10px}
.appr-preview h4{font-family:'Barlow Condensed',sans-serif;font-size:18px;margin:0;color:#141310}
.appr-preview .meta{font-size:12px;color:#4a6b65}
.appr-preview-body{flex:1;border:1px solid #eef4f3;border-radius:10px;padding:1rem;background:#f8fbfa;font-size:13px;color:#1a2e2b;line-height:1.6;white-space:pre-wrap;overflow:auto;min-height:200px}
.appr-preview-attach{font-size:11px;color:#4a6b65;display:flex;flex-wrap:wrap;gap:8px}
.appr-preview-attach .att{background:#eef4f3;padding:4px 8px;border-radius:6px;color:#1A1916;font-weight:600}
.appr-side{background:#fff;border:1px solid #d8e8e5;border-radius:14px;padding:1rem 1.25rem;display:flex;flex-direction:column;gap:10px}
.appr-side h4{font-family:'Barlow Condensed',sans-serif;font-size:15px;margin:0}
.appr-row{display:flex;justify-content:space-between;font-size:12px;color:#1A1916;padding:6px 0;border-bottom:1px solid #eef4f3}
.appr-row:last-child{border-bottom:0}
.appr-row b{font-family:'Barlow Condensed',sans-serif;color:#141310}
.appr-tag{display:inline-block;padding:3px 9px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;background:#eef4f3;color:#4a6b65}
.appr-tag.approved{background:#dcf5ef;color:#0a5c48}
.appr-tag.hold{background:#fff4dc;color:#8a5c00}
.appr-tag.deny{background:#ffe4dc;color:#7a1f1a}
.appr-tag.edit{background:#f0e8ff;color:#5c3a8a}
.appr-tag.pending{background:#e8f4ff;color:#1458a0}
.appr-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
@media (max-width:520px){.appr-actions{grid-template-columns:repeat(2,1fr)}}
.appr-actbtn{padding:10px 14px;border-radius:10px;font-size:13px;font-weight:700;font-family:'Barlow',sans-serif;cursor:pointer;border:1.5px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.appr-actbtn.approve{background:#FF6B00;color:#fff;border-color:#D95A00}
.appr-actbtn.approve:hover{background:#D95A00}
.appr-actbtn.hold{background:#fff4dc;color:#5a3b0b;border-color:#f1d28a}
.appr-actbtn.deny{background:#ffe4dc;color:#7a1f1a;border-color:#f6b3a3}
.appr-actbtn.edit{background:#f0e8ff;color:#5c3a8a;border-color:#d4c2f5}
.appr-note{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#1A1916}
.appr-note textarea{padding:8px 10px;border:1.5px solid #d8e8e5;border-radius:8px;font-size:13px;font-family:'Barlow',sans-serif;min-height:70px;resize:vertical}
.appr-cadence{font-size:11px;color:#4a6b65;background:#f5fbfa;border:1px solid #FFD4B0;padding:8px 10px;border-radius:10px;line-height:1.5}
.appr-history{font-size:12px}
.appr-history li{padding:6px 0;border-bottom:1px dashed #eef4f3}
.appr-history li:last-child{border-bottom:0}
.appr-bigbtn{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid #d8e8e5;border-radius:12px;padding:12px 14px;cursor:pointer;font-family:'Barlow',sans-serif}
.appr-bigbtn:hover{border-color:#FF6B00;background:#f5fbfa}
.appr-bigbtn .ic{font-size:24px}
.appr-bigbtn .nm{font-weight:700;color:#141310}
.appr-bigbtn .sub{font-size:11px;color:#4a6b65;margin-top:2px}
.appr-list{display:flex;flex-direction:column;gap:8px}
/* Round-A1 — drill-down row + filter chips + project link button */
.appr-drilldown{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.appr-filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.appr-filter-chip{background:#fff;border:1.5px solid #d8e8e5;border-radius:999px;padding:6px 12px;cursor:pointer;font-size:12px;font-weight:600;color:#1A1916;font-family:'Barlow',sans-serif;display:inline-flex;align-items:center;gap:6px;min-height:32px}
.appr-filter-chip:hover{border-color:#FF6B00;background:#f5fbfa}
.appr-filter-chip.on{background:#141310;color:#fff;border-color:#141310}
.appr-filter-chip .appr-filter-count{background:rgba(255,255,255,.18);padding:1px 8px;border-radius:999px;font-size:11px}
.appr-filter-chip:not(.on) .appr-filter-count{background:#eef4f3;color:#1A1916}
.appr-link-btn{background:transparent;border:0;color:#1458a0;font-weight:600;cursor:pointer;padding:0;text-decoration:underline;font-family:'Barlow',sans-serif;font-size:12px}
.appr-link-btn:hover{color:#141310}
/* Round-A2 — interactive attachment + missing chips + status pill */
button.att{cursor:pointer;font-family:'Barlow',sans-serif}
button.att:hover{filter:brightness(.95);outline:2px solid #FF6B00;outline-offset:1px}
button.att:focus-visible{outline:2px solid #1458a0;outline-offset:2px}
button.att[data-appr-missing-item]:hover{filter:brightness(.95);outline:2px solid #c0312a}
.appr-tag-btn{cursor:pointer;border:0;font-family:'Barlow',sans-serif}
.appr-tag-btn:hover{filter:brightness(.95);text-decoration:underline}
.appr-tag-btn:focus-visible{outline:2px solid #1458a0;outline-offset:2px}
.appr-empty{padding:12px 14px;background:#f5fbfa;border:1px dashed #FFD4B0;border-radius:10px;color:#141310;font-size:13px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.appr-empty[data-appr-empty-filtered]{background:#fff8e1;border-color:#f1d28a}
.appr-queue-top{display:flex;justify-content:flex-start;margin-bottom:4px}
.appr-queue-top .appr-link-btn{font-size:13px}
/* Mobile — make every approval button reach the 44x44 tap target */
@media (max-width:520px){
  .appr-actbtn{min-height:44px}
  .appr-filter-chip{min-height:40px;padding:8px 12px;font-size:13px}
  button.att{padding:6px 10px;min-height:32px}
  .appr-bigbtn{padding:14px 14px}
}