/* WorkOps v158 — site-wide dark-theme contrast hardening.
   Primary information on dark surfaces is white/near-white; muted greys are secondary only.
   Document previews and Engineer Mode intentionally retain their own light themes. Trial signup gate uses dark login skin (signup-skin-v371). */

/* Core dark working surfaces */
.app-shell .panel,
.app-shell .workflow-main,
.app-shell .workflow-profile,
.app-shell .quote-card,
.app-shell .quote-step,
.app-shell .price-card,
.app-shell .cert-pref-card,
.app-shell .membership-status-card,
.app-shell .document-branding-card,
.app-shell .stats article,
.app-shell .money-strip>div,
.app-shell .list-row,
.app-shell .workspace-item,
.app-shell .workspace-history-row,
.app-shell .search-result,
.app-shell .invoice-detail-addresses>div,
.app-shell .invoice-lines>div,
.app-shell .accounting-provider-card,
.app-shell .accounting-history-row,
.app-shell .stripe-status-facts>div,
.app-shell .system-health-row,
.app-shell .setup-check,
.app-shell .agenda-job,
.app-shell .quick-book-section,
.app-shell .quick-more,
.app-shell .quick-booked-jobs,
.app-shell .quick-day-job,
.app-shell .quick-route-check,
.app-shell .quick-day-empty,
.app-shell .form-confidence,
.app-shell .inline-site-block,
.app-shell .oneoff-customer,
.app-shell .cert-section,
.app-shell .cert-appliance,
.app-shell .appliance-card-v2,
.app-shell .workspace-hero,
.app-shell .workspace-note,
.app-shell .quote-line,
.app-shell .quote-line-v2,
.app-shell .catalog-row,
.app-shell .quote-more-v3,
.app-shell .saved-price-picker,
.app-shell .toggle-grid label,
.app-shell .iv-result>div,
.app-shell .assessment{color:#f7f8ff!important}

/* Headings / values / money must never inherit old light-theme navy */
.app-shell .page-head h1,
.app-shell .panel-head h2,
.app-shell .workflow-head h2,
.app-shell .workflow-profile h3,
.app-shell .quote-section-title h3,
.app-shell .list-row b,
.app-shell .workspace-item b,
.app-shell .workspace-history-row b,
.app-shell .search-result b,
.app-shell .stats strong,
.app-shell .money-strip b,
.app-shell .invoice-summary strong,
.app-shell .invoice-summary b,
.app-shell .invoice-detail-total strong,
.app-shell .system-health-summary{background:#121526!important;border:1px solid #292e44!important;color:#eef1fb!important}.app-shell .system-health-summary strong,
.app-shell .price-card h3,
.app-shell .price-card .price strong,
.app-shell .membership-status-card h3,
.app-shell .quick-day-head b,
.app-shell .quick-day-time b,
.app-shell .quick-day-job strong,
.app-shell .quick-time-label b,
.app-shell .quick-booked-head b,
.app-shell .quick-booked-row b,
.app-shell .agenda-job time,
.app-shell .agenda-job b,
.app-shell .agenda-job>strong,
.app-shell .appliance-check-row>span,
.app-shell .cert-section-title b,
.app-shell .appliance-card-v2 .cert-card-head b,
.app-shell .quote-line-total b,
.app-shell .accounting-provider-head b,
.app-shell .accounting-history-row b,
.app-shell .stripe-status-facts b{color:#ffffff!important}

/* Supporting text: clearly readable, visibly secondary */
.app-shell .page-head p,
.app-shell .workflow-head p,
.app-shell .hint,
.app-shell .list-row small,
.app-shell .workspace-item small,
.app-shell .workspace-history-row small,
.app-shell .search-result small,
.app-shell .agenda-job small,
.app-shell .agenda-type,
.app-shell .quick-day-job span,
.app-shell .quick-day-job small,
.app-shell .quick-booked-row span,
.app-shell .quick-booked-row small,
.app-shell .invoice-detail-addresses small,
.app-shell .invoice-lines small,
.app-shell .price-card p,
.app-shell .price-card .price span,
.app-shell .membership-status-card p,
.app-shell .system-health-summary span,
.app-shell .system-health-row small,
.app-shell .accounting-provider-card p,
.app-shell .accounting-provider-head small,
.app-shell .accounting-history-row small,
.app-shell .stripe-status-row small,
.app-shell .stripe-status-facts span,
.app-shell .quote-step-head small,
.app-shell .saved-price-picker small,
.app-shell .form-confidence small,
.app-shell .cert-photo-capture small,
.app-shell .wizard-summary small{color:#b7bfd2!important}

/* Controls which previously carried light-theme dark text */
.app-shell .secondary,
.app-shell .icon-btn,
.app-shell .calendar-toolbar button,
.app-shell .choice-chips button,
.app-shell .quick-chip,
.app-shell .quick-type,
.app-shell .quick-custom-date,
.app-shell .quick-custom-time,
.app-shell .workspace-quick a,
.app-shell .workspace-quick button,
.app-shell .workspace-action,
.app-shell .timer-choice button,
.app-shell .meter-choice button,
.app-shell .cert-progress button,
.app-shell .quick-more summary,
.app-shell .saved-price-picker summary,
.app-shell .quote-more-v3 summary,
.app-shell .agenda-more{color:#e9edf8!important}
.app-shell .quick-type,
.modal .quick-type,
.app-shell .quick-chip,
.modal .quick-chip{
  background:#151829!important;
  border-color:#30354c!important;
  color:#e9edf8!important;
}
.app-shell .quick-type b,
.modal .quick-type b,
.app-shell .quick-chip b,
.modal .quick-chip b{color:#f4f6ff!important}
.app-shell .quick-type small,
.modal .quick-type small{color:#b7bfd2!important}
.app-shell .quick-type.active,
.modal .quick-type.active{
  background:#261e4b!important;
  border-color:#8159e8!important;
  color:#fff!important;
}
.app-shell .quick-chip.active,
.modal .quick-chip.active{
  background:#1c3358!important;
  border-color:#3d6bb3!important;
  color:#fff!important;
}
.app-shell .quick-route-check p>b,
.modal .quick-route-check p>b,
.app-shell .quick-route-check p>span,
.modal .quick-route-check p>span,
.app-shell .quick-route-check>small,
.modal .quick-route-check>small{color:#d6dbea!important}
.app-shell .quick-route-check.warn>strong,
.modal .quick-route-check.warn>strong{color:#ffd278!important}

/* Form text stays bright; labels are lighter but readable */
.app-shell .form-grid label,
.modal label,
.app-shell .cert-gas-body label,
.app-shell .iv-row label,
.app-shell .quote-builder-v3 label{color:#e8eefc!important}
.modal label small,.modal .fast-invoice small{color:#b7bfd2!important}
.modal .customer-edit-card{background:#1b2037!important;border-color:#3b435e!important;color:#f4f6ff!important}
.app-shell input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.app-shell textarea,
.app-shell select,
.modal input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.modal textarea,
.modal select{background:#252b43!important;border-color:#4a526d!important;color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
.app-shell input[type="color"],.modal input[type="color"]{min-height:44px;min-width:72px;padding:4px;background:#252b43!important;border:1px solid #4a526d!important;border-radius:10px}
.app-shell input[type="file"],.modal input[type="file"]{color:#e8eefc!important;background:#252b43!important;border:1px dashed #5a6480!important}
.app-shell input[type="file"]::file-selector-button,.modal input[type="file"]::file-selector-button{background:#3b435e;color:#fff;border:1px solid #5a6480;border-radius:10px;padding:8px 12px;margin-right:10px;font-weight:800}
.app-shell select option,.modal select option{background:#252b43!important;color:#ffffff!important}
.app-shell .quick-custom-date input,.app-shell .quick-custom-time input{background:transparent!important;border:0!important}

/* Status/semantic colours remain semantic, but not muddy */
.app-shell .badge{color:#e9edf8!important;background:#2a3150!important;border:1px solid #3b435e}
.app-shell .badge-complete{color:#6de6aa!important;background:#163427!important;border-color:#2a5a43}
.app-shell .money-strip span{color:#c4cbdd!important}
.app-shell .badge-complete{color:#6de6aa!important}
.app-shell .offline-ready{color:#6de6aa!important}
.app-shell .settings-save-state[data-kind="saved"]{color:#72e2ab!important}
.app-shell .settings-save-state[data-kind="dirty"]{color:#ffd278!important}
.app-shell .settings-save-state[data-kind="saving"]{color:#ccb7ff!important}

/* Membership is the regression that exposed this: make values unmistakable */
.app-shell .membership-panel .price-card .price strong{color:#fff!important;font-weight:900}
.app-shell .membership-panel .price-card .price span{color:#c4cbdd!important}
.app-shell .membership-panel .price-card p,
.app-shell .membership-panel .membership-status-card p{color:#b7bfd2!important}
.app-shell .membership-panel .price-card p s{color:#9fa9c0!important}

/* Keep the light document preview intentionally light — it represents customer output. */
.app-shell .doc-mini{color:#172033!important}
.app-shell .doc-mini b,
.app-shell .doc-mini strong{color:inherit}
.app-shell .doc-mini-title strong,
.app-shell .doc-mini-total strong{color:var(--preview-primary)!important}
.app-shell .doc-mini[data-header="band"] .doc-mini-title strong{color:#fff!important}

/* Mobile shell */
@media(max-width:900px){
  .app-shell .mobile-brand{color:#fff!important}
  .mobile-nav .create-tab span{color:#d6dbea!important}
}

/* v251 — cert/sites search chrome, quote line names, quote row dates */
.app-shell .cert-search{
  background:#1c2238!important;
  border:1px solid #4a526d!important;
  box-shadow:none!important;
  min-width:0!important;
  max-width:100%;
  flex:1 1 220px;
  overflow:visible;
  color:#c4cbdd!important;
  gap:8px;
  padding:0 12px;
}
.app-shell .cert-search input{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  min-width:0!important;
  width:100%!important;
  flex:1 1 auto;
  padding:10px 0!important;
}
.app-shell .cert-search input::placeholder{color:#9aa3bb!important;opacity:1}
.app-shell .certificate-library-bar{flex-wrap:wrap;min-width:0}
.app-shell .invoice-lines>div>div{flex:1 1 auto;min-width:0}
.app-shell .invoice-lines b{
  display:block;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:unset!important;
  word-break:break-word;
  max-width:none!important;
}
#quotesList .list-row{
  grid-template-columns:minmax(0,1.5fr) max-content minmax(148px,max-content) max-content 18px;
}
#quotesList .list-row>span:nth-child(3){white-space:nowrap}
.money-strip.quote-metrics{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:900px){
  .money-strip.quote-metrics{grid-template-columns:repeat(6,1fr)}
  .money-strip.quote-metrics>div:nth-child(-n+3){grid-column:span 2}
  .money-strip.quote-metrics>div:nth-child(n+4){grid-column:span 3}
}
.calendar-grid .day-head{overflow:visible;padding-top:2px}
.calendar-grid .appt time{display:block;font-weight:800;font-variant-numeric:tabular-nums;margin-bottom:3px}
.field-next[role=button]{cursor:pointer}
.quick-custom-date{position:relative;display:inline-flex;align-items:center;gap:8px}
.quick-date-caption{font-weight:700;color:#c8cedf}
.quick-date-uk{position:static;transform:none;font-weight:800;letter-spacing:.02em;color:#e8eef8;pointer-events:none}
.quick-custom-date input[type=date]{position:absolute!important;inset:0!important;opacity:0!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;border:0!important;min-width:0!important;color:transparent!important;cursor:pointer;z-index:2}
.quick-custom-date input[type=date]::-webkit-calendar-picker-indicator{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer}

/* v261 — job sheet paperwork was still the light premium card; THIS JOB kicker vanished on white */
.modal .job-paperwork,
.app-shell .job-paperwork{
  background:#121526!important;
  border:1px solid #292e44!important;
  color:#eef1fb!important;
}
.modal .job-paperwork .kicker,
.app-shell .job-paperwork .kicker{color:#c4b5fd!important}
.modal .job-paperwork h3,
.app-shell .job-paperwork h3{color:#f7f8ff!important}
.modal .paperwork-group>b,
.app-shell .paperwork-group>b{color:#b7bfd2!important}
.modal .job-paperwork .workspace-item,
.modal .job-paperwork .empty,
.app-shell .job-paperwork .workspace-item,
.app-shell .job-paperwork .empty{
  background:#171c31!important;
  border-color:#3b435e!important;
  color:#eef1fb!important;
}

/* v263 — phone page scroll: document is the scroller. overflow-x clip on html was locking height to the viewport and clipping Home/Jobs/Quotes. */
@media(max-width:900px){
  html{
    max-width:100%;
    height:auto!important;
    min-height:100%!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:scroll!important;
    overscroll-behavior-y:auto;
    touch-action:pan-y;
  }
  body{
    max-width:100%;
    height:auto!important;
    min-height:100%!important;
    max-height:none!important;
    overflow:visible!important;
    position:static!important;
    touch-action:pan-y;
  }
  .app-shell{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    position:static!important;
  }
  .app-shell>main,.content,.view,.view.active,#dashboard,#jobs,#quotes,#invoices,#schedule,#customers,#certificates,#settings{
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    min-height:0!important;
  }
  #quotesList .list-row{
    grid-template-columns:minmax(0,1fr) auto 18px!important;
    align-items:start;
  }
  #quotesList .list-row>span:nth-child(2),
  #quotesList .list-row>span:nth-child(3){display:none}
  #quotesList .list-row b{
    white-space:normal!important;
    overflow:visible!important;
    word-break:break-word;
  }
  .money-strip.quote-metrics>div{min-width:0}
  .money-strip.quote-metrics b{overflow-wrap:anywhere;font-size:clamp(16px,5.2vw,24px)}
  .app-shell .cert-search{
    flex:1 1 100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
  }
  .app-shell .cert-search input{min-width:0!important;width:100%!important}
  #modal .modal-actions,
  #modal .sticky-actions,
  .customer-edit-actions{
    flex-wrap:wrap;
    gap:8px;
  }
  #modal .modal-actions .primary,
  #modal .modal-actions .secondary,
  .customer-edit-actions button{
    white-space:normal;
    min-width:0;
  }
}
@media(max-width:520px){
  .money-strip.quote-metrics{grid-template-columns:1fr 1fr!important}
  .money-strip.quote-metrics>div{grid-column:auto!important}
  .page-head{flex-wrap:wrap!important;align-items:flex-start!important;row-gap:10px}
  .page-head>.primary,#diaryQuickBookBtn{position:relative;z-index:3;width:100%;min-width:0}
  .quick-book-section-head small{display:block;margin-top:6px;line-height:1.4}
  #modal .modal-actions{flex-wrap:wrap!important;justify-content:flex-end;gap:8px}
  #modal .modal-actions button{flex:1 1 140px;white-space:normal!important;min-width:0}
}