#my-work-page .my-work-hr-board {
  display: grid;
  gap: var(--space-4);
}

#my-work-page .my-work-hr-board-head {
  align-items: end;
}

#my-work-page .my-work-hr-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-3);
}

#my-work-page .my-work-hr-stat,
#my-work-page .my-work-hr-section,
#my-work-page .my-work-hr-day-lane,
#my-work-page .my-work-hr-presence-pane {
  background: var(--surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

#my-work-page .my-work-hr-stat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: calc(var(--space-10) + var(--space-8));
  padding: var(--space-4);
}

#my-work-page .my-work-hr-stat div {
  min-width: 0;
}

#my-work-page .my-work-hr-stat strong {
  display: block;
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

#my-work-page .my-work-hr-stat span,
#my-work-page .my-work-hr-stat em {
  display: block;
  color: var(--content-2);
  font-size: var(--text-sm);
  font-style: normal;
  line-height: var(--leading-body);
}

#my-work-page .my-work-hr-stat em {
  color: var(--content-3);
  font-size: var(--text-xs);
}

#my-work-page .my-work-hr-section {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

#my-work-page .my-work-hr-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

#my-work-page .my-work-hr-section-head div {
  min-width: 0;
}

#my-work-page .my-work-hr-section-head span,
#my-work-page .my-work-hr-pane-title span {
  display: block;
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  line-height: var(--leading-tight);
  text-transform: uppercase;
}

#my-work-page .my-work-hr-section-head strong,
#my-work-page .my-work-hr-pane-title strong {
  display: block;
  color: var(--content-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

#my-work-page .my-work-hr-date-filter {
  align-items: flex-start;
  display: grid;
  gap: var(--space-1);
  min-width: min(100%, 11rem);
}

#my-work-page .my-work-hr-date-filter input,
#my-work-page .my-work-hr-form input,
#my-work-page .my-work-hr-form select {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  color: var(--content-1);
  font: inherit;
  min-height: calc(var(--space-8) + var(--space-2));
  padding: var(--space-2) var(--space-3);
  transition: border-color var(--dur-micro) var(--ease-standard),
              box-shadow var(--dur-micro) var(--ease-standard),
              background-color var(--dur-micro) var(--ease-standard);
  width: 100%;
}

#my-work-page .my-work-hr-date-filter input::placeholder,
#my-work-page .my-work-hr-form input::placeholder {
  color: var(--content-placeholder);
  opacity: 1;
}

#my-work-page .my-work-hr-date-filter input:not(:disabled):placeholder-shown,
#my-work-page .my-work-hr-form input:not(:disabled):placeholder-shown {
  background-color: var(--field-empty-surface);
  border-color: var(--field-empty-border);
}

#my-work-page .my-work-hr-date-filter input:not(:disabled):not(:placeholder-shown),
#my-work-page .my-work-hr-form input:not(:disabled):not(:placeholder-shown) {
  background-color: var(--field-filled-surface);
  border-color: var(--field-filled-border);
}

@supports selector(select:has(option:checked)) {
  #my-work-page .my-work-hr-form select:not(:disabled):has(option[value=""]:checked) {
    background-color: var(--field-empty-surface);
    border-color: var(--field-empty-border);
    color: var(--content-placeholder);
  }

  #my-work-page .my-work-hr-form select:not(:disabled):not(:has(option[value=""]:checked)) {
    background-color: var(--field-filled-surface);
    border-color: var(--field-filled-border);
    color: var(--content-1);
  }
}

#my-work-page .my-work-hr-date-filter input:focus-visible,
#my-work-page .my-work-hr-form input:focus-visible,
#my-work-page .my-work-hr-form select:focus-visible,
#my-work-page .my-work-hr-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

#my-work-page .my-work-hr-form {
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

#my-work-page .my-work-hr-form-title {
  align-items: center;
  color: var(--content-1);
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

#my-work-page .my-work-hr-form-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

#my-work-page .my-work-hr-form label {
  color: var(--content-2);
  display: grid;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  gap: var(--space-1);
  min-width: 0;
}

#my-work-page .my-work-hr-form label span,
#my-work-page .my-work-hr-date-filter span {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}

#my-work-page .my-work-hr-form-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

#my-work-page .my-work-hr-form-actions .btn {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
}

#my-work-page .my-work-hr-week-grid,
#my-work-page .my-work-hr-presence-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

#my-work-page .my-work-hr-day-lane,
#my-work-page .my-work-hr-presence-pane {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3);
}

#my-work-page .my-work-hr-presence-pane.is-wide {
  grid-column: 1 / -1;
}

#my-work-page .my-work-hr-day-lane > header,
#my-work-page .my-work-hr-pane-title {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

#my-work-page .my-work-hr-day-lane > header span {
  color: var(--content-1);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

#my-work-page .my-work-hr-day-lane > header strong,
#my-work-page .my-work-hr-pane-title strong {
  align-items: center;
  background: var(--cp-accent-soft);
  border-radius: var(--radius-pill);
  color: var(--cp-accent);
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  justify-content: center;
  min-width: var(--space-6);
  padding: var(--space-1) var(--space-2);
}

#my-work-page .my-work-hr-day-list {
  display: grid;
  gap: var(--space-2);
}

#my-work-page .my-work-hr-shift-card,
#my-work-page .my-work-hr-attendance-card {
  align-items: center;
  animation: my-work-hr-card-in var(--dur-fast) var(--ease-standard) both;
  background: var(--surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  min-width: 0;
  padding: var(--space-3);
  transition: border-color var(--dur-micro) var(--ease-standard),
              box-shadow var(--dur-micro) var(--ease-standard),
              transform var(--dur-micro) var(--ease-standard);
}

#my-work-page .my-work-hr-shift-card:hover,
#my-work-page .my-work-hr-attendance-card:hover {
  border-color: color-mix(in srgb, var(--cp-accent) 40%, var(--border-1));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

#my-work-page .my-work-hr-attendance-card.is-open {
  border-color: color-mix(in srgb, var(--cp-success) 35%, var(--border-1));
}

#my-work-page .my-work-hr-shift-main,
#my-work-page .my-work-hr-attendance-card > div {
  min-width: 0;
}

#my-work-page .my-work-hr-shift-title {
  display: grid;
  gap: var(--space-1);
}

#my-work-page .my-work-hr-shift-title strong,
#my-work-page .my-work-hr-attendance-card strong {
  color: var(--content-1);
  display: block;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

#my-work-page .my-work-hr-shift-title span,
#my-work-page .my-work-hr-attendance-card span,
#my-work-page .my-work-hr-meta span,
#my-work-page .my-work-hr-attendance-meta span {
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

#my-work-page .my-work-hr-meta,
#my-work-page .my-work-hr-attendance-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-2);
}

#my-work-page .my-work-hr-meta span,
#my-work-page .my-work-hr-attendance-meta span {
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  color: var(--content-3);
  padding: var(--space-1) var(--space-2);
}

#my-work-page .my-work-hr-shift-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-1);
}

#my-work-page .my-work-hr-icon-btn {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  color: var(--content-2);
  cursor: pointer;
  display: inline-flex;
  height: calc(var(--space-8) + var(--space-1));
  justify-content: center;
  padding: 0;
  transition: background-color var(--dur-micro) var(--ease-standard),
              border-color var(--dur-micro) var(--ease-standard),
              transform var(--dur-micro) var(--ease-standard);
  width: calc(var(--space-8) + var(--space-1));
}

#my-work-page .my-work-hr-icon-btn:hover {
  background: var(--cp-accent-soft);
  border-color: color-mix(in srgb, var(--cp-accent) 35%, var(--border-1));
  color: var(--cp-accent);
}

#my-work-page .my-work-hr-icon-btn:active {
  transform: translateY(1px);
}

#my-work-page .my-work-hr-icon-btn.is-danger:hover {
  background: var(--cp-danger-soft);
  border-color: color-mix(in srgb, var(--cp-danger) 30%, var(--border-1));
  color: var(--cp-danger);
}

#my-work-page .my-work-hr-icon,
#my-work-page .my-work-hr-btn-icon,
#my-work-page .my-work-hr-stat-icon,
#my-work-page .my-work-hr-icon-btn span {
  background: currentColor;
  display: inline-block;
  flex: 0 0 auto;
  height: var(--space-4);
  mask: var(--my-work-hr-icon-url) center / contain no-repeat;
  -webkit-mask: var(--my-work-hr-icon-url) center / contain no-repeat;
  width: var(--space-4);
}

#my-work-page .my-work-hr-stat-icon {
  align-items: center;
  background: var(--cp-accent);
  color: var(--cp-accent);
  height: var(--space-6);
  width: var(--space-6);
}

#my-work-page .my-work-hr-icon-calendar { --my-work-hr-icon-url: url("/assets/static/lucide-icons/clipboard-list.svg"); }
#my-work-page .my-work-hr-icon-users { --my-work-hr-icon-url: url("/assets/static/lucide-icons/users.svg"); }
#my-work-page .my-work-hr-icon-clock { --my-work-hr-icon-url: url("/assets/static/lucide-icons/clock.svg"); }
#my-work-page .my-work-hr-icon-plus { --my-work-hr-icon-url: url("/assets/static/lucide-icons/plus.svg"); }
#my-work-page .my-work-hr-icon-check { --my-work-hr-icon-url: url("/assets/static/lucide-icons/check.svg"); }
#my-work-page .my-work-hr-icon-edit { --my-work-hr-icon-url: url("/assets/static/lucide-icons/square-pen.svg"); }
#my-work-page .my-work-hr-icon-delete { --my-work-hr-icon-url: url("/assets/static/lucide-icons/x.svg"); }
#my-work-page .my-work-hr-icon-refresh { --my-work-hr-icon-url: url("/assets/static/lucide-icons/clock.svg"); }

#my-work-page .my-work-hr-error,
#my-work-page .my-work-hr-loading {
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

#my-work-page .my-work-hr-error strong {
  color: var(--content-1);
  font-size: var(--text-base);
}

#my-work-page .my-work-hr-loading .cp-skeleton {
  display: block;
  height: var(--space-6);
}

@keyframes my-work-hr-card-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-2));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 720px) {
  #my-work-page .my-work-hr-section-head,
  #my-work-page .my-work-hr-shift-card,
  #my-work-page .my-work-hr-attendance-card {
    align-items: stretch;
    flex-direction: column;
  }

  #my-work-page .my-work-hr-shift-actions {
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  #my-work-page .my-work-hr-shift-card,
  #my-work-page .my-work-hr-attendance-card {
    animation: none;
    transition: none;
  }
}