/* Required fields have both a text marker and a subtle visual highlight. */
.field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.required-marker {
  display: none;
  color: #795317;
  background: #fff0cd;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
}
label:has(> :is(input, select, textarea):required)
  > .field-label
  .required-marker {
  display: inline-block;
}
.required-legend {
  font-size: 13px;
  line-height: 1.5;
  color: #56645d;
  margin: 0 0 18px;
}
form
  :is(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ):required {
  border-color: #b69a60;
  background: #fffdf4;
}
form :is(input, select, textarea):required:valid {
  border-color: #94ad9e;
  background: #fff;
}
form :is(input, select, textarea):is(:user-invalid, [aria-invalid="true"]) {
  border-color: #b43f31;
  background: #fff3f0;
  box-shadow: 0 0 0 1px #b43f31;
}
.field-validation {
  display: block;
  color: #a32e24;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}
form :is(input, select, textarea):focus-visible {
  outline: 3px solid #82ad98;
  outline-offset: 2px;
}

.location-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
.location-fields > .full {
  grid-column: 1 / -1;
}
.location-fields .field-help {
  margin: 0;
}
@media (max-width: 720px) {
  .location-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

.client-login-option {
  padding: 16px;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf6;
}
.client-login-option .checkbox-line {
  font-size: 14px;
  align-items: flex-start;
}
.client-login-option input[type="checkbox"] {
  width: auto;
  accent-color: var(--green);
}

.relationship-control {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}
.relationship-control label {
  min-width: 0;
}
.relationship-control select {
  width: 100%;
}

.form-section {
  min-width: 0;
  min-inline-size: 0;
  margin: 7px 0 0;
  padding: 18px 20px 22px;
  border: 1px solid #dce6dc;
  border-radius: 12px;
  background: linear-gradient(140deg, #fff, #fbfdf9);
}
.form-section legend {
  padding: 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: #284f41;
  line-height: 1.6;
}
.form-section-number {
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  margin-right: 9px;
  border-radius: 8px;
  background: #e9f1e6;
  color: #466946;
  font-size: 13px;
  vertical-align: middle;
}
.form-section-description {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  color: #54645a;
  margin: 0 0 18px;
}
.form-section-fields > label:only-child,
.form-section-fields > .relationship-control:only-child {
  grid-column: 1 / -1;
}
.form-section-fields .field-label {
  align-items: flex-start;
}
.form-section-fields .small-heading {
  color: #47624f;
  font-size: 13px;
}
@media (max-width: 720px) {
  .form-section {
    padding: 14px 13px 18px;
  }
  .form-section legend {
    font-size: 15px;
    padding: 0 5px;
  }
  .form-section-description {
    font-size: 13px;
  }
}

.form-section-fields:has(textarea[name="description"]):not(
    :has(input[name="prefix"])
  )
  > label:has(> input[name="name"]),
.form-section-fields > label:has(> select[name="status"]) {
  grid-column: 1 / -1;
}

/* Help text on neighbouring fields must not stretch name inputs. */
.form-grid label {
  align-content: start;
}
.form-grid .field-label {
  min-height: 23px;
}

.policy-search { min-width: 0; }
.policy-search > .field-help { display: block; margin: 6px 0; }
.policy-search-result { display: flex; align-items: center; gap: 12px; margin: 10px 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #f4f8f1; }
.policy-search-select { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--ink); padding: 6px; text-align: left; cursor: pointer; }
.policy-search-select strong, .policy-search-select small { display: block; overflow-wrap: anywhere; }
.policy-search-select small { margin-top: 4px; color: #54645a; }
.policy-search-select:hover, .policy-search-select:focus-visible { background: #e5efdf; border-radius: 5px; }
.policy-search-select:focus-visible { outline: 2px solid #426c55; outline-offset: 2px; }
.policy-search-result > .secondary { padding: 6px 10px; font-size: 13px; }
.policy-search-preview { width: min(520px, calc(100vw - 32px)); }

.form-grid label[hidden] { display: none; }

.service-points { display: grid; gap: 10px; }
.service-points[hidden] { display: none; }
.service-point-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.service-point-row > span { color: #54645a; }
.service-point-row input { flex: 1; min-width: 0; }
.service-point-row button { padding: 8px 10px; font-size: 13px; }
.service-points > button { justify-self: start; }

.plan-availability { display: grid; gap: 20px; }
.plan-availability .checklist { max-height: 230px; overflow-y: auto; }
.plan-region-group { min-width: 0; margin: 12px 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.plan-region-group legend { color: #47624f; font-size: 13px; font-weight: 600; padding: 0 6px; }

/* Keep required markers beside labels so both columns start at the same height. */
.form-grid .field-label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: 8px;
}
.form-grid .field-label .required-marker { white-space: nowrap; }
.relationship-rate-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdf9;
}
.relationship-rate-row > label,
.relationship-rate-row .relationship-control { min-width: 0; }
.relationship-rate-row input,
.relationship-rate-row select { height: 50px; }
.relationship-rate-row > [data-remove-rate] {
  align-self: start;
  margin-top: 30px;
  min-height: 50px;
  padding: 8px 12px;
}
@media (max-width: 650px) {
  .relationship-rate-row { grid-template-columns: minmax(0, 1fr); }
  .relationship-rate-row > [data-remove-rate] { margin-top: 0; min-height: 38px; justify-self: end; }
}

.catalog-benefit-form label:has(> select[name="benefitType"]) { grid-column: 1 / -1; }
.catalog-benefit-form .form-grid input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.catalog-benefit-form .form-grid select { min-height: 50px; }

.payment-entry-form .policy-search { grid-column: 1 / -1; }
.payment-entry-form .form-grid input:not([type="hidden"]),
.payment-entry-form .form-grid select { min-height: 50px; }
.payment-entry-form .policy-search > .field-help { margin-bottom: 0; }
.payment-entry-form .form-section-fields { align-items: start; }

.payment-account-panel { min-width: 0; padding: 14px; border: 1px solid #dce6dc; border-radius: 8px; background: #f8fbf6; }
.payment-account-identity { display: grid; gap: 4px; margin-bottom: 12px; }
.payment-account-identity > span { font-size: 13px; color: #54645a; overflow-wrap: anywhere; }
.payment-balance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.payment-balance-grid small, .payment-balance-grid strong { display: block; }
.payment-balance-grid small { font-size: 13px; color: #54645a; }
.payment-balance-grid strong { font-size: 18px; color: #284f41; margin-top: 4px; }
.payment-account-issues { margin: 12px 0; padding-left: 18px; color: #775c28; font-size: 13px; line-height: 1.7; }
.payment-account-panel details { margin-top: 12px; padding-top: 10px; border-top: 1px solid #dce6dc; }
.payment-account-panel summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #284f41; }
.payment-history-scroll { max-height: 300px; overflow: auto; margin-top: 10px; }
.payment-history-scroll table { width: 100%; }
.payment-history-scroll :is(th, td) { padding: 8px; font-size: 13px; }
.payment-history-scroll td small { display: block; color: #54645a; font-size: 13px; }
.payment-history-scroll button { padding: 6px 8px; white-space: nowrap; }
.payment-confirmation { padding: 12px; border-radius: 6px; background: #eef4ea; font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .payment-balance-grid { grid-template-columns: 1fr; gap: 8px; }
}
@media print {
  body:has(> .payment-receipt-preview[open]) > #modal { display: none !important; }
}

.payment-collection-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.payment-collection-options > button { padding: 14px; text-align: left; white-space: normal; border: 1px solid #dce6dc; }
.payment-collection-options strong, .payment-collection-options small { display: block; }
.payment-collection-options small { margin-top: 5px; color: #54645a; font-size: 13px; font-weight: 400; }
.payment-collection-options > button[aria-pressed="true"] { background: #e9f3ea; border-color: #638c72; box-shadow: inset 3px 0 #426c55; }
.payment-month-choice { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.payment-month-choice > button { min-height: 50px; }
.payment-fee-separate { margin: 14px 0; padding: 12px; border: 1px solid #e3ddcf; border-radius: 7px; background: #faf8f1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; }
.payment-fee-separate small { display: block; margin-top: 3px; font-size: 13px; color: #54645a; }
.payment-next-action { outline: 2px solid #578468 !important; outline-offset: 4px; border-radius: 6px; animation: payment-next-pulse 2.4s ease-in-out infinite; scroll-margin: 32px; }
@keyframes payment-next-pulse { 0%, 100% { box-shadow: 0 0 0 3px #57846812; } 50% { box-shadow: 0 0 0 7px #57846826; } }
.payment-year-navigation { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.payment-month-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.payment-month-grid > button { padding: 12px; }
.payment-month-grid strong, .payment-month-grid small { display: block; }
.payment-month-grid small { margin-top: 4px; font-size: 13px; font-weight: 400; }
.payment-month-grid button[aria-pressed="true"] { border-color: #426c55; background: #e9f3ea; }
@media (prefers-reduced-motion: reduce) { .payment-next-action { animation: none; } }
@media (max-width: 560px) {
  .payment-collection-options, .payment-month-choice { grid-template-columns: minmax(0, 1fr); }
}

.payment-error-attention { border: 2px solid #b77738 !important; border-radius: 7px; outline: 2px solid #b7773830; outline-offset: 3px; animation: payment-error-pulse 1.2s ease-in-out 4; scroll-margin: 32px; }
@keyframes payment-error-pulse { 0%, 100% { box-shadow: 0 0 0 2px #b7773810; } 50% { box-shadow: 0 0 0 7px #b7773840; } }
.payment-history-controls { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
.payment-history-controls label { display: grid; gap: 7px; font-size: 13px; }
.payment-history-controls input, .payment-history-controls select { min-width: 0; width: 100%; padding: 11px; border: 1px solid #dce6dc; border-radius: 6px; background: #fff; font: inherit; }
.payment-history-months { margin-top: 18px; }
.payment-history-months summary { cursor: pointer; color: #284f41; }
@media (prefers-reduced-motion: reduce) { .payment-error-attention { animation: none; } }
@media (max-width: 560px) { .payment-history-controls { grid-template-columns: 1fr; } }
@media print { body:has(> .payment-receipt-preview[open]) > dialog:not(.payment-receipt-preview) { display: none !important; } }

.payment-entry-form .form-actions > #see-payment-history { margin-right: auto; }

.payment-summary-top { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid #dce6dc; }
.payment-summary-top small, .payment-summary-top strong, .payment-summary-top span { display: block; }
.payment-summary-top small { color: #54645a; font-size: 13px; margin-bottom: 5px; }
.payment-summary-top strong { color: #284f41; font-size: 18px; }
.payment-summary-top span { color: #54645a; margin-top: 4px; }
.payment-summary-amount strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.payment-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 16px 0 0; }
.payment-summary-grid dt { color: #54645a; font-size: 13px; }
.payment-summary-grid dd { color: #284f41; font-size: 14px; font-weight: 600; margin: 4px 0 0; overflow-wrap: anywhere; }
@media (max-width: 440px) { .payment-summary-grid { grid-template-columns: 1fr; } }

.policy-search > label { position: relative; }
.policy-search [data-policy-search] { padding-right: 52px; }
.policy-search-reset { position: absolute; right: 8px; bottom: 7px; width: 36px; height: 36px; padding: 7px; display: grid; place-items: center; border: 0; border-radius: 6px; color: #406952; background: #eef4ea; cursor: pointer; }
.policy-search-reset:hover { background: #e0ecde; }
.policy-search-reset:focus-visible { outline: 2px solid #426c55; outline-offset: 2px; }

.policy-search-hover-banner { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 20; width: min(700px, calc(100vw - 32px)); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 14px 18px; background: #f5faf4; border: 1px solid #a8bda9; border-radius: 10px; box-shadow: 0 8px 24px #214e4324; color: #284f41; pointer-events: none; }
.policy-search-hover-banner[hidden] { display: none; }
.policy-search-hover-banner strong, .policy-search-hover-banner small { display: block; overflow-wrap: anywhere; }
.policy-search-hover-banner strong { font-size: 14px; }
.policy-search-hover-banner small { font-size: 13px; color: #54645a; margin-bottom: 4px; }
.policy-hover-person > small { margin: 4px 0 0; }
.policy-search-preview .modal-heading { align-items: start; margin-bottom: 20px; }
.policy-search-preview .modal-heading h2 { margin: 4px 0 0; font-size: 24px; overflow-wrap: anywhere; }
.policy-preview-eyebrow { color: #54645a; font-size: 13px; }
.policy-preview-reference { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; padding: 14px 16px; background: #edf4ea; border-radius: 8px; }
.policy-preview-reference > small { grid-column: 1; color: #54645a; font-size: 13px; }
.policy-preview-reference > strong { grid-column: 1; font-size: 17px; color: #284f41; overflow-wrap: anywhere; }
.policy-preview-reference > span { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.policy-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 22px 0; }
.policy-preview-grid dt { font-size: 13px; color: #54645a; }
.policy-preview-grid dd { font-size: 15px; color: #284f41; font-weight: 500; margin: 5px 0 0; overflow-wrap: anywhere; }
.policy-preview-record { border-top: 1px solid #dce6dc; padding-top: 12px; }
.policy-preview-record summary { color: #54645a; font-size: 13px; cursor: pointer; }
.policy-preview-record code { display: block; margin-top: 10px; font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .policy-search-hover-banner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .policy-hover-person { grid-column: 1 / -1; }
  .policy-preview-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

.policy-hover-person > .status { margin-top: 5px; }
.policy-hover-finances { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; border-top: 1px solid #dce6dc; padding-top: 10px; }
.policy-hover-finances strong { font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .policy-hover-finances { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

.policy-search-hover-banner { border-left-width: 4px; }
.policy-search-hover-banner[data-tone="neutral"] { border-left-color: #84988d; }
.policy-search-hover-banner[data-tone="warning"] { border-color: #dfc99f; border-left-color: #b38a43; background: #fffcf5; }
.policy-search-hover-banner[data-tone="danger"] { border-color: #dfbbb2; border-left-color: #ae6b59; background: #fff8f5; }
.policy-search-hover-banner[data-tone="success"] { border-left-color: #638c72; }
.policy-hover-health { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; color: #54645a; font-size: 13px; }
.policy-hover-health::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
[data-tone="warning"] .policy-hover-health { color: #7c5b28; }
[data-tone="danger"] .policy-hover-health { color: #8b5141; }
[data-tone="success"] .policy-hover-health { color: #406952; }
.policy-hover-finances [data-balance-tone="warning"] { color: #7c5b28; }
.policy-hover-finances [data-balance-tone="success"] { color: #406952; }

.refund-payment-search > label { position: relative; }
.refund-payment-search [data-refund-payment-search] { padding-right: 52px; }
.refund-search-count { font-size: 13px; color: #54645a; margin: 12px 0 8px; }
.refund-results-list { max-height: 340px; overflow-y: auto; }
.refund-payment-result { padding: 12px; margin-bottom: 10px; border: 1px solid #dce6dc; border-radius: 8px; background: #fff; }
.refund-payment-select { display: flex; align-items: start; justify-content: space-between; gap: 16px; width: 100%; border: 0; padding: 0; background: transparent; color: #284f41; text-align: left; font: inherit; cursor: pointer; }
.refund-payment-select > strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.refund-payment-select small { display: block; margin-top: 5px; color: #54645a; font-size: 13px; overflow-wrap: anywhere; }
.refund-payment-select:focus-visible { outline: 2px solid #578468; outline-offset: 4px; border-radius: 4px; }
.refund-payment-result:has(.refund-payment-select:hover) { border-color: #94ad9e; background: #f8fbf6; }
.refund-result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.refund-result-actions button { font-size: 13px; padding: 7px 10px; }
.refund-payment-summary { padding: 16px; border: 1px solid #dce6dc; border-radius: 8px; background: #f8fbf6; }
.refund-original-heading { display: flex; justify-content: space-between; gap: 16px; color: #284f41; }
.refund-original-heading small { display: block; margin-top: 5px; color: #54645a; font-size: 13px; }
.refund-balance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.refund-balance-grid small, .refund-balance-grid strong { display: block; }
.refund-balance-grid small { font-size: 13px; color: #54645a; }
.refund-balance-grid strong { margin-top: 5px; color: #284f41; font-size: 18px; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .refund-balance-grid { grid-template-columns: minmax(0, 1fr); } }

.refund-payment-result { border-left: 3px solid #a9bda6; padding: 16px; background: #fcfdfb; }
.refund-payment-select > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.refund-payment-select > span:first-child > strong { font-size: 15px; }
.refund-payment-choice { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; }
.refund-payment-choice > strong { font-size: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.refund-select-label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 6px; color: #fff; background: #214e43; font-size: 13px; font-weight: 600; white-space: nowrap; }
.refund-payment-select:hover .refund-select-label, .refund-payment-select:focus-visible .refund-select-label { background: #316655; }
.refund-payment-result .refund-result-actions { border-top: 1px solid #e3eadf; padding-top: 10px; }
.refund-payment-result .refund-result-actions button { background: #fff; border-color: #dce6dc; color: #516559; }
.refund-payment-select .refund-payment-reference { font-size: 13px; color: #59635d; }
@media (max-width: 440px) {
  .refund-payment-select { flex-direction: column; gap: 12px; }
  .refund-payment-choice { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; }
}

.claim-entry-form .policy-search { grid-column: 1 / -1; }
.claim-entry-form input:not([type="checkbox"]):not([type="hidden"]), .claim-entry-form select { min-height: 50px; }
.claim-benefit-summary { padding: 16px; border-radius: 10px; background: #f7faf4; border: 1px solid #dce6dc; }
.claim-benefit-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.claim-benefit-heading > strong { color: #284f41; font-size: 21px; }
.claim-benefit-type { display: inline-block; padding: 5px 9px; border-radius: 5px; background: #e8f0e4; color: #406952; font-size: 13px; font-weight: 600; }
.claim-service-options { margin: 12px 0; }
.claim-eligibility { margin: 16px 0 0; padding: 14px; border-radius: 8px; font-size: 13px; line-height: 1.6; }
.claim-eligibility.is-eligible { background: #edf4e9; color: #406952; }
.claim-eligibility.needs-review { background: #faf4e8; color: #775c28; }
.claim-eligibility small { display: block; margin-top: 5px; font-size: 13px; }
.claim-eligibility ul { padding-left: 18px; margin: 8px 0; }
.claim-detail-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.claim-detail-header h3 { font-size: 23px; color: #284f41; margin: 12px 0 6px; }
.claim-detail-header small { color: #54645a; font-size: 13px; }
.claim-detail-benefit { padding: 18px; border: 1px solid #dce6dc; border-radius: 10px; background: #f8fbf6; }
.claim-detail-benefit h3, .claim-detail-notes h3 { color: #284f41; font-size: 14px; margin: 0 0 10px; }
.claim-detail-benefit ul { margin: 0; padding-left: 20px; line-height: 1.8; }
.claim-detail-benefit p, .claim-detail-notes p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.6; }
.claim-detail-notes { margin-top: 20px; }
.claim-cash-amount { color: #284f41; font-size: 27px; }
.claim-stage-summary { padding: 14px; background: #edf4e9; color: #406952; border-radius: 8px; font-weight: 600; }
.claim-service-label { color: #406952; font-weight: 600; }
.cp-claim .cp-service-list { margin-top: 6px; font-size: 13px; }

.policy-select-label { display: inline-block; margin-top: 10px; padding: 9px 14px; border-radius: 6px; background: #315b46; color: #fff; font-size: 13px; font-weight: 700; }
.policy-search [data-selection-state="selected"] { color: #315b46; font-weight: 700; }


.status.payment-status { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid; border-radius: 7px; font-size: 13px; font-weight: 800; line-height: 1.3; white-space: nowrap; }
.status.payment-status--unpaid { background: #fff0ed; border-color: #bd4c35; color: #852c1c; }
.status.payment-status--partial { background: #fff2d4; border-color: #ad7415; color: #77500b; }
.status.payment-status--paid { background: #e0f1e4; border-color: #3c8050; color: #245c34; }
.sale-payment-summary { padding: 18px; margin: 12px 0 20px; border: 1px solid var(--line); border-radius: 12px; background: #f2f6ee; }
.sale-payment-title { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.sale-payment-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.sale-payment-totals small, .sale-payment-totals strong { display: block; }
.sale-payment-totals small { color: #526357; margin-bottom: 6px; }
.sale-payment-totals strong { font-size: 19px; overflow-wrap: anywhere; }
.sale-balance-due strong { color: #852c1c; }
.sale-payment-options { display: grid; gap: 12px; }
.sale-payment-options button { min-height: 65px; font-size: 17px; text-align: left; padding: 16px 20px; }
.sale-payment-options strong, .sale-payment-options small { display: block; margin-top: 6px; }
.sale-quick-amount input { font-size: 28px; font-weight: 700; min-height: 64px; }
.sale-remaining { margin: 0; padding: 12px; background: #f2f6ee; border-radius: 8px; color: #274c3c; font-weight: 700; }
.sale-payment-extra summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
.sale-quick-payment .required-legend { display: none; }
.sale-quick-payment .form-actions button[type="submit"] { min-width: 130px; font-size: 18px; }

.sale-pay-action { border: 1px solid #315b46; color: #244c39; background: #edf4e8; font-weight: 700; white-space: nowrap; }

.sale-open-action { border: 1px solid #527063; background: #fff; color: #214c3b; font-weight: 700; min-height: 40px; white-space: nowrap; }
.sale-open-action:hover, .sale-open-action:focus-visible { background: #e5eee7; border-color: #214c3b; }

.filter-group { flex-wrap: wrap; align-items: center; }
#edit-date-filter { color: #244c39; border: 1px solid #527063; font-weight: 600; }
#edit-date-filter[hidden] { display: none; }

.account-type-control { display: flex; align-items: center; gap: 10px; color: #244c39; font-weight: 600; }
.account-type-control select { border: 1px solid #527063; color: #244c39; min-height: 40px; }

.account-permission-preview { display: block; width: 250px; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }
.account-permission-preview:hover, .account-permission-preview:focus-visible { color: #244c39; text-decoration: underline dotted; text-underline-offset: 4px; }
.account-permission-preview:focus-visible { outline: 2px solid #527063; outline-offset: 3px; border-radius: 3px; }
.account-permission-tooltip { position: fixed; z-index: 1000; box-sizing: border-box; width: 560px; max-width: calc(100vw - 24px); max-height: min(320px, calc(100vh - 24px)); overflow: auto; padding: 16px 20px; border: 1px solid #91aa98; border-radius: 10px; background: #fff; color: #244c39; box-shadow: 0 8px 30px #173e292b; font-size: 13px; }
.account-permission-tooltip strong { display: block; margin-bottom: 10px; }
.account-permission-tooltip ul { margin: 0; padding: 0; list-style: none; }
.account-permission-tooltip li { display: grid; grid-template-columns: minmax(95px, .8fr) minmax(0, 1.4fr); gap: 16px; padding: 9px 0; border-bottom: 1px solid #edf1eb; overflow-wrap: anywhere; }
.account-permission-tooltip li:last-child { border-bottom: 0; }
.permission-code { font-weight: 600; }
.permission-explanation { color: #57635c; font-size: 13px; line-height: 1.6; }

.follow-up-form input:not([type="hidden"]), .follow-up-form select { min-height: 48px; }
.follow-up-form [data-field-name="title"] input { width: 100%; }
.employee-search-results { display: grid; gap: 6px; max-height: 260px; overflow: auto; }
.employee-search-result { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 12px 14px; background: #f4f8f1; border: 1px solid var(--line); border-radius: 8px; color: #244c39; text-align: left; }
.employee-search-result strong, .employee-search-result small { display: block; }
.employee-search-result small { margin-top: 4px; color: #57635c; }
.employee-search-result:hover, .employee-search-result:focus-visible { background: #e6efe1; border-color: #527063; }
.employee-selected { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; margin-top: 8px; background: #edf4e8; border-radius: 8px; color: #315b46; font-weight: 600; }

.follow-up-list { display: grid; gap: 14px; padding: 8px 22px 24px; }
.follow-up-count { color: #57645b; font-size: 13px; padding: 0 2px 4px; }
.follow-up-card { padding: 20px; border: 1px solid #dce5d9; border-left: 4px solid #527b62; border-radius: 10px; background: #fcfdfb; min-width: 0; }
.follow-up-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.follow-up-heading h3 { margin: 0; font-size: 17px; line-height: 1.5; font-weight: 600; color: #244c39; overflow-wrap: anywhere; }
.follow-up-card > summary.follow-up-heading { align-items: center; cursor: pointer; list-style: none; padding: 0; background: transparent; }
.follow-up-card > summary.follow-up-heading::-webkit-details-marker { display: none; }
.follow-up-card > summary.follow-up-heading::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.follow-up-card[open] > summary.follow-up-heading::before { transform: rotate(45deg); }
.follow-up-card > summary.follow-up-heading h3 { flex: 1; min-width: 0; }
.follow-up-card > summary.follow-up-heading:focus-visible { outline: 2px solid var(--staff-primary, #315b46); outline-offset: 6px; border-radius: 3px; }
.follow-up-status { flex-shrink: 0; border: 1px solid #9ab49b; background: #edf4e8; color: #315b46; border-radius: 6px; padding: 5px 10px; font-size: 13px; font-weight: 700; }
.follow-up-metadata { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 18px 0 0; }
.follow-up-metadata dt { font-size: 13px; color: #57645b; margin-bottom: 5px; }
.follow-up-metadata dd { margin: 0; color: #344f40; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.follow-up-context { margin: 16px 0 0; padding: 12px 14px; border-radius: 7px; background: #f0f4ec; color: #526357; font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.follow-up-footer { margin-top: 18px; padding-top: 14px; border-top: 1px solid #e4eae0; }
.follow-up-complete { display: inline-flex; align-items: center; gap: 10px; color: #315b46; font-size: 13px; font-weight: 600; cursor: pointer; }
.follow-up-complete input { width: 19px; height: 19px; margin: 0; accent-color: #315b46; }
.follow-up-card.is-overdue { border-left-color: #b9543c; }
.follow-up-status.is-overdue { background: #fff0e9; border-color: #c47c66; color: #8a3a25; }
.follow-up-card.is-done { border-left-color: #a4b3a1; background: #f7f9f5; }
.follow-up-card.is-done h3 { color: #57635a; text-decoration: line-through; }
.follow-up-status.is-done { background: #e7eee4; color: #4e6651; }
@media (max-width: 600px) { .follow-up-list { padding: 8px 14px 18px; } .follow-up-card { padding: 16px; } .follow-up-metadata { grid-template-columns: 1fr; gap: 12px; } .follow-up-heading { flex-wrap: wrap; gap: 10px; } }

.job-status--unassigned, tr[data-job-status="Unassigned"] { --job-ink: #80540c; --job-border: #bc8a28; --job-fill: #fff7e4; }
.job-status--scheduled, tr[data-job-status="Scheduled"] { --job-ink: #62458a; --job-border: #9d83bd; --job-fill: #f7f2fc; }
.job-status--progress, tr[data-job-status="In progress"] { --job-ink: #245e96; --job-border: #598ec0; --job-fill: #edf6ff; }
.job-status--completed, tr[data-job-status="Completed"] { --job-ink: #28653a; --job-border: #6b9b70; --job-fill: #edf7ed; }
.job-status--cancelled, tr[data-job-status="Cancelled"] { --job-ink: #626a72; --job-border: #a1a8ad; --job-fill: #f2f3f4; }
.status.job-status { padding: 7px 12px; border: 1px solid var(--job-border); border-radius: 6px; background: var(--job-fill); color: var(--job-ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
tr[data-job-status] td { background: var(--job-fill); }
tr[data-job-status] td:first-child { box-shadow: inset 4px 0 var(--job-border); }

#modal:has(.job-sheet) { width: min(1000px, calc(100vw - 30px)); }
.job-sheet { display: grid; gap: 16px; }
.job-sheet-hero { background: #eef4e9; border: 1px solid #d6e3d0; border-radius: 12px; padding: 22px; }
.job-sheet-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.job-sheet-hero h2 { font-size: 23px; line-height: 1.4; margin: 6px 0 0; color: #214c39; overflow-wrap: anywhere; }
.job-section-label { display: block; color: #516554; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.job-task-status { flex-shrink: 0; display: grid; gap: 6px; justify-items: end; }
.job-task-status small { color: #56645c; font-size: 13px; }
.job-sheet .job-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 18px 0 0; }
.job-sheet-hero .job-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #d6e3d0; padding-top: 16px; }
.job-sheet dt { color: #56645a; font-size: 13px; margin: 0 0 5px; }
.job-sheet dd { margin: 0; color: #294735; font-size: 14px; font-weight: 500; white-space: pre-line; overflow-wrap: anywhere; }
.job-contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.job-contact-button { border: 1px solid #9db59e; color: #244e38; background: #fff; font-weight: 600; }
.job-sheet-grid, .job-sheet-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.job-sheet-grid > :only-child { grid-column: 1 / -1; }
.job-sheet-section { padding: 20px; margin: 0; border: 1px solid #dce6d7; border-radius: 12px; background: #fff; min-width: 0; overflow-wrap: anywhere; }
.job-sheet-section h3 { margin: 0; font-size: 17px; line-height: 1.5; color: #244c39; }
.job-section-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.job-section-heading .status { font-size: 13px; padding: 6px 10px; font-weight: 700; }
.job-section-heading .status.danger { background: #fff0ed; color: #923c2d; border: 1px solid #c88d7d; }
.job-note { background: #f5f7f2; padding: 12px 14px; margin-top: 16px; border-radius: 8px; }
.job-note small, .job-claim-rejected small { color: #576459; font-size: 13px; font-weight: 600; }
.job-note p, .job-claim-rejected p { margin: 6px 0 0; white-space: pre-wrap; font-size: 13px; line-height: 1.65; }
.job-benefit-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.job-benefit-tags span { padding: 6px 10px; border: 1px solid #d4e1cc; border-radius: 6px; background: #f0f6eb; color: #3e6649; font-size: 13px; font-weight: 600; }
.job-cash-benefit { display: grid; gap: 5px; margin-top: 16px; padding: 14px; background: #f0f6eb; border-radius: 8px; }
.job-cash-benefit small { color: #576459; }
.job-cash-benefit strong { font-size: 23px; color: #315b46; }
.job-claim-rejected { padding: 12px 14px; border-radius: 8px; background: #fff0ed; color: #923c2d; margin-top: 16px; }
.job-claim-help { margin: 16px 0 0; color: #58645a; font-size: 13px; line-height: 1.7; }
.job-reference { margin-top: 12px; color: #58645a; font-size: 13px; }
.job-reference summary { cursor: pointer; }
.job-reference code { display: block; margin-top: 8px; overflow-wrap: anywhere; }
.job-person-card h3 { margin-top: 5px; font-size: 20px; }
.job-person-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 18px 0 0; }
.job-lodged-by { display: flex; justify-content: space-between; align-items: center; gap: 18px; background: #f8faf5; }
.job-lodged-by .job-contact-actions { margin: 0; }
.job-lodged-by .field-help { margin: 5px 0 0; }
.job-sheet-actions { position: sticky; bottom: 0; margin-top: 0; padding: 16px 0 5px; background: #fff; border-top: 1px solid #dce6d7; box-shadow: 0 -10px 18px #ffffffeb; z-index: 1; }
.driver-log-button, .driver-detail-button { font-weight: 700; border: 1px solid #527b62; color: #244c39; background: #f0f5eb; white-space: nowrap; }
.driver-detail-button { background: #fff; }
@media (max-width: 700px) { .job-sheet-grid, .job-sheet-people { grid-template-columns: 1fr; } .job-sheet-hero { padding: 16px; } .job-sheet-hero-top { flex-wrap: wrap; gap: 12px; } .job-task-status { justify-items: start; } .job-sheet-hero .job-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .job-lodged-by { flex-direction: column; align-items: flex-start; } .job-sheet-actions { flex-wrap: wrap; } }

.vehicle-entry { position: relative; min-width: 0; }
.vehicle-entry input { min-height: 48px; padding-right: 55px; }
.vehicle-picker-button { position: absolute; right: 6px; bottom: 6px; width: 36px; height: 36px; padding: 0; font-size: 24px; border: 1px solid #527b62; background: #edf4e8; color: #244c39; }
.vehicle-picker-dialog { width: min(620px, calc(100vw - 30px)); }
.vehicle-picker-dialog input, .vehicle-register-tools input { min-height: 46px; }
.vehicle-options { display: grid; gap: 8px; max-height: 360px; overflow: auto; }
.vehicle-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 14px; background: #f4f8f0; color: #244c39; border: 1px solid #d5e2cf; border-radius: 8px; text-align: left; }
.vehicle-option strong, .vehicle-option small { display: block; }
.vehicle-option small { margin-top: 5px; color: #57635c; }
.vehicle-option:hover, .vehicle-option:focus-visible { background: #e7f0df; border-color: #527b62; }
.vehicle-register-tools { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 20px 0; flex-wrap: wrap; }
.vehicle-register-tools label { flex: 1; min-width: 180px; }
.vehicle-register-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.vehicle-register-row strong, .vehicle-register-row small { display: block; }
.vehicle-register-row small { margin-top: 5px; color: #57635c; }
.vehicle-register-row p { margin: 8px 0 0; font-size: 13px; color: #57635c; white-space: pre-wrap; }
@media (max-width: 550px) { .vehicle-register-row { align-items: flex-start; flex-direction: column; } }

#modal:has(.driver-activity-panel), #modal:has(.fleet-panel) { width: min(1000px, calc(100vw - 30px)); }
.operations-dialog-intro { margin: 0 0 18px; color: #546459; font-size: 13px; line-height: 1.7; }
.operations-dialog-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.operations-dialog-summary > div { padding: 16px 18px; border: 1px solid #dce6d5; background: #f2f6ed; border-radius: 10px; }
.operations-dialog-summary small { display: block; color: #556557; font-size: 13px; line-height: 1.5; }
.operations-dialog-summary strong { display: block; font-size: 25px; line-height: 1.3; margin-top: 6px; color: #294f39; }
.operations-dialog-tools { display: grid; align-items: end; gap: 14px; padding: 16px; background: #f8faf5; border: 1px solid #e0e7dc; border-radius: 10px; }
.activity-tools { grid-template-columns: minmax(160px, 1.5fr) minmax(130px, 1fr) minmax(130px, 1fr); }
.fleet-tools { grid-template-columns: minmax(160px, 1fr) 150px auto; }
.operations-dialog-tools label { display: grid; gap: 7px; min-width: 0; font-size: 13px; font-weight: 600; color: #34533d; }
.operations-dialog-tools .required-marker { display: none; }
.operations-dialog-tools input, .operations-dialog-tools select { box-sizing: border-box; width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #cbdac5; border-radius: 7px; background: #fff; color: #294b36; font: inherit; font-weight: 400; }
.operations-dialog-tools input:focus, .operations-dialog-tools select:focus { outline: 2px solid #7f9d78; outline-offset: 2px; }
.operations-dialog-tools button { min-height: 46px; white-space: nowrap; }
.operations-result-count { margin: 16px 2px; font-size: 13px; color: #556458; }
.driver-event-list { display: grid; gap: 12px; }
.driver-event-day { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: #546558; letter-spacing: .02em; }
.driver-event-card { --event-colour: #557f9a; padding: 18px 20px; border: 1px solid #dce6db; border-left: 4px solid var(--event-colour); border-radius: 10px; background: #fff; min-width: 0; }
.driver-event-card[data-event-tone="completed"] { --event-colour: #52865b; }
.driver-event-card[data-event-tone="cancelled"] { --event-colour: #8b9295; }
.driver-event-card[data-event-tone="reviewed"] { --event-colour: #9380ab; }
.driver-event-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.driver-event-kind { display: inline-block; padding: 4px 8px; border-radius: 5px; background: #eef3f5; color: var(--event-colour); font-size: 13px; font-weight: 700; }
.driver-event-heading h3 { margin: 8px 0 0; font-size: 17px; color: #294b36; line-height: 1.5; overflow-wrap: anywhere; }
.driver-event-heading time { padding-top: 3px; color: #58635b; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.driver-event-actor { margin: 8px 0 0; font-size: 13px; color: #566459; }
.driver-event-actor strong { color: #49624f; font-weight: 600; }
.driver-event-changes { display: grid; gap: 8px; margin-top: 16px; }
.driver-event-change { display: grid; grid-template-columns: 110px minmax(0, 1fr) 18px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; background: #f6f8f3; border-radius: 7px; font-size: 13px; }
.driver-change-label { color: #546458; font-size: 13px; font-weight: 600; }
.driver-change-before { color: #58635b; white-space: pre-wrap; overflow-wrap: anywhere; }
.driver-change-arrow { color: #596457; text-align: center; }
.driver-change-after { color: #30553d; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.driver-event-note { margin: 14px 0 0; color: #566458; font-size: 13px; }
.operations-dialog-footer { position: sticky; bottom: 0; padding-top: 14px; background: #fff; border-top: 1px solid #e0e7dc; box-shadow: 0 -8px 16px #fffffff2; }
.operations-empty { padding: 30px 20px; border: 1px dashed #cbd9c6; border-radius: 10px; background: #f8faf5; color: #45604a; text-align: center; }
.operations-empty p { margin-bottom: 0; color: #586358; font-size: 13px; }
.fleet-card-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vehicle-register-row.fleet-card { display: block; padding: 20px; border: 1px solid #d7e3d0; border-radius: 12px; background: #fcfdfb; min-width: 0; }
.fleet-card-top { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.fleet-card h3 { margin: 5px 0 0; color: #294f39; font-size: 19px; overflow-wrap: anywhere; }
.fleet-registration { padding: 7px 10px; border: 1px solid #bfccb8; border-radius: 6px; background: #fff; color: #344f37; font-size: 13px; font-weight: 700; letter-spacing: .04em; overflow-wrap: anywhere; }
.fleet-branch { margin-top: 18px; padding-top: 14px; border-top: 1px solid #e2e9dc; }
.fleet-branch > span { color: #586358; font-size: 13px; }
.fleet-branch strong { margin-top: 5px; color: #466449; font-size: 13px; font-weight: 500; }
.vehicle-register-row .fleet-notes { padding: 10px 12px; background: #f0f5e9; border-radius: 7px; margin-top: 14px; }
.fleet-card-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.fleet-state { display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; padding: 6px 10px; font-size: 13px; font-weight: 700; }
.fleet-state.is-active { background: #e4f1dd; color: #3b6c37; border: 1px solid #a6c49a; }
.fleet-state.is-inactive { background: #f0f1ef; color: #5c625a; border: 1px solid #c5cbc1; }
.fleet-card[data-vehicle-state="Inactive"] { background: #f7f8f5; border-color: #e1e5dc; }
@media (max-width: 700px) { .activity-tools, .fleet-tools { grid-template-columns: 1fr; } .fleet-card-list { grid-template-columns: 1fr; } .operations-dialog-summary { gap: 8px; } .operations-dialog-summary > div { padding: 12px; } .operations-dialog-summary strong { font-size: 22px; } .driver-event-card { padding: 16px; } .driver-event-change { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); } .driver-change-label { grid-column: 1 / -1; } }

.recipient-search { position: relative; min-width: 0; }
.recipient-search input { min-height: 48px; }
.recipient-result-list { display: grid; gap: 7px; max-height: 260px; overflow: auto; }
.recipient-result { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; border: 1px solid #d4e2cd; border-radius: 8px; padding: 12px 14px; background: #f5f8f1; color: #294d38; text-align: left; }
.recipient-result strong, .recipient-result small, .recipient-selected-name strong, .recipient-selected-name small { display: block; }
.recipient-result small, .recipient-selected-name small { margin-top: 4px; color: #576456; font-size: 13px; }
.recipient-result:hover, .recipient-result:focus-visible { background: #e8f0e0; border-color: #789b70; }
.recipient-selected { display: flex; justify-content: space-between; align-items: center; gap: 14px; background: #edf4e5; border: 1px solid #c4d7b9; padding: 12px 14px; border-radius: 9px; }
.recipient-selected-name { background: transparent; border: 0; padding: 0; text-align: left; color: #315e3e; cursor: help; }
.recipient-hover-card { position: fixed; z-index: 20; width: 360px; box-sizing: border-box; max-width: calc(100vw - 24px); max-height: min(320px, calc(100vh - 24px)); overflow: auto; padding: 18px; border: 1px solid #9bb492; border-radius: 10px; background: #fff; color: #294e38; box-shadow: 0 12px 36px #173e2930; }
.recipient-hover-card > strong { display: block; font-size: 16px; }
.recipient-detail-role { display: inline-block; margin-top: 7px; padding: 3px 8px; font-size: 13px; font-weight: 600; background: #edf4e7; border-radius: 5px; color: #4c6847; }
.recipient-hover-card dl { display: grid; gap: 12px; margin: 16px 0 0; }
.recipient-hover-card dt { color: #596457; font-size: 13px; }
.recipient-hover-card dd { margin: 4px 0 0; color: #45643e; font-size: 13px; overflow-wrap: anywhere; }

.messaging-navigation { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
.messaging-navigation .subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.messaging-navigation .subnav button { min-height: 42px; padding: 10px 16px; border: 1px solid #c5d4bf; color: #466640; background: #fff; font-size: 13px; font-weight: 600; }
.messaging-navigation .subnav button.active { color: #fff; background: #315b46; border-color: #315b46; }
.mail-tab-count { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 10px; background: #e0ecd5; color: #315b46; font-size: 13px; }
.mailbox-panel { padding: 24px; background: #fff; border: 1px solid #dce5d5; border-radius: 13px; }
.mailbox-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.mailbox-eyebrow { display: block; color: #556450; font-size: 13px; letter-spacing: .07em; font-weight: 700; text-transform: uppercase; }
.mailbox-heading h2 { font-size: 25px; margin: 6px 0; color: #244b35; }
.mailbox-heading p { margin: 0; font-size: 13px; color: #596354; line-height: 1.7; }
.mailbox-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.mailbox-actions button { white-space: nowrap; min-height: 43px; }
.mail-sound-button[aria-pressed="true"] { background: #edf5e7; border: 1px solid #94b581; color: #3c6c34; }
.mailbox-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
.mailbox-stats > div { padding: 16px 18px; background: #f6f8f1; border: 1px solid #e1e7d9; border-radius: 9px; }
.mailbox-stats small { display: block; font-size: 13px; color: #576451; }
.mailbox-stats strong { display: block; margin-top: 6px; font-size: 25px; color: #355c3b; line-height: 1.3; }
.mailbox-stats .has-unread { background: #edf5e5; border-color: #a9c997; }
.mailbox-filters { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 14px; padding: 16px; background: #f8faf5; border: 1px solid #e1e8da; border-radius: 9px; }
.mailbox-filters:has([data-mail-type]) { grid-template-columns: minmax(0, 1.8fr) minmax(155px, 1fr) minmax(155px, 1fr); }
.mailbox-filters label { display: grid; gap: 7px; color: #4d6744; font-size: 13px; font-weight: 600; min-width: 0; }
.mailbox-filters input, .mailbox-filters select { width: 100%; min-height: 44px; padding: 10px 12px; box-sizing: border-box; border: 1px solid #ccd9c3; border-radius: 7px; background: #fff; color: #3a5833; font: inherit; font-weight: 400; }
.mailbox-filters input:focus, .mailbox-filters select:focus { outline: 2px solid #8ea980; outline-offset: 2px; }
.mailbox-results { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 18px 1px 12px; color: #5a6352; font-size: 13px; }
.mail-message-list { display: grid; gap: 14px; }
.mail-message-card { padding: 20px; border: 1px solid #dce5d4; border-left: 4px solid #c5d2bc; border-radius: 10px; background: #fff; min-width: 0; }
.mail-message-card.is-unread { background: #f6faf1; border-left-color: #648e51; border-color: #bfd2b1; border-left-width: 4px; }
.mail-message-card.is-recovery { border-left-color: #b68c3c; background: #fffdf5; }
.mail-card-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mail-peer { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mail-avatar { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border: 1px solid #cbd9be; border-radius: 11px; background: #edf3e3; color: #4f663e; font-size: 14px; font-weight: 700; }
.is-recovery .mail-avatar { background: #fff0c9; border-color: #dfc37d; color: #7a5a22; }
.mail-peer small { display: block; margin-bottom: 4px; color: #5a6353; font-size: 13px; }
.mail-peer strong { color: #49673d; font-size: 13px; overflow-wrap: anywhere; }
.mail-card-header time { display: grid; justify-items: end; gap: 4px; font-size: 13px; color: #5a6353; white-space: nowrap; }
.mail-card-header time small { font-size: 13px; font-variant-numeric: tabular-nums; }
.mail-subject-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
.mail-subject-row h3 { color: #2c5035; font-size: 18px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.mail-state { flex-shrink: 0; border: 1px solid; border-radius: 6px; padding: 5px 9px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.mail-state.is-unread { background: #e6f1db; border-color: #a9c98f; color: #466a32; }
.mail-state.is-read { background: #eef4e9; border-color: #c6d5ba; color: #55644a; }
.mail-state.is-delivered { background: #f3f5f0; border-color: #d4ddcd; color: #5a6453; }
.mail-message-body { max-width: 90ch; margin: 14px 0 0; color: #516649; font-size: 14px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
.mail-card-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-top: 16px; margin-top: 18px; border-top: 1px solid #e4eadc; }
.mail-read-note { font-size: 13px; color: #5a6352; }
.mail-card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.mail-card-actions button { border: 1px solid #b6c8a7; font-weight: 600; }
.mail-recovery-label { display: inline-block; margin-top: 12px; padding: 5px 9px; background: #fff0c9; border-radius: 5px; font-size: 13px; font-weight: 600; color: #785c28; }
.mailbox-empty { padding: 44px 20px; background: #f8faf4; border: 1px dashed #c9d7be; border-radius: 10px; text-align: center; }
.mailbox-empty > span { font-size: 30px; color: #556645; }
.mailbox-empty h3 { color: #4c683e; font-size: 18px; margin: 12px 0 6px; }
.mailbox-empty p { color: #5b6353; font-size: 13px; }
.mailbox-sound-note { margin: 18px 0 0; color: #5a6352; font-size: 13px; line-height: 1.7; }
.messaging-shell .card .status { padding: 6px 10px; font-size: 13px; font-weight: 600; }
.mail-table-subject strong { display: block; color: #3e6039; font-size: 14px; }
.mail-table-subject small { display: block; max-width: 440px; white-space: normal; line-height: 1.7; color: #5a6352; margin-top: 5px; }
.mail-table-preview { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 360px; white-space: normal; line-height: 1.75; color: #57654e; }
.mail-phone-link { color: #456a38; text-decoration: underline; text-underline-offset: 3px; }
.mail-announcement-list { display: grid; gap: 14px; padding: 0 22px 22px; }
.mail-announcement-card { padding: 20px; background: #f6f9f0; border: 1px solid #dce6d2; border-left: 4px solid #92ac73; border-radius: 9px; }
.mail-announcement-label { color: #58634a; font-size: 13px; letter-spacing: .04em; font-weight: 700; text-transform: uppercase; }
.mail-announcement-card h3 { font-size: 18px; color: #49693a; margin: 8px 0; }
.mail-announcement-card p { color: #556648; font-size: 14px; white-space: pre-wrap; line-height: 1.8; overflow-wrap: anywhere; }
.mail-announcement-card > small { color: #5b6451; font-size: 13px; }
#modal:has(.message-compose-form) { width: min(860px, calc(100vw - 30px)); }
.mail-compose-intro { background: #f2f7e9; border: 1px solid #dce6d0; border-radius: 9px; padding: 16px 18px; }
.mail-compose-intro p { margin: 7px 0 0; color: #56654c; font-size: 13px; line-height: 1.7; }
.message-compose-form input:not([type="hidden"]), .message-compose-form select { min-height: 48px; }
.message-compose-form textarea { min-height: 190px; resize: vertical; font-size: 14px; line-height: 1.8; }
.message-compose-form .required-legend { margin-bottom: 18px; color: #59634e; }
.mail-compose-count { margin: -8px 0 0; text-align: right; color: #5b644f; font-size: 13px; }
.message-compose-form .form-actions { border-top: 1px solid #e1e8d9; padding-top: 18px; }
@media (max-width: 750px) { .mailbox-heading { flex-direction: column; gap: 16px; } .mailbox-actions { width: 100%; } .mailbox-filters, .mailbox-filters:has([data-mail-type]) { grid-template-columns: 1fr; } .mailbox-panel { padding: 18px; } .mailbox-stats { gap: 8px; } .mailbox-stats > div { padding: 12px; } .mailbox-stats strong { font-size: 22px; } }
@media (max-width: 480px) { .mail-message-card { padding: 16px; } .mail-subject-row { flex-wrap: wrap; gap: 10px; } .mail-card-footer { align-items: flex-start; flex-direction: column; } .mail-card-actions { width: 100%; } .mail-card-actions button { flex: 1; } .mail-avatar { width: 34px; height: 34px; } .mailbox-results { flex-direction: column; } }

.mail-original-message { padding: 20px; background: #f5f8ee; border: 1px solid #dce7d0; border-radius: 10px; min-width: 0; }
.mail-original-message h3 { margin: 10px 0; color: #42643b; font-size: 19px; }
.mail-original-message p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; font-size: 14px; color: #506645; }
.mail-enquiry-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; color: #556549; font-size: 13px; }
.mail-state.is-read { color: #4b6840; }
.mail-state.is-delivered { color: #576450; }

details.mail-message-card { padding: 0; }
.mail-message-summary { display: block; position: relative; padding: 15px 44px 15px 18px; list-style: none; cursor: pointer; border-radius: 8px; }
.mail-message-summary::-webkit-details-marker { display: none; }
.mail-message-summary::after { content: "⌄"; position: absolute; right: 17px; top: 50%; transform: translateY(-50%); color: #526546; font-size: 23px; }
.mail-message-card[open] > .mail-message-summary::after { transform: translateY(-50%) rotate(180deg); }
.mail-message-summary:hover { background: #eef5e580; }
.mail-message-summary:focus-visible { outline: 2px solid #739b5e; outline-offset: 3px; }
.mail-message-summary .mail-avatar { width: 34px; height: 34px; font-size: 13px; border-radius: 9px; }
.mail-message-summary .mail-subject-row { margin-top: 10px; }
.mail-message-summary .mail-subject-row h3 { font-size: 16px; }
.mail-message-expanded { padding: 0 18px 18px; border-top: 1px solid #e5ecdc; }
.mail-message-expanded .mail-message-body { margin-top: 16px; }

.public-page-dashboard { display: grid; gap: 20px; }
.public-page-hero { padding: 26px; border: 1px solid #d8e5cc; border-radius: 13px; background: linear-gradient(125deg, #edf4e4, #f8faf4); }
.public-page-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.public-section-label { display: block; color: #54654c; font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.public-page-hero h2 { margin: 7px 0 8px; font-size: 26px; line-height: 1.4; color: #385e35; }
.public-page-hero p { margin: 0; color: #54644f; font-size: 13px; line-height: 1.8; }
.public-publish-state { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 8px 12px; border: 1px solid; border-radius: 7px; font-size: 13px; font-weight: 700; }
.public-publish-state.is-published { color: #446a2f; background: #e4f0d7; border-color: #a6c38c; }
.public-publish-state.is-offline { color: #5b6352; background: #f0f2eb; border-color: #cbd4be; }
.public-page-hero-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #dce7d0; }
.public-page-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.public-page-actions button, .public-page-actions a { min-height: 44px; font-weight: 600; }
.public-page-actions .home-link { display: inline-flex; align-items: center; text-decoration: none; }
.public-page-stats { display: flex; flex-wrap: wrap; gap: 14px; }
.public-page-stats > div { flex: 1; min-width: 160px; padding: 18px 22px; background: #fff; border: 1px solid #e0e7d8; border-radius: 10px; }
.public-page-stats small { display: block; color: #57654f; font-size: 13px; }
.public-page-stats strong { display: block; margin-top: 6px; font-size: 28px; font-weight: 600; color: #486837; line-height: 1.3; }
.public-page-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
.public-page-main, .public-page-sidebar { display: grid; gap: 18px; min-width: 0; }
.public-content-card, .public-share-card, .public-enquiry-card, .public-guide-card { padding: 24px; border: 1px solid #dfe7d7; border-radius: 11px; background: #fff; min-width: 0; }
.public-content-card { border-top: 4px solid #93b173; }
.public-content-card header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.public-preview-label { color: #57634f; font-size: 13px; }
.public-content-preview { padding: 24px 0; }
.public-content-preview h2 { margin: 0 0 12px; color: #3f6636; font-size: 24px; line-height: 1.5; overflow-wrap: anywhere; }
.public-content-preview > p { margin: 0; color: #516547; font-size: 14px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.public-contact-details { display: grid; gap: 16px; margin: 0; padding-top: 20px; border-top: 1px solid #e5ecdc; }
.public-contact-details > div { display: grid; grid-template-columns: 75px minmax(0, 1fr); gap: 12px; }
.public-contact-details dt { color: #55654d; font-size: 13px; }
.public-contact-details dd { margin: 0; font-size: 14px; color: #52673f; white-space: pre-wrap; overflow-wrap: anywhere; }
.public-contact-details a { color: #4d673a; text-underline-offset: 3px; }
.public-contact-missing { color: #596451; font-style: italic; }
.public-share-card h3, .public-guide-card h3 { margin: 0; color: #4d673b; font-size: 17px; }
.public-share-card p, .public-enquiry-card p { margin: 9px 0 0; color: #54654b; font-size: 13px; line-height: 1.8; }
.public-share-field { display: flex; align-items: center; gap: 12px; margin-top: 17px; padding: 9px 10px 9px 14px; background: #f6f9f0; border: 1px solid #dfe8d4; border-radius: 8px; }
.public-share-field code { flex: 1; color: #526740; font-size: 13px; overflow-wrap: anywhere; min-width: 0; }
.public-share-field button { flex-shrink: 0; border: 1px solid #bfd1ab; color: #4f6739; }
.public-copy-input { width: 100%; padding: 12px; border: 1px solid #c4d5b0; border-radius: 7px; color: #4f673a; font-size: 14px; }
.public-share-card .public-offline-note { margin-top: 12px; color: #745d2f; }
.public-enquiry-card { background: #f4f8ed; }
.public-enquiry-count { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; }
.public-enquiry-count strong { font-size: 38px; line-height: 1.2; font-weight: 600; color: #4e6737; }
.public-enquiry-count span { color: #556646; font-size: 13px; }
.public-enquiry-card p strong { color: #546640; font-weight: 600; }
.public-enquiry-card button { margin-top: 17px; min-height: 42px; color: #4e6736; border: 1px solid #b8cea0; background: #fff; font-weight: 600; }
.public-guide-card ul { display: grid; gap: 18px; padding: 0; margin: 20px 0; list-style: none; }
.public-guide-card li { display: flex; align-items: flex-start; gap: 12px; }
.public-guide-card li > span { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px; background: #eef5e4; color: #556540; font-size: 13px; font-weight: 700; }
.public-guide-card li strong { color: #52663f; font-size: 13px; font-weight: 600; }
.public-guide-card li p { margin: 5px 0 0; color: #56654b; font-size: 13px; line-height: 1.7; }
.public-review-note { border-top: 1px solid #e5ecdc; padding-top: 16px; }
.public-review-note strong { color: #566543; font-size: 13px; font-weight: 600; }
.public-review-note p { color: #59654a; font-size: 13px; line-height: 1.8; margin: 7px 0 0; }
@media (max-width: 850px) { .public-page-grid { grid-template-columns: 1fr; } .public-page-hero-top { flex-wrap: wrap; } .public-page-hero { padding: 22px; } .public-page-hero h2 { font-size: 23px; } .public-page-stats > div { min-width: 120px; padding: 16px; } }
@media (max-width: 500px) { .public-content-card, .public-share-card, .public-enquiry-card, .public-guide-card { padding: 18px; } .public-page-actions { width: 100%; } .public-page-actions button, .public-page-actions a { flex: 1; justify-content: center; } .public-contact-details > div { grid-template-columns: 1fr; gap: 5px; } .public-share-field { flex-wrap: wrap; } }

#modal:has(.public-builder) { width: min(1480px, calc(100vw - 24px)); max-height: 95vh; padding: 24px; }
.public-page-builder-form > .required-legend { display: none; }
.public-builder { min-width: 0; }
.public-builder-tabs { display: flex; gap: 8px; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid #dce6d3; overflow-x: auto; }
.public-builder-tabs button { display: flex; align-items: center; gap: 9px; padding: 11px 15px; color: #526642; background: #f7faf2; border: 1px solid #dbe5d1; border-radius: 8px; font-size: 13px; white-space: nowrap; }
.public-builder-tabs button > span { font-size: 13px; opacity: .7; }
.public-builder-tabs button.active { background: #315b46; color: #fff; border-color: #315b46; }
.public-builder-workspace { display: grid; grid-template-columns: minmax(330px, 420px) minmax(0, 1fr); gap: 24px; align-items: start; }
.public-builder-controls { height: min(67vh, 760px); overflow: auto; padding: 3px 12px 20px 2px; }
.public-builder-controls [data-builder-panel] { display: grid; gap: 17px; }
.builder-kicker { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #58644a; }
.public-builder-controls header { padding: 0 0 6px; }
.public-builder-controls h3 { font-size: 22px; line-height: 1.4; color: #42663b; margin: 6px 0 9px; }
.public-builder-controls header p { font-size: 13px; line-height: 1.8; color: #55644a; margin: 0; }
.public-builder-controls label { display: grid; gap: 7px; min-width: 0; font-size: 13px; color: #526642; font-weight: 500; }
.public-builder-controls input:not([type=checkbox]):not([type=range]):not([type=color]), .public-builder-controls select, .public-builder-controls textarea { width: 100%; padding: 11px 12px; min-height: 44px; border: 1px solid #d3dfc7; border-radius: 7px; background: #fff; color: #42663b; font: inherit; box-sizing: border-box; }
.public-builder-controls textarea { min-height: 110px; resize: vertical; line-height: 1.7; }
.public-builder-controls input[type=range] { width: 100%; accent-color: #658e4a; }
.public-builder-controls [data-radius-value] { font-size: 13px; font-weight: 400; color: #58644c; }
.public-template-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.public-template-option { display: block; text-align: left; padding: 8px; border: 1px solid #dce6d1; border-radius: 10px; background: #fff; min-width: 0; color: #4b683f; }
.public-template-option[aria-pressed=true] { border: 2px solid #6f9557; padding: 7px; background: #f4f9ed; }
.public-template-option:hover { border-color: #8ba977; }
.template-option-name { display: flex; justify-content: space-between; align-items: center; gap: 5px; margin: 9px 2px 4px; font-size: 13px; font-weight: 600; }
.template-option-name > span { font-size: 13px; color: #526740; }
.public-template-option > small { display: block; margin: 0 2px 4px; color: #5a6451; font-size: 13px; line-height: 1.7; }
.public-template-thumb { display: block; position: relative; height: 125px; background: var(--thumb-bg); border-radius: 6px; overflow: hidden; border: 1px solid #0000000c; }
.public-template-thumb i { display: block; position: absolute; }
.thumb-nav { top: 10px; left: 10px; right: 10px; height: 2px; background: var(--thumb-primary); opacity: .6; }
.thumb-headline { top: 32px; left: 12px; width: 39%; height: 7px; background: var(--thumb-primary); box-shadow: 0 12px var(--thumb-primary); }
.thumb-art { top: 24px; right: 12px; width: 36%; height: 65px; background: var(--thumb-accent); border-radius: 50% 50% 0 0; }
.thumb-card { top: 100px; height: 16px; width: 25%; background: color-mix(in srgb, var(--thumb-primary) 13%, var(--thumb-bg)); border: 1px solid color-mix(in srgb, var(--thumb-primary) 25%, transparent); }
.thumb-card.one { left: 10px; }.thumb-card.two { left: 37%; }.thumb-card.three { right: 10px; }
.thumb-nocturne .thumb-headline { top: 39px; left: 24%; width: 52%; height: 5px; z-index: 1; box-shadow: 0 9px var(--thumb-primary); }
.thumb-nocturne .thumb-art { top: 23px; left: 23%; right: auto; height: 80px; width: 54%; border: 1px solid var(--thumb-primary); border-radius: 50%; background: transparent; opacity: .4; }
.thumb-bloom .thumb-art { border-radius: 50% 50% 20px 20px; height: 62px; }
.thumb-bloom .thumb-card { border: 0; border-radius: 8px; background: #ffffff; }
.thumb-clarity .thumb-art { background: var(--thumb-primary); border-radius: 4px; box-shadow: 4px 4px var(--thumb-accent); height: 63px; }
.thumb-clarity .thumb-card { top: 103px; height: 3px; width: calc(100% - 20px); left: 10px; right: auto; }
.thumb-clarity .thumb-card.two { top: 109px; }.thumb-clarity .thumb-card.three { top: 115px; }
.thumb-ubuntu .thumb-headline { top: 24px; left: 21%; width: 58%; height: 5px; box-shadow: 0 9px var(--thumb-primary); }
.thumb-ubuntu .thumb-art { border-radius: 0; left: 10px; right: 10px; top: 48px; height: 40px; width: auto; }
.thumb-ubuntu .thumb-card { height: 3px; width: calc(100% - 20px); left: 10px; top: 100px; }.thumb-ubuntu .thumb-card.two { top: 107px; }.thumb-ubuntu .thumb-card.three { top: 114px; }
.builder-colours { display: grid; gap: 10px; padding: 15px; border: 1px solid #dde7d1; border-radius: 8px; background: #f9fbf5; }
.public-builder-controls .builder-colour-field { display: flex; align-items: center; justify-content: space-between; gap: 15px; font-size: 13px; }
.builder-colour-field > span:last-child { display: flex; align-items: center; gap: 9px; }
.builder-colour-field input[type=color] { padding: 2px; width: 40px; height: 30px; border: 1px solid #d1ddc4; border-radius: 4px; background: #fff; }
.builder-colour-field output { font-size: 13px; color: #58644d; min-width: 58px; }
.public-builder-upload { display: grid; gap: 12px; padding: 16px; background: #f8fbf2; border: 1px solid #dce7ce; border-radius: 9px; }
.public-builder-upload strong { display: block; color: #51673c; font-size: 13px; }
.public-builder-upload small { display: block; color: #5a644f; font-size: 13px; margin-top: 5px; }
.public-builder-upload [data-image-preview] { min-height: 45px; color: #5a6450; font-size: 13px; }
.public-builder-upload img { display: block; max-width: 100%; max-height: 130px; object-fit: contain; background: #fff; border: 1px solid #e5eddc; border-radius: 6px; }
.public-builder-upload button { justify-self: start; font-size: 13px; padding: 8px 11px; }
.public-builder-upload input[type=file] { font-size: 13px!important; padding: 8px!important; }
.builder-note { padding: 15px; border: 1px solid #dce6d0; background: #f4f8ed; border-radius: 8px; font-size: 13px; color: #586549; line-height: 1.8; }
.builder-note p { margin: 7px 0 0; }
.builder-section-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 12px; background: #fff; border: 1px solid #dce7d1; border-radius: 8px; margin-bottom: 10px; }
.public-builder-controls .builder-section-row label { display: flex; align-items: center; gap: 11px; font-size: 13px; }
.builder-section-row small { display: block; font-size: 13px; color: #58644b; margin-top: 3px; }
.builder-section-row input { accent-color: #6b954c; width: 16px; height: 16px; }
.builder-section-row > div { display: flex; gap: 5px; }
.builder-section-row button { border: 1px solid #d5e2c8; border-radius: 5px; background: #f7faf1; color: #51673e; width: 29px; height: 31px; }
.public-builder-preview { min-width: 0; border: 1px solid #dce6d3; border-radius: 10px; overflow: hidden; background: #eef2e9; }
.public-builder-preview > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; padding: 14px 16px; border-bottom: 1px solid #e0e8d8; }
.public-builder-preview > header strong { display: block; margin-top: 4px; color: #51673d; font-size: 14px; }
.builder-device-buttons { display: flex; padding: 3px; border: 1px solid #dce6d3; border-radius: 7px; gap: 3px; }
.builder-device-buttons button { padding: 6px 10px; border: 0; border-radius: 4px; background: transparent; color: #59644e; font-size: 13px; }
.builder-device-buttons button[aria-pressed=true] { background: #eaf3dd; color: #4d6831; font-weight: 600; }
.public-preview-stage { height: min(58vh, 670px); min-height: 400px; overflow: hidden; position: relative; background: #e4e9df; }
.public-preview-stage iframe { border: 0; position: absolute; top: 0; transform-origin: top left; background: #fff; }
.public-builder-preview > p { margin: 0; padding: 10px 15px; font-size: 13px; color: #5a634f; line-height: 1.7; background: #fafcf6; }
.public-page-builder-form > .form-actions { position: sticky; bottom: -24px; z-index: 5; padding: 16px 0 4px; margin-top: 18px; border-top: 1px solid #dce6d2; background: #fff; box-shadow: 0 -10px 20px #ffffffeb; }
@media(max-width:1000px) { .public-builder-workspace { grid-template-columns: 340px minmax(0,1fr); gap: 16px; }.public-builder-tabs button { padding: 10px 12px; font-size: 13px; }.public-template-grid { gap: 9px; }.public-template-thumb { height: 120px; } }
@media(max-width:800px) { #modal:has(.public-builder) { padding: 18px; }.public-builder-workspace { grid-template-columns: 1fr; }.public-builder-controls { height: 470px; padding-right: 8px; }.public-template-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.public-builder-preview { margin-top: 8px; }.public-preview-stage { height: 520px; }.public-page-builder-form > .form-actions { bottom: -18px; } }

.public-design-current { display: block; color: #576549; font-size: 13px; margin-top: 9px; }
.public-template-option > small { font-size: 13px; color: #556548; }

.client-design-dashboard { display:flex;align-items:center;justify-content:space-between;gap:24px;margin:24px 0;padding:25px 28px;background:#fff;border:1px solid var(--line);border-radius:16px }
.client-design-dashboard h3 { margin:8px 0;font-size:21px }
.client-design-dashboard p { margin:0;color: #54645c;max-width:700px;line-height:1.7 }
.client-design-dashboard button { flex-shrink:0 }
.cd-restore { width:100%;margin-top:18px }
@media(max-width:720px) { .client-design-dashboard { align-items:stretch;flex-direction:column;padding:22px } }

/* Checkbox options stay beside their labels, including inside sectioned forms. */
.form-grid label.checkbox-line { display:flex;align-items:flex-start;gap:10px;line-height:1.5 }
.form-grid label.checkbox-line input[type=checkbox] { width:18px;height:18px;min-height:18px;max-width:18px;padding:0;margin:2px 0 0;flex:0 0 18px }
.auth-simple .required-marker { display: none !important; }
/* Employee access editor: everyday choices first, optional limits on demand. */
#entry-form:has([name="role"]) { --employee-surface: var(--staff-surface, #fff); }
#entry-form:has([name="role"]) > .required-legend { display: none; }
#entry-form:has([name="role"]) .form-section { background: var(--employee-surface); border-radius: 14px; padding: 18px 20px; }
#entry-form:has([name="role"]) .form-section-description { margin-top: 0; font-size: 13px; }
#entry-form:has([name="role"]) .required-marker { display: none; }
#entry-form:has([name="role"]) :is(input, select):required:not(:focus):not(:user-invalid):not([aria-invalid="true"]) { background: var(--employee-surface); border-color: var(--staff-border, #bdccc2); }
.employee-identity { display: flex; align-items: center; gap: 14px; padding: 4px 0 14px; }
.employee-identity-avatar { display: grid; place-items: center; flex: 0 0 46px; height: 46px; border-radius: 14px; background: var(--staff-soft, #e8efdf); color: var(--staff-primary, #345b44); font-weight: 700; }
.employee-identity strong, .employee-identity small { display: block; }
.employee-identity strong { font-size: 17px; }
.employee-identity small { margin-top: 4px; font-size: 13px; color: var(--staff-muted, #5c6b61); overflow-wrap: anywhere; }
.employee-permissions { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.employee-permissions > summary { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 8px; padding: 15px; cursor: pointer; background: var(--staff-soft, #f1f5ed); font-weight: 600; }
.employee-permissions > summary::after { content: "+"; font-size: 20px; }
.employee-permissions[open] > summary::after { content: "−"; }
.employee-permissions summary small { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--staff-muted, #58685e); }
.employee-permissions > div { padding: 14px; }
.employee-permissions .checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; max-height: 320px; overflow: auto; border: 0; padding: 0; }
.employee-permissions .checklist label { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 5px; font-size: 13px; font-weight: 500; }
.employee-permissions .checklist input { flex-shrink: 0; }
.employee-help { margin: 12px 0 0; font-size: 13px; color: var(--staff-muted, #58685e); }
.employee-help summary { cursor: pointer; }
.employee-help p { line-height: 1.7; max-width: 65ch; }
.employee-option { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.employee-option > summary { padding: 16px 20px; cursor: pointer; font-weight: 600; }
#entry-form .employee-option .form-section { margin: 0; border: 0; }
.employee-option .form-section > legend { display: none; }
#entry-form:has([name="role"]) .form-actions { position: sticky; bottom: 0; z-index: 2; margin-top: 18px; padding: 16px 0 4px; border-top: 1px solid var(--line); background: var(--employee-surface); }
@media (max-width: 600px) {
  .employee-permissions .checklist { grid-template-columns: minmax(0, 1fr); }
  #entry-form:has([name="role"]) .form-section { padding: 16px; }
}
.auth-simple .auth-form input:required:not(:user-invalid):not([aria-invalid="true"]):not(:focus) {
  border-color: #94ad9e;
  background: #fff;
}
.claim-document-warning { padding: 12px 14px; border: 1px solid #dfc991; border-radius: 8px; background: #fff6df; color: #71551c; font-size: 13px; line-height: 1.6; }
.policy-overview { --policy-surface: var(--staff-surface, #fff); display: grid; gap: 20px; }
.policy-overview-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.policy-overview-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: var(--staff-primary, #315b46); background: var(--staff-soft, #e8efdf); }
.policy-overview-heading > div { flex: 1; min-width: 0; }
.policy-overview-heading strong { display: block; font-size: 18px; }
.policy-overview-heading small { display: block; color: var(--staff-muted, #5a6a60); margin-top: 4px; }
.policy-overview-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.policy-overview-figures section { border-radius: 12px; padding: 18px; background: var(--staff-soft, #f0f4e9); }
.policy-overview-figures small { display: block; font-size: 12px; color: var(--staff-muted, #59695f); }
.policy-overview-figures strong { display: block; margin-top: 10px; color: var(--staff-primary, #234b3d); font-size: 24px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.policy-overview-checks { padding: 14px 16px; border-radius: 10px; font-size: 13px; line-height: 1.6; }
.policy-overview-checks.needs-review { background: #fff4dc; border-left: 3px solid #b18429; color: #75541c; }
.policy-overview-checks.is-ready { background: var(--staff-soft, #edf4e6); border-left: 3px solid #60805a; }
.policy-overview-checks ul { padding-left: 18px; margin: 5px 0 0; }
.policy-overview-section h3 { margin: 0 0 12px; font-size: 15px; }
.policy-overview .detail-list { gap: 0 20px; margin: 0; }
.policy-overview .detail-list > div { min-width: 0; padding: 10px 0; border-radius: 0; background: transparent; border-bottom: 1px solid var(--line); font-size: 14px; overflow-wrap: anywhere; }
.policy-overview .detail-list small { font-size: 12px; margin-bottom: 5px; }
.policy-overview-notes { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.policy-overview-notes summary { cursor: pointer; font-weight: 600; }
.policy-overview-override { font-size: 13px; line-height: 1.6; }
.policy-overview-tools { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.policy-overview-tools .secondary { min-height: 36px; padding: 7px 12px; background: var(--policy-surface); font-size: 12px; }
.policy-overview-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; position: sticky; bottom: 0; padding: 14px 0 4px; background: var(--policy-surface); border-top: 1px solid var(--line); }
@media (max-width: 480px) { .policy-overview-figures { grid-template-columns: minmax(0, 1fr); } .policy-overview-actions > button { flex: 1; } }
.driver-task-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; padding: 0 22px 22px; align-items: start; }
.driver-task-card { padding: 20px; border: 1px solid var(--line); border-top: 3px solid var(--staff-primary, #55745a); border-radius: 14px; background: var(--staff-surface, #fff); min-width: 0; }
.driver-task-card[data-driver-state="Unassigned"] { border-top-color: #b38936; }
.driver-task-card > header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.driver-task-card > header > div { flex: 1; min-width: 120px; }
.driver-task-symbol { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--staff-soft, #edf1e5); color: var(--staff-primary, #4e6b4f); }
.driver-task-card header small { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--staff-muted, #637166); }
.driver-task-card h3 { margin: 5px 0 0; font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.driver-task-schedule { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 16px; margin-top: 18px; border-radius: 10px; background: var(--staff-soft, #f2f5ed); }
.driver-task-schedule small { display: block; font-size: 12px; color: var(--staff-muted, #637166); margin-bottom: 6px; }
.driver-task-schedule strong { font-size: 14px; font-weight: 600; }
.driver-task-info { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; }
.driver-task-info > div { min-width: 0; }
.driver-task-info dt { color: var(--staff-muted, #637166); font-size: 12px; margin-bottom: 5px; }
.driver-task-info dd { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.driver-task-info a { display: block; color: var(--staff-primary, #315b46); text-decoration-color: #b6c8b9; text-underline-offset: 3px; }
.driver-task-notes { margin-bottom: 16px; font-size: 13px; }
.driver-task-notes summary { cursor: pointer; color: var(--staff-primary, #315b46); }
.driver-task-notes p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.driver-task-card footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; }
.driver-task-card footer :is(button, a) { font-size: 13px; }
@media (max-width: 500px) { .driver-task-grid { padding: 0 14px 14px; } .driver-task-card { padding: 16px; } .driver-task-info { grid-template-columns: minmax(0, 1fr); } .driver-task-card footer > * { flex: 1; text-align: center; } }
.driver-task-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.driver-task-summary::-webkit-details-marker { display: none; }
.driver-task-summary > div:not(.driver-task-schedule) { flex: 1; min-width: 120px; }
.driver-task-summary small { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--staff-muted, #637166); }
.driver-task-summary .driver-task-schedule { flex: 0 0 100%; margin-top: 6px; }
.driver-task-summary .driver-task-schedule small { text-transform: none; letter-spacing: normal; font-size: 12px; }
.driver-task-chevron { width: 8px; height: 8px; flex: 0 0 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin: 0 4px; }
.driver-task-card[open] .driver-task-summary > .driver-task-chevron { transform: rotate(45deg); }
.driver-task-summary:focus-visible { outline: 2px solid var(--staff-primary, #315b46); outline-offset: 6px; border-radius: 6px; }
.claim-driver-arrangements { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--staff-soft, #f4f7ef); }
.claim-driver-arrangements > summary { cursor: pointer; font-weight: 600; }
.claim-driver-arrangements > summary small { margin-left: 10px; font-weight: 400; color: var(--staff-muted, #617063); }
.claim-driver-arrangements > .form-grid { margin-top: 16px; }
.policy-overview .policy-overview-section { padding: 18px; border: 1px solid var(--line); border-radius: 14px; }
.policy-overview-section h3 { display: flex; align-items: center; gap: 10px; }
.policy-overview-section h3 > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--staff-soft, #e8efdf); color: var(--staff-primary, #456747); }
.policy-overview-section h3 svg { width: 19px; height: 19px; }
.policy-cover-section { background: var(--staff-soft, #f8faf4); }
.policy-person-section { background: var(--policy-surface); }
.policy-overview .policy-detail-services { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 16px 0 0; list-style: none; }
.policy-overview .policy-detail-services li { padding: 7px 12px; border-radius: 8px; background: var(--staff-surface, #fff); border: 1px solid var(--line); color: var(--staff-primary, #315b46); font-size: 13px; }
.policy-overview .policy-detail-services li::before { content: "✓"; margin-right: 7px; }
.policy-overview-footer { position: sticky; bottom: 0; z-index: 3; display: grid; gap: 12px; padding: 14px 0 4px; border-top: 1px solid var(--line); background: var(--policy-surface); box-shadow: 0 -10px 20px -16px #193b2e50; }
.policy-overview-footer .policy-overview-actions { position: static; padding: 12px 0 0; }
.policy-overview-footer .policy-overview-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; }
.policy-overview-footer .policy-overview-tools .secondary { border-color: transparent; background: var(--staff-soft, #f0f4e9); white-space: normal; }
.policy-overview-footer .policy-overview-tools .secondary:hover { border-color: var(--staff-primary, #315b46); }
@media (max-width: 600px) { .policy-overview-footer .policy-overview-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } .policy-overview .policy-overview-section { padding: 14px; } }
.payment-countdown { width: min(420px, calc(100vw - 32px)); padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--staff-surface, #fff); color: var(--staff-ink, #234b3d); text-align: center; }
.payment-countdown::backdrop { background: #193b2e66; backdrop-filter: blur(3px); }
.payment-countdown-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 14px; background: var(--staff-soft, #e8efdf); color: var(--staff-primary, #315b46); font-size: 26px; }
.payment-countdown h2 { margin: 0 0 10px; font-size: 22px; }
.payment-countdown-amount { display: block; margin: 18px 0 10px; font-size: 34px; font-variant-numeric: tabular-nums; }
.payment-countdown-meta, .payment-countdown [data-countdown] { font-size: 13px; color: var(--staff-muted, #5c6c61); }
.payment-countdown progress { display: block; width: 100%; height: 7px; margin-top: 22px; border: 0; border-radius: 8px; overflow: hidden; accent-color: var(--staff-primary, #315b46); background: var(--staff-soft, #e8efdf); }
.payment-countdown progress::-webkit-progress-bar { background: var(--staff-soft, #e8efdf); }
.payment-countdown progress::-webkit-progress-value { background: var(--staff-primary, #315b46); }
.payment-countdown progress::-moz-progress-bar { background: var(--staff-primary, #315b46); }
.payment-countdown [data-cancel] { width: 100%; margin-top: 8px; }
.task-progress-list { display: grid; gap: 12px; margin-bottom: 20px; }
.task-progress { border: 1px solid var(--line); border-radius: 12px; background: var(--staff-surface, #fff); }
.task-progress > summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px; cursor: pointer; font-weight: 600; }
.task-progress ol { display: flex; flex-wrap: wrap; gap: 18px 0; list-style: none; padding: 12px 20px 24px; margin: 0; }
.task-progress li { position: relative; flex: 1 1 160px; padding: 18px 16px 0 0; border-top: 2px solid var(--staff-primary, #6f8d65); }
.task-progress li::before { content: ""; position: absolute; left: 0; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--staff-primary, #6f8d65); }
.task-progress li strong, .task-progress li time, .task-progress li small { display: block; }
.task-progress li strong { font-size: 13px; }
.task-progress li time, .task-progress li small { margin-top: 5px; font-size: 12px; color: var(--staff-muted, #607065); line-height: 1.5; }
.task-progress li.is-pending { border-top-style: dashed; border-top-color: var(--line); }
.task-progress li.is-pending::before { background: var(--line); }
.task-progress li.is-terminal strong { color: var(--staff-primary, #315b46); }

.vehicle-picker-dialog { max-height: 88dvh; overflow: auto; padding: 24px; border-radius: 14px; }
.vehicle-picker-dialog > .modal-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.vehicle-picker-dialog > .modal-heading h2 { margin: 0; font-size: 22px; }
.vehicle-picker-dialog > label { display: grid; gap: 8px; margin-bottom: 18px; font-size: 12px; font-weight: 600; }
.vehicle-picker-dialog > label input { width: 100%; min-width: 0; padding: 11px 13px; border: 1px solid var(--staff-border, #a4bbae); border-radius: 8px; background: var(--staff-surface, #fff); color: var(--staff-ink, #253c35); font: inherit; font-weight: 400; }
.vehicle-picker-dialog .field-help { line-height: 1.6; }
@media (max-width: 500px) { .vehicle-picker-dialog { padding: 18px; } }