/* Keeps the inquiry navigation visible while long steps scroll independently. */
:root {
  --orange: #225cad;
  --orange-dark: #194887;
  --soft-orange: #eaf3ff;
}

/* Keep the staff navigation scrollable without showing the browser scrollbar. */
.sidebar nav {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sidebar nav::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Public portfolio and private portfolio manager */
.public-portfolio-grid {
  height: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 390px;
}

.public-portfolio-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: #18201d;
  color: #fff;
  text-align: left;
  isolation: isolate;
}

.public-portfolio-card.featured:first-child { grid-column: span 2; }
.public-portfolio-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease, opacity .32s ease; }
.public-portfolio-card img.is-changing { opacity: .18; }
.public-portfolio-card:hover img { transform: scale(1.035); }
.portfolio-card-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(7, 12, 10, .08), rgba(7, 12, 10, .78)); }
.portfolio-card-top, .portfolio-card-copy { position: absolute; z-index: 2; left: 24px; right: 24px; display: flex; }
.portfolio-card-top { top: 23px; justify-content: space-between; align-items: flex-start; }
.portfolio-card-top b, .portfolio-card-top i { border: 1px solid rgba(255,255,255,.58); padding: 6px 9px; font-size: 9px; font-style: normal; text-transform: uppercase; letter-spacing: .11em; }
.portfolio-card-top i { border-color: #90bfff; background: rgba(34,92,173,.82); }
.portfolio-card-copy { right: 82px; bottom: 23px; flex-direction: column; }
.portfolio-card-copy strong { font: 700 19px Manrope, sans-serif; }
.portfolio-card-copy small { margin-top: 5px; color: #d5dbd7; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.portfolio-slide-count { position: absolute; z-index: 2; right: 24px; bottom: 23px; padding: 5px 7px; border: 1px solid rgba(255,255,255,.48); border-radius: 12px; background: rgba(7,12,10,.34); color: #fff; font-size: 8px; font-weight: 700; letter-spacing: .05em; }
.portfolio-empty-grid { height: auto; display: block; }
.portfolio-empty-public { min-height: 270px; padding: 55px; display: flex; flex-direction: column; justify-content: end; background: linear-gradient(135deg,#253b58,#132239); color: #fff; }
.portfolio-empty-public span { font-size: 9px; letter-spacing: .14em; }
.portfolio-empty-public h3 { max-width: 580px; margin: 12px 0 7px; font-size: 25px; }
.portfolio-empty-public p { margin: 0; color: #becddd; }

.portfolio-public-head .portfolio-kicker, .portfolio-kicker { display: block; margin-bottom: 7px; color: var(--orange-dark); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.portfolio-public-hero { width: 100%; height: min(48vh, 400px); border-radius: 7px; object-fit: cover; background: #edf0ed; }
.portfolio-public-thumbs { display: flex; gap: 7px; margin: 8px 0 18px; overflow-x: auto; padding-bottom: 3px; }
.portfolio-public-thumbs button { flex: 0 0 74px; height: 56px; border: 2px solid transparent; border-radius: 5px; padding: 0; overflow: hidden; background: #eef0ed; }
.portfolio-public-thumbs button:hover { border-color: var(--orange); }
.portfolio-public-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.portfolio-public-description { margin: 18px 0; color: #515a55; line-height: 1.75; white-space: pre-line; }
.portfolio-service-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 19px; }
.portfolio-service-list span { padding: 6px 9px; border-radius: 12px; background: var(--soft-orange); color: var(--orange-dark); font-size: 9px; font-weight: 700; }
.portfolio-enquire { width: 100%; }

.portfolio-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 11px; margin-bottom: 18px; }
.portfolio-metrics article { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.portfolio-metrics label { display: block; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.portfolio-metrics strong { display: block; margin: 7px 0 2px; font: 700 23px Manrope, sans-serif; }
.portfolio-metrics small { color: var(--muted); font-size: 8px; }
.portfolio-tabs { margin-bottom: 15px; }
.portfolio-admin-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 13px; }
.portfolio-admin-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.portfolio-admin-cover { position: relative; height: 190px; background: #eef1ee; }
.portfolio-admin-cover > img { width: 100%; height: 100%; object-fit: cover; }
.portfolio-admin-cover > span { height: 100%; display: grid; place-items: center; align-content: center; gap: 6px; color: #8a938e; }
.portfolio-admin-cover > span svg { width: 24px; }
.portfolio-admin-cover > span small { font-size: 9px; }
.portfolio-admin-cover > i { position: absolute; top: 11px; left: 11px; font-style: normal; }
.portfolio-admin-cover > b { position: absolute; top: 11px; right: 11px; padding: 5px 8px; border-radius: 11px; background: var(--orange); color: #fff; font-size: 8px; text-transform: uppercase; }
.portfolio-admin-body { padding: 15px; }
.portfolio-admin-body h3 { margin: 0; font-size: 13px; }
.portfolio-admin-body p { margin: 4px 0 10px; color: #4d5752; font-size: 9px; }
.portfolio-admin-body > small { color: var(--muted); font-size: 8px; }
.portfolio-admin-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #edf0ed; }
.portfolio-admin-actions button { border: 0; border-radius: 5px; padding: 7px 9px; background: #eef2f7; color: #35516f; font-size: 8px; font-weight: 700; }
.portfolio-admin-actions button.primary { margin-left: auto; background: var(--orange); color: #fff; }
.portfolio-admin-actions button.soft-danger { margin-left: auto; background: #fff0ee; color: #a64034; }
.portfolio-admin-empty, .portfolio-setup-needed, .portfolio-loading { padding: 45px 25px; text-align: center; }
.portfolio-admin-empty h3, .portfolio-setup-needed h3 { margin: 0 0 7px; }
.portfolio-admin-empty p, .portfolio-setup-needed p { margin: 0 auto 17px; max-width: 620px; color: var(--muted); font-size: 10px; }

.portfolio-feature-check { display: flex; align-items: center; gap: 10px; margin: 5px 0 17px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }
.portfolio-feature-check input { width: 18px; height: 18px; accent-color: var(--orange); }
.portfolio-feature-check span { display: flex; flex-direction: column; }
.portfolio-feature-check b { font-size: 10px; }
.portfolio-feature-check small { color: var(--muted); font-size: 8px; }
.portfolio-file-zone { min-height: 105px; display: grid; place-items: center; border: 1px dashed #bfc9c3; border-radius: 7px; background: #f8faf8; text-align: center; cursor: pointer; }
.portfolio-file-zone:hover { border-color: var(--orange); background: var(--soft-orange); }
.portfolio-file-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.portfolio-file-zone span { display: grid; justify-items: center; gap: 4px; padding: 18px; }
.portfolio-file-zone svg { color: var(--orange); }
.portfolio-file-zone b { font-size: 10px; }
.portfolio-file-zone small { color: var(--muted); font-size: 8px; }
.portfolio-file-summary { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 8px; }
.portfolio-file-summary span { color: var(--muted); }
.portfolio-form-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 19px; padding-top: 16px; border-top: 1px solid var(--line); }
.portfolio-form-actions .portfolio-delete { margin-right: auto; color: #a33b31; background: #fff0ee; }
.portfolio-gallery-admin { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-bottom: 15px; }
.portfolio-gallery-admin article { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; }
.portfolio-gallery-admin img { width: 100%; height: 130px; object-fit: cover; }
.portfolio-gallery-admin article > div { display: flex; justify-content: space-between; gap: 5px; align-items: center; padding: 7px; }
.portfolio-gallery-admin article > div > span:first-child { font-size: 8px; }
.portfolio-gallery-admin article > div > span:last-child { display: flex; gap: 3px; }
.portfolio-gallery-admin button { border: 0; border-radius: 4px; padding: 4px 6px; background: #eaf3ff; color: #194887; font-size: 7px; }
.portfolio-gallery-admin button:disabled { opacity: .35; }
.portfolio-gallery-admin button.danger { background: #fff0ee; color: #a33b31; }
.portfolio-gallery-empty { margin-bottom: 15px; padding: 30px; border: 1px dashed var(--line); color: var(--muted); text-align: center; font-size: 9px; }

@media (max-width: 1050px) {
  .public-portfolio-grid, .portfolio-admin-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .public-portfolio-card.featured:first-child { grid-column: span 2; }
}

@media (max-width: 700px) {
  .public-portfolio-grid, .portfolio-admin-grid, .portfolio-metrics { grid-template-columns: 1fr; }
  .public-portfolio-grid { grid-auto-rows: 315px; }
  .public-portfolio-card.featured:first-child { grid-column: auto; }
  .portfolio-metrics { gap: 7px; }
  .portfolio-metrics article { padding: 13px; }
  .portfolio-gallery-admin { grid-template-columns: 1fr; }
  .portfolio-form-actions { flex-wrap: wrap; }
  .portfolio-form-actions .portfolio-delete { width: 100%; margin: 0 0 3px; }
  .portfolio-form-actions .btn:not(.portfolio-delete) { flex: 1; }
  .portfolio-empty-public { min-height: 250px; padding: 30px; }
}

.version-notice {
  margin: 0 0 14px;
  padding: 10px 13px;
  border: 1px solid #b9d8ff;
  border-radius: 10px;
  background: #edf6ff;
  color: #194887;
  font-size: 10px;
  font-weight: 700;
}

.version-list { display: grid; gap: 9px; }
.version-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid #dde3e8;
  border-radius: 10px;
  background: #fff;
}
.version-list article > div { display: grid; gap: 4px; }
.version-list article > div:last-child { justify-items: end; }
.version-list span { color: #707b75; font-size: 8px; }
.quote-line { display: flex; justify-content: space-between; gap: 18px; font-size: 10px; }
.quote-total { font-size: 12px; }
.review-box hr { border: 0; border-top: 1px solid #dce2e6; }
.quote-card-actions { flex-wrap: wrap; }
.quote-card-actions .project-start-button { flex: 1 0 100%; }

.project-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.project-summary-card { cursor: pointer; transition: transform .16s, border-color .16s; }
.project-summary-card:hover { transform: translateY(-2px); border-color: #9fc5f3; }
.project-progress-head { display: flex; justify-content: space-between; font-size: 9px; margin: 8px 0 6px; }
.project-progress { height: 8px; overflow: hidden; border-radius: 999px; background: #e8edf1; }
.project-progress i { display: block; height: 100%; border-radius: inherit; background: #225cad; }
.project-progress-large { height: 12px; margin-bottom: 16px; }
.project-card-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #e7ebee; }
.project-card-metrics label, .project-finance-grid label { display: block; color: #78817c; font-size: 8px; }
.project-card-metrics strong { display: block; margin-top: 4px; font-size: 10px; }
.positive { color: #237453; }
.negative { color: #b33d32; }
.project-empty { padding: 55px 20px; }
.project-empty h3 { margin: 0 0 7px; }
.project-empty p { margin: 0 0 18px; }
.project-workspace-head { display: flex; justify-content: space-between; align-items: end; gap: 18px; }
.project-workspace-head p { color: #737c77; font-size: 10px; }
.project-workspace-head > div:last-child { text-align: right; }
.project-workspace-head > div:last-child span { display: block; color: #737c77; font-size: 8px; }
.project-workspace-head > div:last-child strong { font: 700 28px Manrope; }
.project-finance-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; }
.project-finance-grid article { padding: 15px; border: 1px solid #dde3e8; border-radius: 8px; background: #fff; }
.project-finance-grid strong { display: block; margin-top: 5px; font: 700 15px Manrope; }
.project-detail-grid { grid-template-columns: 1.15fr .85fr; }
.project-phase-list { display: grid; gap: 12px; }
.project-phase-list article { padding: 11px; border: 1px solid #e1e6ea; border-radius: 8px; }
.project-phase-list article > div:first-child, .phase-finance { display: flex; justify-content: space-between; gap: 10px; }
.project-phase-list strong { font-size: 10px; }
.project-phase-list span, .phase-finance { color: #737c77; font-size: 8px; }
.project-phase-list .project-progress { margin: 8px 0; }
.project-history { display: grid; }
.project-history article { padding: 11px 0; border-top: 1px solid #e7ebee; }
.project-history article:first-child { border-top: 0; }
.project-history article > div { display: flex; justify-content: space-between; gap: 10px; font-size: 9px; }
.project-history article p { margin: 5px 0 0; color: #737c77; font-size: 9px; }
.project-section { margin-top: 14px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.row-actions button { border: 0; border-radius: 5px; padding: 6px 8px; background: #eaf3ff; color: #194887; font-size: 8px; font-weight: 700; white-space: nowrap; }
.billing-preview { display: grid; gap: 7px; margin: 4px 0 16px; padding: 13px; border-radius: 8px; background: #f3f7fb; }
.billing-preview > div { display: flex; justify-content: space-between; gap: 16px; color: #64706a; font-size: 9px; }
.billing-preview .billing-preview-total { margin-top: 3px; padding-top: 9px; border-top: 1px solid #ccd9e6; color: #194887; font-size: 11px; }

@media (max-width: 1000px) {
  .project-list { grid-template-columns: 1fr; }
  .project-finance-grid { grid-template-columns: repeat(2, 1fr); }
  .project-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .project-card-metrics { grid-template-columns: repeat(2, 1fr); }
  .project-finance-grid { grid-template-columns: 1fr; }
  .project-workspace-head { align-items: start; }
}

#wizardContent {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.wizard-scroll {
  flex: 1;
  min-height: 0;
  width: 100%;
}

.wizard-actions {
  flex: 0 0 auto;
  margin-top: 0;
  background: #fff;
}

.brand-logo {
  display: block;
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.side-brand .brand-logo {
  width: 36px;
  height: 36px;
}

/* Legacy "orange" component names now use the IP Atienza brand blue. */
.status-pill.orange {
  color: #194887;
  background: #eaf3ff;
}

.attention-banner > div > span {
  color: #78b9ff;
}

/* Private payment receipt history */
.payment-history-help {
  margin: -7px 0 14px;
  color: var(--muted);
  font-size: 9px;
}

.payment-history-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.payment-history-summary span {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  font-size: 9px;
}

.payment-history-summary strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font: 700 16px Manrope, sans-serif;
}

.payment-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.payment-history-list article {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.payment-history-head,
.payment-receipt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.payment-history-head > div > strong,
.payment-receipt-row b,
.payment-receipt-row small {
  display: block;
}

.payment-history-head > div > strong {
  font: 700 15px Manrope, sans-serif;
}

.payment-history-head > div > span,
.payment-receipt-row small,
.field-help {
  color: var(--muted);
  font-size: 8px;
}

.payment-history-list dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 13px 0;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.payment-history-list dt {
  color: var(--muted);
  font-size: 8px;
}

.payment-history-list dd {
  margin: 3px 0 0;
  font-size: 10px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.receipt-file-input {
  padding: 8px !important;
}

.field-help {
  display: block;
  margin-top: 5px;
}

@media (max-width: 540px) {
  .payment-history-summary,
  .payment-history-list dl {
    grid-template-columns: 1fr;
  }

  .payment-receipt-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Mobile browser-safe inquiry layout: the form scrolls, while actions stay visible. */
@media (max-width: 800px) {
  #inquiryModal.modal-backdrop {
    height: 100vh;
    height: 100dvh;
    padding: 0;
    place-items: stretch;
    overflow: hidden;
  }

  .inquiry-modal {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
  }

  .wizard-form {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: max(24px, env(safe-area-inset-top)) 17px max(12px, env(safe-area-inset-bottom));
  }

  .inquiry-modal input,
  .inquiry-modal select,
  .inquiry-modal textarea {
    font-size: 16px;
  }

  .wizard-top,
  .wizard-actions {
    flex: 0 0 auto;
  }

  #wizardContent {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .wizard-scroll {
    max-width: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .wizard-actions {
    position: relative;
    z-index: 2;
    padding-top: 12px;
    box-shadow: 0 -9px 18px rgba(255, 255, 255, .92);
  }
}

.location-data-note {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.5;
}

/* Public homepage hero photo. Kept at the root for the static Cloudflare deployment. */
.hero {
  background-image: url('ipacs-hero.png');
  background-position: center center;
}

@media (max-width: 800px) {
  .hero {
    background-position: 68% center;
  }

  .hero-shade {
    background:
      linear-gradient(90deg, rgba(8, 11, 10, .88) 0%, rgba(8, 11, 10, .64) 70%, rgba(8, 11, 10, .32) 100%),
      linear-gradient(0deg, rgba(8, 11, 10, .5), transparent 55%);
  }
}

/* Authenticated notification center */
.notification-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.notification-metrics article {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.notification-metrics label {
  display: block;
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.notification-metrics strong {
  display: block;
  margin-top: 5px;
  font: 700 19px Manrope, sans-serif;
}

.notification-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notification-history article {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.notification-history-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: #eaf3ff;
  color: #225cad;
}

.notification-history-icon svg {
  width: 16px;
  height: 16px;
}

.notification-history h3 {
  margin: 6px 0 2px;
  font-size: 11px;
}

.notification-history p,
.notification-history small {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 8px;
}

.notification-error {
  margin-top: 7px;
  padding: 6px 8px;
  border-radius: 4px;
  background: #fff0ee;
  color: #a93629;
  font-size: 8px;
}

.reminder-table {
  min-width: 820px;
}

.notification-completed {
  margin-top: 15px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.notification-completed h3 {
  margin: 0 0 8px;
  font-size: 11px;
}

.notification-completed p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 9px;
}

.notification-message {
  min-height: 145px !important;
}

@media (max-width: 900px) {
  .notification-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  .notification-metrics {
    grid-template-columns: 1fr;
  }

  .notification-history article {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .notification-history article > .row-actions {
    grid-column: 1 / -1;
    padding-left: 48px;
  }
}

/* Scheduling and workforce workspace */
.scheduling-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.scheduling-metrics article {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.scheduling-metrics label {
  display: block;
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.scheduling-metrics strong {
  display: block;
  margin-top: 5px;
  font: 700 19px Manrope, sans-serif;
}

.scheduling-tabs button:last-child:not(.active) {
  margin-left: auto;
}

.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.schedule-row {
  display: grid;
  grid-template-columns: 270px minmax(240px, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.schedule-row-info h3 {
  margin: 7px 0 2px;
  font-size: 12px;
}

.schedule-row-info p,
.schedule-row-info small {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 8px;
}

.schedule-timeline {
  position: relative;
  height: 34px;
  border-radius: 6px;
  background: repeating-linear-gradient(90deg,#f3f5f3 0,#f3f5f3 calc(10% - 1px),#e6eae6 calc(10% - 1px),#e6eae6 10%);
}

.schedule-bar {
  position: absolute;
  top: 7px;
  height: 20px;
  min-width: 36px;
  overflow: hidden;
  border-radius: 10px;
  background: #dfeeff;
  color: #174b8e;
}

.schedule-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  background: #79b9ff;
}

.schedule-bar span {
  position: relative;
  z-index: 1;
  display: block;
  padding: 4px 7px;
  font-size: 8px;
  font-weight: 800;
}

.schedule-actions {
  flex-wrap: nowrap;
}

.worker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.worker-card {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.worker-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.worker-card h3 {
  margin: 12px 0 2px;
  font-size: 13px;
}

.worker-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
}

.worker-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.worker-card dt {
  color: var(--muted);
  font-size: 8px;
}

.worker-card dd {
  margin: 2px 0 0;
  font-size: 10px;
  font-weight: 700;
}

.scheduling-toolbar {
  border: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  background: #fff;
}

.attendance-table {
  min-width: 820px;
}

.daily-report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.daily-report-grid article {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.daily-report-grid article > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 8px;
}

.daily-report-grid h3 {
  margin: 12px 0 4px;
  font-size: 12px;
}

.daily-report-grid > article > p {
  display: -webkit-box;
  min-height: 34px;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.daily-report-grid dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.daily-report-grid dt {
  color: var(--muted);
  font-size: 7px;
}

.daily-report-grid dd {
  margin: 2px 0 0;
  font-size: 9px;
  font-weight: 700;
}

.assigned-crew {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.assigned-crew > span {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.assigned-crew .avatar {
  grid-row: span 2;
  font-style: normal;
}

.assigned-crew b,
.assigned-crew small {
  display: block;
  min-width: 0;
}

.assigned-crew b {
  font-size: 9px;
}

.assigned-crew small {
  color: var(--muted);
  font-size: 8px;
}

@media (max-width: 1100px) {
  .scheduling-metrics,
  .worker-grid,
  .daily-report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-row {
    grid-template-columns: 240px minmax(220px, 1fr);
  }

  .schedule-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@media (max-width: 700px) {
  #appView {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .schedule-row {
    grid-template-columns: 1fr;
  }

  .schedule-actions {
    grid-column: auto;
    justify-content: flex-start;
  }
}

@media (max-width: 540px) {
  .scheduling-metrics,
  .worker-grid,
  .daily-report-grid,
  .assigned-crew {
    grid-template-columns: 1fr;
  }
}

/* Procurement workspace */
.procurement-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.procurement-metrics article {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.procurement-metrics label,
.supplier-card dt {
  display: block;
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.procurement-metrics strong {
  display: block;
  margin-top: 5px;
  font: 700 19px Manrope, sans-serif;
}

.procurement-tabs button:last-child:not(.active) {
  margin-left: auto;
}

.procurement-table {
  min-width: 820px;
}

.procurement-detail-table {
  min-width: 620px;
}

.supplier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.supplier-card {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.supplier-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.supplier-card h3 {
  margin: 12px 0 3px;
  font-size: 13px;
}

.supplier-card > p {
  min-height: 30px;
  margin: 0;
  color: var(--muted);
  font-size: 9px;
}

.supplier-card dl {
  display: grid;
  gap: 9px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.supplier-card dd {
  margin: 2px 0 0;
  font-size: 10px;
  font-weight: 700;
}

.procurement-item-head,
.procurement-bids-head {
  margin: 15px 0 8px;
}

.procurement-item-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.procurement-item-row {
  display: grid;
  grid-template-columns: 1.45fr 1.25fr .55fr .5fr .8fr 30px;
  gap: 6px;
}

.procurement-item-row input {
  width: 100%;
  min-width: 0;
  height: 37px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 9px;
}

.procurement-item-row button {
  border: 0;
  border-radius: 5px;
  background: #fff0ee;
  color: #b53b30;
  font-size: 16px;
}

.procurement-form-total {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  margin: 12px 0 17px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 10px;
}

.supplier-bid-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.supplier-bid-grid article {
  position: relative;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.supplier-bid-grid article.best-bid {
  border-color: #7db5f4;
  background: #f3f8ff;
}

.supplier-bid-grid h3 {
  margin: 8px 0 4px;
  font-size: 11px;
}

.supplier-bid-grid > article > strong {
  display: block;
  font: 700 17px Manrope, sans-serif;
}

.supplier-bid-grid p,
.supplier-bid-grid small {
  color: var(--muted);
  font-size: 8px;
}

.procurement-modal-actions {
  margin-top: 16px;
}

.procurement-order-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.procurement-history-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.procurement-history-grid > section {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.procurement-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 9px;
}

.procurement-history-row:first-of-type {
  border-top: 0;
}

.procurement-history-row span strong,
.procurement-history-row span small {
  display: block;
}

.procurement-history-row span small {
  color: var(--muted);
  font-size: 8px;
}

.procurement-history-row button {
  border: 0;
  background: transparent;
  color: var(--orange-dark);
  font-size: 8px;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .procurement-metrics,
  .supplier-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .procurement-order-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .procurement-item-row {
    grid-template-columns: 1fr 1fr 30px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
  }

  .procurement-item-row .pr-description,
  .procurement-item-row .pr-spec {
    grid-column: span 2;
  }

  .procurement-history-grid,
  .supplier-bid-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .procurement-metrics,
  .supplier-grid,
  .procurement-order-summary {
    grid-template-columns: 1fr;
  }
}

/* Inventory and equipment workspace */
.inventory-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.inventory-metrics article {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.inventory-metrics label,
.inventory-location-grid dt,
.equipment-card dt {
  display: block;
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.inventory-metrics strong {
  display: block;
  margin: 5px 0 2px;
  font: 700 19px Manrope, sans-serif;
}

.inventory-metrics small {
  color: var(--muted);
  font-size: 8px;
}

.inventory-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.inventory-filter button {
  border: 0;
  background: transparent;
  color: var(--orange-dark);
  font-size: 9px;
  font-weight: 700;
}

.inventory-tabs {
  overflow-x: auto;
}

.inventory-tabs button {
  white-space: nowrap;
}

.inventory-table-wrap {
  overflow-x: auto;
}

.inventory-table {
  min-width: 980px;
}

.inventory-movement-table {
  min-width: 900px;
}

.inventory-table td > small,
.inventory-movement-table td > small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
}

.inventory-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.inventory-actions button {
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font-size: 7px;
  font-weight: 700;
}

.inventory-actions button:hover {
  border-color: #7db5f4;
  color: var(--orange-dark);
}

.inventory-positive {
  color: #2c7c56;
}

.inventory-negative {
  color: #b6503f;
}

.inventory-availability {
  margin: 0 0 13px;
  padding: 10px 12px;
  border: 1px solid #cfe1f6;
  border-radius: 6px;
  background: #f3f8ff;
  color: #225cad;
  font-size: 9px;
  font-weight: 700;
}

.inventory-location-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  padding: 14px;
}

.inventory-location-grid article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.inventory-location-grid article > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 6px;
  background: #edf5ff;
  color: #225cad;
}

.inventory-location-grid article > span svg {
  width: 17px;
  height: 17px;
}

.inventory-location-grid h3 {
  margin: 0 0 3px;
  font-size: 11px;
}

.inventory-location-grid p,
.inventory-location-grid small {
  display: block;
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 8px;
}

.inventory-location-grid dl {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 4px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.inventory-location-grid dd,
.equipment-card dd {
  margin: 2px 0 0;
  font-size: 9px;
  font-weight: 700;
}

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  padding: 14px;
}

.equipment-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.equipment-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.equipment-card-head > span:last-child {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 6px;
  background: #edf5ff;
  color: #225cad;
}

.equipment-card-head > span svg {
  width: 17px;
  height: 17px;
}

.equipment-card h3 {
  margin: 8px 0 2px;
  font-size: 12px;
}

.equipment-card p {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
}

.equipment-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.equipment-card dd {
  overflow-wrap: anywhere;
}

.equipment-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (max-width: 1100px) {
  .inventory-metrics,
  .inventory-location-grid,
  .equipment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .inventory-table-wrap {
    margin-right: -14px;
    padding-right: 14px;
  }

  .inventory-filter {
    align-items: flex-start;
  }
}

@media (max-width: 540px) {
  .inventory-metrics,
  .inventory-location-grid,
  .equipment-grid {
    grid-template-columns: 1fr;
  }

  .inventory-location-grid,
  .equipment-grid {
    padding: 10px;
  }

  .equipment-card dl {
    grid-template-columns: 1fr;
  }
}

/* Reports and analytics workspace */
.report-filter-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(150px, .7fr) minmax(150px, .7fr) auto auto;
  align-items: end;
  gap: 9px;
  margin-bottom: 5px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.report-filter-panel .field {
  margin: 0;
}

.report-filter-label {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 8px;
  text-align: right;
}

.report-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.report-metrics article,
.report-cost-cards article {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.report-metrics label,
.report-cost-cards label {
  display: block;
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.report-metrics strong,
.report-cost-cards strong {
  display: block;
  margin: 5px 0 2px;
  overflow-wrap: anywhere;
  font: 700 18px Manrope, sans-serif;
}

.report-metrics small,
.report-cost-cards small {
  color: var(--muted);
  font-size: 8px;
}

.reports-tabs {
  overflow-x: auto;
}

.reports-tabs button {
  white-space: nowrap;
}

.report-overview-grid,
.report-arap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.report-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.report-bars > div {
  display: grid;
  grid-template-columns: 95px minmax(90px, 1fr) 90px;
  align-items: center;
  gap: 8px;
  font-size: 8px;
}

.report-bars > div > div {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf0f2;
}

.report-bars i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #5199e8;
}

.report-bars b {
  text-align: right;
}

.report-trend-key {
  display: flex;
  justify-content: flex-end;
  gap: 13px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 7px;
}

.report-trend-key span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.report-trend-key i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.report-trend-key .collection,
.report-trend span i.collection {
  background: #52a978;
}

.report-trend-key .cost,
.report-trend span i.cost {
  background: #5199e8;
}

.report-trend > div:not(.report-trend-key) {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.report-trend label {
  color: var(--muted);
  font-size: 7px;
}

.report-trend span {
  position: relative;
  display: block;
  height: 18px;
  overflow: hidden;
  border-radius: 4px;
  background: #f1f3f4;
}

.report-trend span i {
  position: absolute;
  inset: 0 auto 0 0;
  opacity: .78;
}

.report-trend span b {
  position: relative;
  z-index: 1;
  display: block;
  padding: 4px 5px;
  font-size: 7px;
}

.report-health-panel {
  margin-bottom: 12px;
}

.report-alert-list article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.report-alert-list article:first-child {
  border-top: 0;
}

.report-alert-list article > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 6px;
  background: #edf5ff;
  color: #225cad;
}

.report-alert-list article > span svg {
  width: 15px;
  height: 15px;
}

.report-alert-list strong,
.report-alert-list small {
  display: block;
}

.report-alert-list strong {
  font-size: 9px;
}

.report-alert-list small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

.report-alert-list button,
.report-arap-grid .panel-head button {
  border: 0;
  background: transparent;
  color: var(--orange-dark);
  font-size: 8px;
  font-weight: 700;
}

.report-table-wrap {
  overflow-x: auto;
}

.report-project-table {
  min-width: 1080px;
}

.report-cost-table {
  min-width: 950px;
}

.report-inventory-table {
  min-width: 920px;
}

.report-exports-table {
  min-width: 800px;
}

.report-project-table td small,
.report-inventory-table td small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

.report-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.report-list article:first-child {
  border-top: 0;
}

.report-list strong,
.report-list small,
.report-list b {
  display: block;
}

.report-list strong {
  font-size: 9px;
}

.report-list small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

.report-list article > span {
  text-align: right;
}

.report-list b {
  margin-top: 2px;
  font-size: 10px;
}

.report-cost-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 12px;
}

.report-export-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.report-export-options button {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.report-export-options button:hover {
  border-color: #7db5f4;
  background: #f6faff;
}

.report-export-options button > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 6px;
  background: #edf5ff;
  color: #225cad;
}

.report-export-options svg {
  width: 16px;
  height: 16px;
}

.report-export-options strong,
.report-export-options small {
  display: block;
}

.report-export-options strong {
  font-size: 9px;
}

.report-export-options small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

@media (max-width: 1100px) {
  .report-filter-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .report-metrics,
  .report-cost-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .report-filter-panel,
  .report-overview-grid,
  .report-arap-grid {
    grid-template-columns: 1fr;
  }

  .report-filter-label {
    text-align: left;
  }

  .report-table-wrap {
    margin-right: -14px;
    padding-right: 14px;
  }
}

@media (max-width: 540px) {
  .report-metrics,
  .report-cost-cards,
  .report-export-options {
    grid-template-columns: 1fr;
  }

  .report-bars > div {
    grid-template-columns: 78px minmax(70px, 1fr) 74px;
  }

  .report-trend > div:not(.report-trend-key) {
    grid-template-columns: 42px 1fr;
  }

  .report-trend > div:not(.report-trend-key) span:last-child {
    grid-column: 2;
  }
}
/* Quality and safety workspace */
.quality-filter {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 17px 3px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.quality-filter .field {
  width: min(430px, 100%);
}

.quality-filter > span {
  padding-bottom: 13px;
  color: var(--muted);
  font-size: 9px;
}

.quality-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.quality-metrics article {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.quality-metrics label,
.quality-metrics small {
  display: block;
  color: var(--muted);
  font-size: 8px;
}

.quality-metrics label {
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.quality-metrics strong {
  display: block;
  margin: 8px 0 2px;
  font: 700 24px Manrope;
}

.quality-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}

.quality-tabs button {
  flex: 0 0 auto;
  padding: 10px 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.quality-tabs button.active {
  border-color: var(--orange);
  color: var(--ink);
}

.quality-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.quality-action-list {
  display: grid;
}

.quality-action-list article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid #edf0ed;
}

.quality-action-list article:first-child {
  border-top: 0;
}

.quality-action-list article > span {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #eef6fb;
  color: #247cac;
}

.quality-action-list article > span svg {
  width: 14px;
}

.quality-action-list strong,
.quality-action-list small {
  display: block;
}

.quality-action-list strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-action-list small {
  color: var(--muted);
  font-size: 8px;
}

.quality-action-list button {
  border: 0;
  background: transparent;
  color: var(--orange-dark);
  font-size: 9px;
  font-weight: 800;
}

.quality-action-list article.overdue,
.quality-overdue-row {
  background: #fff8f6;
}

.quality-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.quality-quick-grid button {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 2px 10px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  text-align: left;
}

.quality-quick-grid button:hover {
  border-color: #68bce8;
  background: #f2faff;
}

.quality-quick-grid span {
  grid-row: 1 / 3;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #eaf6fc;
  color: #247cac;
}

.quality-quick-grid span svg {
  width: 16px;
}

.quality-quick-grid strong {
  font-size: 10px;
}

.quality-quick-grid small {
  color: var(--muted);
  font-size: 8px;
}

.quality-table-wrap {
  overflow-x: auto;
}

.quality-table td strong,
.quality-table td small,
.quality-action-table td strong,
.quality-action-table td small {
  display: block;
}

.quality-table td small,
.quality-action-table td small {
  color: var(--muted);
  font-size: 8px;
}

.quality-count {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 3px 6px;
  border-radius: 9px;
  background: #f0f1ef;
  color: #67706b;
  font-size: 8px;
}

.quality-count.pass {
  background: #eaf7f1;
  color: #267252;
}

.quality-count.fail {
  background: #fff0ee;
  color: #c84a3c;
}

.quality-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 15px;
}

.quality-issue-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.quality-issue-card > div:first-child {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.quality-issue-card h3 {
  margin: 13px 0 4px;
  font-size: 12px;
}

.quality-issue-card > p {
  color: var(--muted);
  font-size: 9px;
}

.quality-issue-card dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.quality-issue-card dt {
  color: var(--muted);
  font-size: 8px;
}

.quality-issue-card dd {
  margin: 1px 0 0;
  font-size: 9px;
  font-weight: 700;
}

.quality-punch-head,
.quality-check-head,
.quality-detail-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quality-punch-head {
  margin-bottom: 12px;
}

.quality-check-head {
  margin: 6px 0 9px;
}

.quality-check-head button {
  border: 0;
  background: transparent;
  color: var(--orange-dark);
  font-size: 9px;
  font-weight: 800;
}

.quality-checklist,
.quality-detail-checklist {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.quality-check-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) 110px minmax(140px, 1fr) 30px;
  gap: 7px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fafbf9;
}

.quality-check-row input,
.quality-check-row select {
  width: 100%;
  min-height: 36px;
  padding: 7px 8px;
  border: 1px solid #dfe3df;
  border-radius: 5px;
  background: #fff;
  font-size: 10px;
}

.quality-check-row button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: #fff0ee;
  color: #c84a3c;
}

.quality-detail-checklist article {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 9px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.quality-detail-checklist article strong,
.quality-detail-checklist article small {
  display: block;
}

.quality-detail-checklist article small {
  color: var(--muted);
  font-size: 8px;
}

.quality-kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.quality-kanban > section {
  min-height: 300px;
  padding: 10px;
  border-radius: 8px;
  background: #ecefec;
}

.quality-kanban-head {
  display: flex;
  justify-content: space-between;
  padding: 4px 3px 10px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.quality-kanban-head i {
  padding: 1px 7px;
  border-radius: 9px;
  background: #dce1dd;
  font-style: normal;
}

.quality-kanban article {
  margin-bottom: 8px;
  padding: 12px;
  border: 1px solid #e0e4e0;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}

.quality-kanban article h4 {
  margin: 9px 0 4px;
  font: 700 10px Manrope;
}

.quality-kanban article p,
.quality-kanban article small {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
}

.quality-kanban article.overdue {
  border-color: #f3c9c3;
}

.quality-detail-actions {
  flex-wrap: wrap;
  margin: 15px 0;
}

@media (max-width: 1100px) {
  .quality-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .quality-card-grid,
  .quality-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .quality-filter {
    align-items: stretch;
    flex-direction: column;
  }

  .quality-filter > span {
    padding: 0 0 12px;
  }

  .quality-overview-grid {
    grid-template-columns: 1fr;
  }

  .quality-check-row {
    grid-template-columns: 1fr;
  }

  .quality-check-row button {
    width: 100%;
    border-radius: 5px;
  }
}

@media (max-width: 540px) {
  .quality-metrics,
  .quality-card-grid,
  .quality-quick-grid {
    grid-template-columns: 1fr;
  }

  .quality-action-list article {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .quality-action-list article button {
    grid-column: 2;
    justify-self: start;
    padding: 0;
  }
}
/* Restricted staff workspaces */
body.role-website-assistant #appNav p,
body.role-hr-staff #appNav p{display:none}
body.role-website-assistant #appNav button:not([data-view="followups"]):not([data-view="portfolio"]),
body.role-hr-staff #appNav button:not([data-view="hr"]){display:none}
body.role-website-assistant .global-search,
body.role-website-assistant .app-header-actions,
body.role-hr-staff .global-search,
body.role-hr-staff .app-header-actions{display:none}
body.role-website-assistant .app-header,
body.role-hr-staff .app-header{justify-content:flex-start}
body.role-website-assistant .mobile-app-nav,
body.role-hr-staff .mobile-app-nav{display:none!important}
.limited-followup-list{display:grid;gap:12px}
.limited-followup-card{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:20px}
.limited-followup-card.is-complete{opacity:.68}
.limited-followup-card h3{margin:10px 0 5px}
.limited-followup-card p{margin:0 0 8px;color:var(--muted,#68706c)}
.limited-followup-card small{display:block;margin-top:5px;color:var(--muted,#68706c)}
.limited-followup-card small svg{width:14px;height:14px;vertical-align:-2px}
.limited-contact{display:flex;min-width:190px;flex-direction:column;align-items:flex-end;gap:8px}
.limited-contact a{color:inherit;text-decoration:none;font-size:13px}
.hr-period{display:flex;align-items:flex-end;gap:12px;padding:14px 18px;margin-bottom:16px}
.hr-period .field{margin:0;max-width:210px}
.hr-worker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hr-worker-card{padding:20px}
.hr-worker-card.inactive{opacity:.65}
.hr-worker-card h3{margin:10px 0 5px}
.hr-worker-card p{margin:0;color:var(--muted,#68706c)}
.hr-worker-card dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.hr-worker-card dl div{display:flex;flex-direction:column;gap:3px}
.hr-worker-card dt{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted,#68706c)}
.hr-worker-card dd{margin:0;font-weight:700;font-size:13px}
.hr-worker-card>button{border:0;background:transparent;color:var(--accent,#2489d8);font-weight:700;cursor:pointer;padding:0}
.hr-table-wrap{overflow:auto;padding:0}
.hr-table{width:100%;border-collapse:collapse;min-width:760px}
.hr-table th,.hr-table td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(0,0,0,.08);font-size:12px}
.hr-table th{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted,#68706c)}
.hr-table td small{display:block;color:var(--muted,#68706c);margin-top:3px}
.hr-formula-note{margin:-4px 0 16px;padding:10px 14px;border-radius:10px;background:#eef7ff;color:#24597d;font-size:11px;font-weight:700}
.hr-tabs{overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.hr-tabs::-webkit-scrollbar{display:none}
.hr-payroll-table{min-width:1080px}
.hr-assignment-table{min-width:960px}
.hr-row-actions{display:flex;gap:8px}
.hr-row-actions button{border:0;background:transparent;color:var(--accent,#2489d8);font-weight:700;cursor:pointer}
.hr-row-actions button.danger{color:#a14242}
.hr-assignment-help{display:flex;align-items:center;gap:14px;margin-top:16px;padding:18px}
.hr-assignment-help>div:first-child{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#eef7ff;color:#246fa8;flex:0 0 auto}
.hr-assignment-help svg{width:20px;height:20px}
.hr-assignment-help h3{margin:0 0 4px}
.hr-assignment-help p{margin:0;color:var(--muted,#68706c);font-size:12px;line-height:1.5}
.hr-assignment-help .btn{margin-left:auto;flex:0 0 auto}
.hr-assignment-hint{min-height:0;margin:-5px 0 14px;padding:10px 12px;border-radius:10px;background:#eef7ff;color:#24597d;font-size:11px}
.hr-assignment-hint:empty{display:none}
.hr-assignment-hint svg{width:14px;height:14px;vertical-align:-2px}
.hr-project-expense-intro{padding:20px;margin-bottom:16px;background:linear-gradient(135deg,#f1f8ff,#fff)}
.hr-project-expense-intro h3{margin:8px 0 5px;font-size:24px}
.hr-project-expense-intro p{max-width:780px;margin:0;color:var(--muted,#68706c);font-size:12px;line-height:1.55}
.pay-add{color:#16734a!important;font-weight:700}
.pay-deduct{color:#a14242!important;font-weight:700}
.hr-adjustment-panel{margin-top:16px;padding:18px}
.hr-adjustment-panel .panel-head{align-items:flex-start}
.hr-adjustment-panel .panel-head p{margin:5px 0 0;color:var(--muted,#68706c);font-size:12px}
.hr-adjustment-list{display:grid;gap:0;margin-top:14px;border-top:1px solid rgba(0,0,0,.08)}
.hr-adjustment-list article{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 4px;border-bottom:1px solid rgba(0,0,0,.08)}
.hr-adjustment-list article>div{display:flex;align-items:center;gap:10px}
.hr-adjustment-list article>div:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.hr-adjustment-list small{color:var(--muted,#68706c)}
.hr-adjustment-list button{border:0;background:transparent;color:var(--accent,#2489d8);font-weight:700;cursor:pointer}
.hr-adjustment-list button.danger{color:#a14242}
.payroll-preview{margin-top:8px}
.payroll-preview p{margin:0 0 5px}
@media(max-width:1000px){.hr-worker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  body.role-website-assistant .app-view,body.role-hr-staff .app-view{padding-bottom:28px}
  .limited-followup-card{flex-direction:column}.limited-contact{min-width:0;align-items:flex-start}
  .hr-period{flex-wrap:wrap}.hr-period .field{max-width:none;flex:1 1 135px}.hr-worker-grid{grid-template-columns:1fr}
  .hr-adjustment-list article{align-items:flex-start;flex-direction:column}.hr-adjustment-list article>div:last-child{flex-wrap:wrap}
  .hr-assignment-help{align-items:flex-start;flex-wrap:wrap}.hr-assignment-help .btn{width:100%;margin-left:0}
}

/* Privacy notice and consent choices for the public inquiry form. */
.privacy-consents{display:grid;gap:10px;margin-top:16px}
.privacy-choice{display:flex;align-items:flex-start;gap:10px;padding:13px 14px;border:1px solid #dce2de;border-radius:8px;background:#fff;font-size:10px;line-height:1.55;color:#424945}
.privacy-choice.required{border-color:#bed7e8;background:#f4faff}
.privacy-choice.optional{background:#f8f9f7}
.privacy-choice input{width:16px;height:16px;margin:2px 0 0;flex:0 0 16px;accent-color:#258bd2}
.privacy-choice strong{color:#171b19}
.privacy-link{display:inline;border:0;border-bottom:1px solid currentColor;background:transparent;padding:0;color:#176da8;font:inherit;font-weight:700}
.privacy-notice{max-height:min(62vh,620px);overflow-y:auto;padding-right:10px;color:#4f5753;font-size:11px;line-height:1.65}
.privacy-notice h3{margin:16px 0 4px;color:#171b19;font-size:12px}
.privacy-notice p{margin:0 0 8px}
.privacy-notice a{color:#176da8;text-decoration:underline}
.privacy-close{margin-top:16px;width:100%}
@media(max-width:540px){
  .privacy-choice{padding:11px 12px;font-size:9.5px}
  .privacy-notice{max-height:58vh}
}

/* Owner-only direct onboarding for projects already in progress. */
.existing-project-scroll{max-height:min(68vh,690px);overflow-y:auto;padding-right:8px}
.existing-project-note{background:#f2f8fc;border-color:#cfe3f0}
.existing-project-note p{margin:0;font-size:10px;line-height:1.55}
.existing-phase-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:20px 0 10px}
.existing-phase-head h3{margin:0 0 4px;font-size:14px}
.existing-phase-head p{margin:0;color:var(--muted);font-size:9px}
.existing-phase-table{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.existing-phase-labels,.existing-phase-row{display:grid;grid-template-columns:minmax(180px,1fr) 100px 100px 34px;gap:8px;align-items:center}
.existing-phase-labels{padding:8px 10px;background:#f4f6f3;color:var(--muted);font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.existing-phase-row{padding:7px 10px;border-top:1px solid var(--line)}
.existing-phase-row input{width:100%;min-width:0;border:1px solid #dce1dd;border-radius:5px;padding:8px;font-size:10px}
.existing-phase-row button{width:30px;height:30px;border:0;border-radius:5px;background:#fff0ee;color:#a14242;font-size:16px}
.existing-phase-total{display:flex;align-items:center;gap:14px;padding:11px 12px;border-top:1px solid var(--line);background:#fbfcfa;font-size:9px}
.existing-phase-total strong{margin-left:auto;font-size:12px}
.existing-phase-total span:last-child{color:#267252;font-weight:700}
.existing-phase-total span.invalid{color:#b04436}
.existing-project-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.project-empty-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:14px}
@media(max-width:600px){
  .existing-project-scroll{max-height:65vh;padding-right:3px}
  .existing-phase-head{align-items:flex-start;flex-direction:column}
  .existing-phase-labels{display:none}
  .existing-phase-row{grid-template-columns:1fr 72px 72px 30px;padding:8px 7px}
  .existing-phase-row input{padding:7px 6px;font-size:9px}
  .existing-phase-row .existing-phase-name{grid-column:1/-1}
  .existing-phase-total{align-items:flex-start;flex-wrap:wrap}
  .existing-phase-total strong{margin-left:0}
  .existing-project-actions .btn{flex:1;padding:0 10px;font-size:10px}
}

/* Owner-only project advance/down-payment workflow. */
.advance-contract-summary small{display:block;margin-top:8px;color:var(--muted,#68706c);font-size:10px}
.advance-section .panel-head{align-items:flex-start}
.advance-section .panel-head small{display:block;margin-top:5px;color:var(--muted,#68706c);font-size:10px;font-weight:400}
.advance-table{min-width:1080px}
.advance-table td small{color:var(--muted,#68706c);line-height:1.5}
.advance-recovery-line{color:#176da8!important;font-weight:700}
.advance-applied-note{display:block;margin-top:4px;color:#176da8;font-weight:700}
#advanceCheckFields.hidden,#advanceBankFields.hidden{display:none}
.advance-reference-optional label{color:var(--muted,#68706c)}
@media(max-width:600px){
  .advance-contract-summary .quote-line{align-items:flex-start;flex-direction:column}
  .advance-section .panel-head{gap:12px}
  .advance-section .panel-head button{flex:0 0 auto}
}

/* Owner-only audited correction of previously entered actual project costs. */
.actual-cost-edit-note{background:#f2f8fc;border-color:#cfe3f0}
.actual-cost-edit-note p{margin:0;font-size:10px;line-height:1.55}
.actual-cost-edit-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.actual-cost-edit-button{white-space:nowrap}
@media(max-width:600px){
  .actual-cost-edit-actions .btn{flex:1;padding-inline:10px}
}

/* Combined HR site-assignment and attendance workflow. */
.hr-daily-workforce-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}
.hr-daily-workforce-intro h3{margin:4px 0 5px}
.hr-daily-workforce-intro p{max-width:720px;margin:0;color:var(--muted,#68706c);font-size:10px;line-height:1.55}
.hr-daily-workforce-table{min-width:1120px}
.hr-daily-workforce-table td>small,.hr-daily-workforce-table td>b+small{display:block;margin-top:4px;color:var(--muted,#68706c)}
.hr-daily-attendance-check{margin:16px 0}
.hr-daily-recorded{background:#f2f8fc;border-color:#cfe3f0}
.hr-daily-recorded p{margin:0 0 5px;font-size:10px}
.hr-daily-recorded small{color:var(--muted,#68706c)}
#hrDailyAttendanceFields.hidden{display:none}
@media(max-width:700px){
  .hr-daily-workforce-intro{align-items:flex-start;flex-direction:column}
  .hr-daily-workforce-intro .btn{width:100%}
}

/* Owner review of expenses submitted from the phone app. */
.expense-approval-section .panel-head{align-items:flex-start}
.expense-approval-section .panel-head small{display:block;margin-top:5px;color:var(--muted,#68706c);font-size:10px;font-weight:400}
.expense-approval-table{min-width:1120px}
.expense-approval-table td small{color:var(--muted,#68706c);line-height:1.5}
.expense-approval-table .danger{color:#a14242}
@media(max-width:600px){.expense-approval-section .panel-head{gap:12px}}

/* Blue public navigation links */
.public-header .public-nav > a,
.public-header .public-nav > .nav-link {
  color: #000000;
  opacity: 1;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.75);
}

@media (max-width: 800px) {
  .public-header .public-nav > a,
  .public-header .public-nav > .nav-link {
    color: #000000;
    text-shadow: none;
  }
}