/* Premium job feedback
   The app should visibly acknowledge work without turning routine saves into notifications. */

.route-jobs :is(
  .job-task-feedback:not([hidden]),
  .job-next-error.success,
  .job-create-status.success,
  .job-quick-status.success,
  .completion-record-status.success,
  .evidence-capture-status.success
){
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  max-width:100%;
  min-height:32px;
  margin-top:6px;
  padding:5px 10px;
  border:1px solid color-mix(in srgb,var(--green) 16%,var(--jobs-line));
  border-radius:999px;
  background:color-mix(in srgb,var(--green-soft) 62%,transparent);
  color:color-mix(in srgb,var(--green) 78%,var(--ink));
  font-size:.75rem;
  line-height:1.35;
  font-weight:600;
  animation:sp-feedback-in 260ms var(--sp-motion-ease,ease) both;
}
.route-jobs :is(
  .job-task-feedback:not([hidden]),
  .job-next-error.success,
  .job-create-status.success,
  .job-quick-status.success,
  .completion-record-status.success,
  .evidence-capture-status.success
)::before{
  content:"";
  flex:0 0 6px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 8%,transparent);
}

/* Existing inline layout rules occasionally force these status areas full-width. */
.route-jobs :is(
  .completion-record-status.success,
  .evidence-capture-status.success
){
  width:max-content;
}

/* Errors get the same physical acknowledgement, but remain clearly different from success. */
.route-jobs :is(
  .job-next-error:not(.success),
  .job-create-status.error,
  .job-quick-status.error,
  .completion-record-status.error,
  .evidence-capture-status.error
):not(:empty){
  display:inline-flex;
  align-items:flex-start;
  gap:7px;
  width:max-content;
  max-width:100%;
  min-height:32px;
  padding:6px 10px;
  border:1px solid color-mix(in srgb,#9a3d32 18%,var(--jobs-line));
  border-radius:7px;
  background:color-mix(in srgb,#fff3f0 76%,var(--card));
  color:#87382f;
  font-size:.76rem;
  line-height:1.42;
  font-weight:600;
  animation:sp-feedback-in 260ms var(--sp-motion-ease,ease) both;
}
.route-jobs :is(
  .job-next-error:not(.success),
  .job-create-status.error,
  .job-quick-status.error,
  .completion-record-status.error,
  .evidence-capture-status.error
):not(:empty)::before{
  content:"";
  flex:0 0 6px;
  width:6px;
  height:6px;
  margin-top:.35em;
  border-radius:50%;
  background:#9a3d32;
}

/* Neutral in-progress states use gold, never green. */
.route-jobs .job-create-form[data-submit-state="saving"] .job-create-status:not(:empty),
.route-jobs .job-quick-status:not(:empty):not(.success):not(.error){
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  max-width:100%;
  min-height:30px;
  color:#80683d;
  font-size:.75rem;
  line-height:1.4;
  font-weight:600;
}
.route-jobs .job-create-form[data-submit-state="saving"] .job-create-status:not(:empty)::before,
.route-jobs .job-quick-status:not(:empty):not(.success):not(.error)::before{
  content:"";
  flex:0 0 6px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--brand-gold);
  animation:sp-feedback-pulse 900ms var(--sp-motion-ease-soft,ease-in-out) infinite alternate;
}

/* Next-step loading has a tiny branded response rather than a dead "Checking…" line. */
.route-jobs .job-next-action[aria-busy="true"]{
  cursor:progress;
}
.route-jobs .job-next-action[aria-busy="true"] .job-next-marker{
  color:var(--brand-gold);
  animation:sp-feedback-busy 900ms var(--sp-motion-ease-soft,ease-in-out) infinite alternate;
}
.route-jobs .job-next-action[aria-busy="true"] .job-next-copy strong{
  color:#676d68;
}

/* Schedule saves already own their place in the row; just make the acknowledgement feel deliberate. */
.route-jobs .job-schedule-status:not(:empty){
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  max-width:100%;
  min-height:28px;
  padding:3px 8px;
  border-radius:999px;
  background:color-mix(in srgb,var(--green-soft) 52%,transparent);
  color:color-mix(in srgb,var(--green) 78%,var(--ink));
  font-size:.72rem;
  font-weight:600;
  animation:sp-feedback-in 240ms var(--sp-motion-ease,ease) both;
}
.route-jobs .job-schedule-status:not(:empty)::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--green);
}

@keyframes sp-feedback-in{
  from{opacity:0;transform:translate3d(0,3px,0) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes sp-feedback-pulse{
  from{opacity:.45;transform:scale(.84)}
  to{opacity:1;transform:scale(1.08)}
}
@keyframes sp-feedback-busy{
  from{opacity:.55;transform:translate3d(0,1px,0)}
  to{opacity:1;transform:translate3d(2px,-1px,0)}
}

@media(max-width:720px){
  .route-jobs :is(
    .job-task-feedback:not([hidden]),
    .job-next-error.success,
    .job-create-status.success,
    .job-quick-status.success,
    .completion-record-status.success,
    .evidence-capture-status.success
  ){
    min-height:34px;
  }
}

@media(prefers-reduced-motion:reduce){
  .route-jobs :is(
    .job-task-feedback,
    .job-next-error,
    .job-create-status,
    .job-quick-status,
    .completion-record-status,
    .evidence-capture-status,
    .job-schedule-status,
    .job-next-action[aria-busy="true"] .job-next-marker
  ){
    animation:none!important;
  }
}