/* 025 Production 10/4 colour-key repair */
:root{
  --p104-work:#79c267;
  --p104-work-soft:#edf8e9;
  --p104-weekend:#f2b84b;
  --p104-weekend-soft:#fff7df;
  --p104-ot2:#e45b68;
  --p104-ot2-soft:#fff0f2;
  --p104-travel:#4ea3d8;
  --p104-travel-soft:#eaf6fd;
  --p104-rest:#8c6bc2;
  --p104-rest-soft:#f3effa;
  --p104-holiday:#f59e42;
  --p104-holiday-soft:#fff3e6;
  --p104-bank:#d82c3a;
  --p104-bank-soft:#ffedef;
  --p104-ink:#263244;
  --p104-line:#dce3ea;
}

.page-production-10-4 .colour-key-explanation{
  margin:-4px 0 15px!important;
  color:#667085!important;
  font-size:14px!important;
  line-height:1.55!important;
}

/* Make the key look like a key, not a row of empty checkboxes. */
.page-production-10-4 .legend{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:9px!important;
}

.page-production-10-4 .legend > .legend-item{
  --key:#64748b;
  --key-soft:#f4f6f8;
  display:inline-flex!important;
  min-height:39px!important;
  align-items:center!important;
  gap:9px!important;
  padding:8px 12px 8px 9px!important;
  border:1px solid color-mix(in srgb,var(--key) 30%,#e3e8ee)!important;
  border-radius:12px!important;
  color:var(--p104-ink)!important;
  background:
    linear-gradient(135deg,#ffffff 0%,var(--key-soft) 170%)!important;
  box-shadow:
    inset 3px 0 0 var(--key),
    0 3px 10px rgba(24,36,52,.04)!important;
  font-size:12px!important;
  font-weight:650!important;
  line-height:1.25!important;
}

.page-production-10-4 .legend .dot{
  display:inline-block!important;
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  border:2px solid rgba(255,255,255,.96)!important;
  border-radius:6px!important;
  background:var(--key)!important;
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--key) 72%,#253040),
    0 3px 8px color-mix(in srgb,var(--key) 22%,transparent)!important;
}

/* Correct descendant selectors. */
.page-production-10-4 .legend-work{
  --key:var(--p104-work);
  --key-soft:var(--p104-work-soft);
}
.page-production-10-4 .legend-weekend{
  --key:var(--p104-weekend);
  --key-soft:var(--p104-weekend-soft);
}
.page-production-10-4 .legend-ot2{
  --key:var(--p104-ot2);
  --key-soft:var(--p104-ot2-soft);
}
.page-production-10-4 .legend-travel{
  --key:var(--p104-travel);
  --key-soft:var(--p104-travel-soft);
}
.page-production-10-4 .legend-rest{
  --key:var(--p104-rest);
  --key-soft:var(--p104-rest-soft);
}
.page-production-10-4 .legend-holiday{
  --key:var(--p104-holiday);
  --key-soft:var(--p104-holiday-soft);
}
.page-production-10-4 .legend-bank{
  --key:var(--p104-bank);
  --key-soft:var(--p104-bank-soft);
}

/* Direct fallback selectors in case older markup is restored. */
.page-production-10-4 .dot.work{background:var(--p104-work)!important}
.page-production-10-4 .dot.weekend{background:var(--p104-weekend)!important}
.page-production-10-4 .dot.ot2{background:var(--p104-ot2)!important}
.page-production-10-4 .dot.travel{background:var(--p104-travel)!important}
.page-production-10-4 .dot.newpattern{background:var(--p104-rest)!important}
.page-production-10-4 .dot.holiday{background:var(--p104-holiday)!important}
.page-production-10-4 .dot.bank{background:var(--p104-bank)!important}

/* Match the key to the paid-hours section below. */
.page-production-10-4 .paid-cell.weekday{
  border-top:5px solid var(--p104-work)!important;
  background:linear-gradient(180deg,var(--p104-work-soft),#fff 44%)!important;
}
.page-production-10-4 .paid-cell.saturday{
  border-top:5px solid var(--p104-weekend)!important;
  background:linear-gradient(180deg,var(--p104-weekend-soft),#fff 44%)!important;
}
.page-production-10-4 .paid-cell.sunday{
  border-top:5px solid var(--p104-ot2)!important;
  background:linear-gradient(180deg,var(--p104-ot2-soft),#fff 44%)!important;
}
.page-production-10-4 .paid-cell.restday{
  border-top:5px solid var(--p104-rest)!important;
  background:linear-gradient(180deg,var(--p104-rest-soft),#fff 70%)!important;
}

.page-production-10-4 .chip-basic{
  color:#245c25!important;
  background:var(--p104-work-soft)!important;
  border:1px solid #b9ddb0!important;
}
.page-production-10-4 .chip-ot1{
  color:#714b00!important;
  background:var(--p104-weekend-soft)!important;
  border:1px solid #efd28c!important;
}
.page-production-10-4 .chip-ot2{
  color:#8d202b!important;
  background:var(--p104-ot2-soft)!important;
  border:1px solid #efb5bb!important;
}
.page-production-10-4 .chip-time{
  color:#185d89!important;
  background:var(--p104-travel-soft)!important;
  border:1px solid #add6ed!important;
}

@media(max-width:620px){
  .page-production-10-4 .legend{
    display:grid!important;
    grid-template-columns:1fr!important;
  }

  .page-production-10-4 .legend > .legend-item{
    width:100%!important;
  }
}

@media print{
  .page-production-10-4 .legend .dot{
    print-color-adjust:exact!important;
    -webkit-print-color-adjust:exact!important;
  }
}