#belair-management-projects-root { position:fixed; inset:0; z-index:195; display:none; overflow:auto; padding:clamp(.8rem,3vw,2rem); background:#f3f5f1; color:#203029; }
#belair-management-projects-root.active { display:block; }
.mp-shell { width:min(1320px,100%); margin:0 auto; }
.mp-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.mp-head h1 { margin:.15rem 0 .3rem; }
.mp-head p { margin:0; color:#6f7b74; }
.mp-eyebrow { color:#2d6a56; font-size:.72rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.mp-head-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.55rem; }
.mp-btn { border:1px solid #d8e0da; border-radius:.72rem; padding:.67rem .85rem; background:white; color:#203029; font-weight:800; cursor:pointer; }
.mp-btn:hover { border-color:#9db7aa; }
.mp-btn.primary { background:#1d4d3f; border-color:#1d4d3f; color:white; }
.mp-btn.small { padding:.48rem .65rem; font-size:.76rem; }
.mp-alert { margin:0 0 1rem; padding:.85rem 1rem; border:1px solid #d9c18b; border-radius:.85rem; background:#fff8e8; color:#755119; }
.mp-alert.error { border-color:#e1a9a5; background:#fdebea; color:#8e2d27; }
.mp-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; margin-bottom:1rem; }
.mp-metrics > div { border:1px solid #dfe5df; border-radius:1rem; padding:1rem; background:white; box-shadow:0 10px 26px rgba(31,53,43,.05); display:flex; flex-direction:column; }
.mp-metrics span { color:#6f7b74; font-size:.8rem; }
.mp-metrics strong { font-size:1.8rem; }
.mp-metrics .urgent { border-color:#e5b0aa; background:#fff5f4; }
.mp-metrics .overdue { border-color:#e4bd7b; background:#fff9ef; }
.mp-metrics .complete { border-color:#bcd8c8; background:#f4faf6; }
.mp-toolbar { display:grid; grid-template-columns:minmax(220px,1fr) 180px 150px; gap:.7rem; margin-bottom:1rem; }
.mp-toolbar input,.mp-toolbar select,.mp-form input,.mp-form select,.mp-form textarea { width:100%; border:1px solid #d8e0da; border-radius:.72rem; padding:.72rem .78rem; background:white; color:#203029; }
.mp-list { display:flex; flex-direction:column; gap:.75rem; }
.mp-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.9rem; align-items:start; border:1px solid #dfe5df; border-radius:1rem; padding:1rem; background:white; box-shadow:0 8px 24px rgba(31,53,43,.05); }
.mp-card.completed { background:#f7f9f7; opacity:.84; }
.mp-card.is-overdue { border-left:5px solid #c47a19; }
.mp-complete-box input { position:absolute; opacity:0; }
.mp-complete-box span { width:34px; height:34px; display:grid; place-items:center; border:2px solid #b8c5bd; border-radius:.7rem; background:white; color:transparent; font-weight:900; cursor:pointer; }
.mp-complete-box input:checked + span { background:#2c7a52; border-color:#2c7a52; color:white; }
.mp-card-top { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; }
.mp-type,.mp-priority,.mp-status { border-radius:999px; padding:.28rem .52rem; background:#eef2ee; font-size:.7rem; font-weight:900; }
.mp-priority[data-priority="Urgent"] { background:#f9dedb; color:#9b302a; }
.mp-priority[data-priority="High"] { background:#fff0d8; color:#915d0f; }
.mp-priority[data-priority="Medium"] { background:#e8f0eb; color:#315848; }
.mp-priority[data-priority="Low"] { background:#edf0f2; color:#52616b; }
.mp-card h2 { margin:.5rem 0 .3rem; font-size:1.04rem; }
.mp-card p { margin:0 0 .65rem; color:#5f6f67; white-space:pre-wrap; }
.mp-meta { display:flex; flex-wrap:wrap; gap:.4rem .9rem; color:#6f7b74; font-size:.76rem; }
.mp-meta .bad { color:#a35e0a; font-weight:900; }
.mp-notes { margin-top:.65rem; padding:.65rem .75rem; border-radius:.7rem; background:#f5f8f6; color:#486056; font-size:.8rem; white-space:pre-wrap; }
.mp-completion { margin-top:.65rem; color:#2c6d4c; font-size:.8rem; }
.mp-card-actions { display:flex; gap:.45rem; }
.mp-empty,.mp-loading { min-height:260px; display:grid; place-items:center; text-align:center; border:1px dashed #b9c5bd; border-radius:1rem; background:white; color:#6f7b74; }
.mp-loading { position:absolute; inset:2rem; }
.mp-spinner { width:28px; height:28px; border:3px solid #d9e1db; border-top-color:#1d4d3f; border-radius:50%; animation:mp-spin .8s linear infinite; }
@keyframes mp-spin { to { transform:rotate(360deg); } }
.mp-modal-layer { position:fixed; inset:0; z-index:230; display:grid; place-items:center; padding:1rem; background:rgba(16,31,25,.68); }
.mp-modal { width:min(760px,100%); max-height:92vh; overflow:auto; border-radius:1rem; padding:1rem; background:white; box-shadow:0 30px 70px rgba(0,0,0,.28); }
.mp-modal > header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; border-bottom:1px solid #e1e6e2; padding-bottom:.8rem; margin-bottom:.9rem; }
.mp-modal h2 { margin:.15rem 0 0; }
.mp-form { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.mp-form label { display:flex; flex-direction:column; gap:.35rem; font-size:.8rem; font-weight:800; }
.mp-form .full { grid-column:1/-1; }
.mp-form-actions { display:flex; justify-content:flex-end; gap:.55rem; }
.mp-history { display:flex; flex-direction:column; gap:.8rem; }
.mp-history article { display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start; }
.mp-history-dot { width:12px; height:12px; margin-top:.3rem; border-radius:50%; background:#2d6a56; box-shadow:0 0 0 5px #e5efe9; }
.mp-history article > div:last-child { display:flex; flex-direction:column; gap:.15rem; border-bottom:1px solid #e5e9e6; padding-bottom:.75rem; }
.mp-history span { color:#6f7b74; font-size:.75rem; }
.mp-history p { margin:.25rem 0 0; color:#486056; font-size:.8rem; }
.mp-nav-icon { width:19px; text-align:center; }
.management-projects-top-button { border:1px solid #cbd8d0; border-radius:.75rem; padding:.5rem .7rem; background:white; color:#1d4d3f; display:flex; align-items:center; gap:.4rem; cursor:pointer; }
@media (max-width:900px) {
  .mp-head { flex-direction:column; }
  .mp-head-actions { width:100%; justify-content:flex-start; }
  .mp-metrics { grid-template-columns:repeat(2,1fr); }
  .mp-toolbar { grid-template-columns:1fr 1fr; }
  .mp-toolbar input { grid-column:1/-1; }
  .mp-card { grid-template-columns:auto minmax(0,1fr); }
  .mp-card-actions { grid-column:2; justify-content:flex-end; }
  .management-projects-top-button b { display:none; }
}
@media (max-width:640px) {
  #belair-management-projects-root { padding:.75rem; }
  .mp-head-actions,.mp-head-actions .mp-btn { width:100%; }
  .mp-metrics { grid-template-columns:1fr 1fr; }
  .mp-toolbar { grid-template-columns:1fr; }
  .mp-toolbar input { grid-column:auto; }
  .mp-card { grid-template-columns:auto minmax(0,1fr); padding:.8rem; }
  .mp-card-actions { grid-column:1/-1; }
  .mp-card-actions .mp-btn { flex:1; }
  .mp-form { grid-template-columns:1fr; }
  .mp-form .full { grid-column:auto; }
}