/* Workerex 0.0.51: independent Job Status and Visit Status presentation */

.status-manager-stack {
  display: grid;
  gap: 24px;
}

.status-manager-section {
  min-width: 0;
}

.visit-status-badge {
  --job-status-color: #64748b;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--job-status-color) 38%, white);
  border-radius: 7px;
  background: color-mix(in srgb, var(--job-status-color) 10%, white);
  color: var(--job-status-color);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.visit-status-select,
[data-visit-status-color-select] {
  --job-status-color: #64748b;
  border-left: 4px solid var(--job-status-color) !important;
  color: var(--job-status-color) !important;
  font-weight: 800 !important;
}

.visit-status-select:disabled,
[data-visit-status-color-select]:disabled {
  opacity: .82;
  cursor: not-allowed;
}

.calendar-visit-card {
  position: relative;
}

.calendar-visit-card__job-status-dot {
  --job-status-color: #64748b;
  position: absolute;
  top: 7px;
  right: 7px;
  width: 10px;
  height: 10px;
  border: 2px solid white;
  border-radius: 999px;
  background: var(--job-status-color);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--job-status-color) 70%, #172033),
    0 0 9px color-mix(in srgb, var(--job-status-color) 75%, transparent);
}

.calendar-visit-card__job-title {
  padding-right: 17px;
}

.calendar-visit-card__status.visit-status-badge {
  margin-top: 3px;
}

.calendar-job-visit-row__status {
  margin-top: 4px;
}

.calendar-selected-visit__status,
.calendar-visit-modal__field:has([data-visit-status-color-select]) {
  grid-column: 1 / -1;
}

.calendar-job-information__status-label {
  font-weight: 800;
}

.job-visit-list__header,
.job-visit-row {
  grid-template-columns:
    minmax(120px, 1.15fr)
    minmax(120px, 1.25fr)
    minmax(120px, .75fr)
    96px
    68px
    68px
    minmax(125px, .9fr)
    auto;
}

.job-visit-row__status {
  min-width: 0;
  align-self: center;
}

.job-visit-row__status .visit-status-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 8px 9px;
  border: 1px solid #d7dce7;
  border-radius: 10px;
  background: white;
  font: inherit;
}

.job-visit-row__date {
  white-space: nowrap;
}

.worker-visit-status-card {
  --job-status-color: #64748b;
  display: grid;
  gap: 9px;
  margin-bottom: 12px;
  padding: 16px 17px;
  border: 1px solid color-mix(in srgb, var(--job-status-color) 34%, #e5e9f1);
  border-left: 6px solid var(--job-status-color);
  border-radius: 17px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--job-status-color) 9%, white),
      white 60%
    );
  box-shadow:
    0 8px 25px rgba(23, 32, 51, .05),
    0 0 18px color-mix(in srgb, var(--job-status-color) 12%, transparent);
}

.worker-visit-status-card__label {
  color: var(--worker-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.worker-visit-status-card select {
  width: 100%;
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid color-mix(in srgb, var(--job-status-color) 45%, #d7dce7);
  border-left: 5px solid var(--job-status-color);
  border-radius: 12px;
  background: white;
  color: var(--job-status-color);
  font: inherit;
  font-size: 17px;
  font-weight: 900;
}

.worker-visit-status-card__readonly {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 9px 13px;
  border: 1px solid color-mix(in srgb, var(--job-status-color) 40%, white);
  border-radius: 11px;
  background: color-mix(in srgb, var(--job-status-color) 11%, white);
  color: var(--job-status-color);
  font-size: 17px;
  font-weight: 900;
}

.worker-visit-card .visit-status-badge {
  flex: 0 1 auto;
}

.worker-status-message {
  min-height: 18px;
  color: var(--worker-muted);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .job-visit-list__header {
    display: none;
  }

  .job-visit-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .job-visit-row__actions,
  .visit-delete-message {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .status-manager-stack {
    gap: 18px;
  }

  .worker-visit-status-card {
    padding: 14px;
  }

  .job-visit-row {
    grid-template-columns: 1fr;
  }

  .job-visit-row > * {
    grid-column: 1;
  }
}