/* WorkOps canonical dark-theme interaction states.
   Loaded last: this is the final authority for autofill and selected/active controls. */

/* iOS/Safari/Chrome autofill must never reintroduce pale system fills beneath white text. */
.app-shell input:-webkit-autofill,
.app-shell input:-webkit-autofill:hover,
.app-shell input:-webkit-autofill:focus,
.app-shell textarea:-webkit-autofill,
.app-shell textarea:-webkit-autofill:hover,
.app-shell textarea:-webkit-autofill:focus,
.app-shell select:-webkit-autofill,
.app-shell select:-webkit-autofill:hover,
.app-shell select:-webkit-autofill:focus,
.modal input:-webkit-autofill,
.modal input:-webkit-autofill:hover,
.modal input:-webkit-autofill:focus,
.modal textarea:-webkit-autofill,
.modal textarea:-webkit-autofill:hover,
.modal textarea:-webkit-autofill:focus,
.modal select:-webkit-autofill,
.modal select:-webkit-autofill:hover,
.modal select:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff!important;
  caret-color:#fff!important;
  -webkit-box-shadow:0 0 0 1000px #252b43 inset!important;
  box-shadow:0 0 0 1000px #252b43 inset!important;
  border-color:#4a526d!important;
  background-color:#252b43!important;
  transition:background-color 9999s ease-out 0s!important;
}
.app-shell input:autofill,
.app-shell textarea:autofill,
.app-shell select:autofill,
.modal input:autofill,
.modal textarea:autofill,
.modal select:autofill{
  background:#252b43!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* Quick Book job type selection: dark tinted card, never white/light. */
.app-shell .quick-type.active{
  background:color-mix(in srgb,var(--job-colour) 20%,#252b43 80%)!important;
  border-color:var(--job-colour)!important;
  color:#fff!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--job-colour) 28%,transparent),0 8px 20px rgba(0,0,0,.16)!important;
}
.app-shell .quick-type.active b,
.app-shell .quick-type.active strong,
.app-shell .quick-type.active span{color:#fff!important}
.app-shell .quick-type.active small{color:#cbd3e5!important}

/* Other old light-theme active states which receive bright text from the dark skin. */
.app-shell .choice-chips button.active,
.app-shell .meter-choice button.active,
.app-shell .cert-progress button.active{
  background:#24314d!important;
  border-color:#6d88b7!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:0 0 0 2px rgba(109,136,183,.18)!important;
}
.app-shell .choice-chips button.active *,
.app-shell .meter-choice button.active *,
.app-shell .cert-progress button.active *{color:inherit!important}

/* Keep selected navigation/cards readable and visually consistent in the dark shell. */
.app-shell .diary-mode button.active,
.app-shell .settings-nav button.active{
  background:#27324c!important;
  color:#fff!important;
  border-color:#4d5e80!important;
  box-shadow:0 4px 12px rgba(0,0,0,.16)!important;
}
.app-shell .accounting-provider-card.active{
  background:#1e302b!important;
  border-color:#4d8a72!important;
  color:#f2fff8!important;
}
.app-shell .accounting-provider-card.active b,
.app-shell .accounting-provider-card.active strong{color:#f2fff8!important}
.app-shell .accounting-provider-card.active small,
.app-shell .accounting-provider-card.active p{color:#bdd5cb!important}

/* Focus should enhance the existing dark surface, not flip it to white. */
.app-shell input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
.app-shell textarea:focus,
.app-shell select:focus,
.modal input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
.modal textarea:focus,
.modal select:focus{
  background:#252b43!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border-color:#6f83b5!important;
  box-shadow:0 0 0 3px rgba(124,77,255,.18)!important;
}

/* v251 — search pill must stay dark; never a white inner field */
.app-shell .cert-search{
  background:#1c2238!important;
  border-color:#4a526d!important;
  min-width:0!important;
}
.app-shell .cert-search input,
.app-shell .cert-search input:focus{
  background:transparent!important;
  box-shadow:none!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}