#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:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.mp-btn.primary {
  background: #1d4d3f;
  border-color: #1d4d3f;
  color: white;
}

.mp-btn.danger {
  border-color: #e0aaa5;
  color: #9a332d;
}

.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 small {
  display: block;
  margin-top: .35rem;
  opacity: .82;
}

.mp-alert.error {
  border-color: #e1a9a5;
  background: #fdebea;
  color: #8e2d27;
}

.mp-metrics {
  display: grid;
  grid-template-columns: repeat(5,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-metrics .spend {
  border-color: #9fc3b0;
  background: #eff9f3;
}

.mp-metrics .spend strong {
  font-size: 1.35rem;
  color: #175d43;
}

.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%;
  box-sizing: border-box;
  border: 1px solid #d8e0da;
  border-radius: .72rem;
  padding: .72rem .78rem;
  background: white;
  color: #203029;
  font: inherit;
}

.mp-form input:focus,
.mp-form select:focus,
.mp-form textarea:focus,
.mp-toolbar input:focus,
.mp-toolbar select:focus {
  outline: none;
  border-color: #40816a;
  box-shadow: 0 0 0 3px rgba(64,129,106,.12);
}

.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: .9;
}

.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;
  flex-direction: column;
  gap: .45rem;
}

.mp-cost-strip {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .75rem;
  border: 1px solid #b9d2c4;
  border-left: 5px solid #277355;
  border-radius: .78rem;
  background: #f0f8f3;
  color: #244a3d;
  padding: .72rem .82rem;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.mp-cost-strip:hover {
  background: #e8f4ed;
  border-color: #87b39b;
}

.mp-cost-strip:disabled {
  cursor: not-allowed;
  opacity: .65;
}

.mp-cost-strip span:first-child {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.mp-cost-strip small {
  color: #65786f;
  font-weight: 750;
}

.mp-cost-strip strong {
  font-size: 1.18rem;
  color: #175d43;
}

.mp-cost-strip > span:last-child {
  color: #557067;
  font-size: .78rem;
  font-weight: 800;
  text-align: right;
}

.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-empty p {
  margin: .3rem 0 0;
}

.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-cost-editor-layer {
  z-index: 245;
}

.mp-modal {
  width: min(760px,100%);
  max-height: 92vh;
  overflow: auto;
  box-sizing: border-box;
  border-radius: 1rem;
  padding: 1rem;
  background: white;
  box-shadow: 0 30px 70px rgba(0,0,0,.28);
}

.mp-cost-modal {
  width: min(980px,100%);
}

.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-modal-subtitle {
  margin: .3rem 0 0;
  color: #65766e;
}

.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-required {
  color: #a23a33;
  font-size: .7rem;
}

.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-cost-summary {
  display: grid;
  grid-template-columns: 2fr 1fr 1.35fr;
  gap: .75rem;
  margin-bottom: .9rem;
}

.mp-cost-summary article {
  border: 1px solid #dce4df;
  border-radius: .85rem;
  background: #f7faf8;
  padding: .85rem;
}

.mp-cost-summary article.total {
  border-color: #a9cdb9;
  background: #edf8f1;
}

.mp-cost-summary span {
  display: block;
  color: #687970;
  font-size: .75rem;
  font-weight: 800;
}

.mp-cost-summary strong {
  display: block;
  margin-top: .3rem;
  color: #21483b;
  font-size: 1.18rem;
}

.mp-cost-summary .total strong {
  color: #175d43;
  font-size: 1.7rem;
}

.mp-cost-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: .9rem;
}

.mp-cost-list {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.mp-cost-empty {
  min-height: 180px;
}

.mp-cost-item {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: start;
  gap: .8rem;
  border: 1px solid #dce3df;
  border-radius: .85rem;
  background: #fff;
  padding: .85rem;
}

.mp-cost-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.mp-cost-item h3 {
  margin: .2rem 0 0;
  color: #27483c;
}

.mp-cost-date {
  color: #708078;
  font-size: .73rem;
  font-weight: 800;
}

.mp-cost-line-total {
  white-space: nowrap;
  color: #175d43;
  font-size: 1.18rem;
}

.mp-cost-calculation {
  display: inline-flex;
  margin-top: .42rem;
  border-radius: 999px;
  background: #edf3ef;
  color: #486156;
  padding: .28rem .55rem;
  font-size: .76rem;
  font-weight: 850;
}

.mp-cost-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .8rem;
  margin-top: .5rem;
  color: #718078;
  font-size: .72rem;
}

.mp-cost-notes {
  margin: .55rem 0 0 !important;
  border-left: 3px solid #bdcec4;
  padding-left: .6rem;
  color: #52685e !important;
  font-size: .78rem;
}

.mp-cost-item-actions {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.mp-cost-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  border: 1px solid #b4d1c1;
  border-radius: .8rem;
  background: #edf8f1;
  padding: .8rem;
}

.mp-cost-preview span {
  color: #567067;
  font-size: .78rem;
  font-weight: 800;
}

.mp-cost-preview strong {
  color: #175d43;
  font-size: 1.3rem;
}

.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:1050px) {
  .mp-metrics {
    grid-template-columns: repeat(3,1fr);
  }
}

@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;
    flex-direction: row;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .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-cost-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .mp-cost-strip > span:last-child {
    text-align: left;
  }

  .mp-form {
    grid-template-columns: 1fr;
  }

  .mp-form .full {
    grid-column: auto;
  }

  .mp-cost-summary {
    grid-template-columns: 1fr 1fr;
  }

  .mp-cost-summary article.total {
    grid-column: 1/-1;
  }

  .mp-cost-item {
    grid-template-columns: 1fr;
  }

  .mp-cost-item-actions {
    flex-direction: row;
  }

  .mp-cost-item-actions .mp-btn {
    flex: 1;
  }

  .mp-cost-item-top {
    flex-direction: column;
    gap: .4rem;
  }

  .mp-cost-preview {
    align-items: flex-start;
    flex-direction: column;
  }
}